basic support for closing tabs

KylePDavis · May 10, 2014 · 83b465d · 83b465d
1 parent db5bba8
commit 83b465d
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "C9",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "A wrapper app for running the Cloud9 IDE locally",
   "main": "app://c9/www/index.html",
   "repository": {

diff --git a/www/css/main.css b/www/css/main.css
@@ -246,3 +246,15 @@ body.ready > #logs {
 	background-position: 0 0;
 	top: 8px;
 }
+#tabs .tab.active .tab_middle .tab_x:hover {
+	background-position: -14px 0;
+}
+#tabs .tab.active .tab_middle .tab_x:active {
+	background-position: -28px 0;
+}
+#tabs .tab .tab_middle .tab_x:hover {
+	background-position: -14px -14px;
+}
+#tabs .tab .tab_middle .tab_x:active {
+	background-position: -28px -14px;
+}
diff --git a/www/lib/Main.js b/www/lib/Main.js
@@ -55,10 +55,8 @@ var Main = module.exports = {
 			},
 
 			close: function () {
-				var $activeTab = Tabs.getActive(),
-					$nextTab = Tabs.getPrevious($activeTab);
+				var $activeTab = Tabs.getActive();
 				Tabs.remove($activeTab);
-				Tabs.activate($nextTab);
 			}
 
 		},
@@ -174,36 +172,49 @@ var Main = module.exports = {
 		// Initialize
 		$(function(){
 
-			var $welcomeTab = Tabs.activate(Tabs.add("Welcome"));
+			var $welcomeTab = Tabs.add({
+				title: "Welcome",
+				tooltip: "Welcome to C9"
+			});
 			$welcomeTab[0].$element = $("#main #welcome");
+			Tabs.activate($welcomeTab);
 
+			var $tabActivated,
+				$prevTabActivated;
 			Tabs
 				.on("activated", function(e, $tab){
-					if($tab[0] === $welcomeTab[0]){
-						Log.$logs.show();
-					}else{
-						Log.$logs.hide();
-					}
-					Tabs.$tabs.each(function(i, $tab){
-						$tab.$element.hide();
+					// track pointer to previous tab
+					$prevTabActivated = $tabActivated;
+					$tabActivated = $tab;
+					// toggle the logs based on if this is the welcome tab
+					Log.$logs.toggle($tab[0] === $welcomeTab[0]);
+					// toggle the logs based on if this is the correct tab
+					Tabs.$tabs.each(function(i, t) {
+						t.$element.toggle($tab[0] === t);
 					});
-					$tab[0].$element.show();
 					$tab[0].$element.focus();
 				})
 				.on("removed", function(e, $tab){
+					// close the workspace for the tab
 					var $tabElement = $tab[0].$element;
 					if ($tabElement.is("iframe")) { //NOTE: only do stuff for iframes
 						Workspaces.close($tabElement);
 					}
+					// if active tab was removed then select a new tab
+					if ($tab[0] === $tabActivated[0]){
+						Tabs.activate($prevTabActivated || Tabs.$tabs.first());
+					}
 				});
 
 			Workspaces
 				.on("opened", function(e, $frame){
 					var server = $frame[0].server,
-						$tab = Tabs.add(server.id);
+						$tab = Tabs.add({
+							title: server.id,
+							tooltip: server.dir
+						});
 					$frame[0].$tab = $tab;
 					$tab[0].$element = $frame;
-					Tabs.setTooltip($tab, server.dir);
 					Tabs.activate($tab);
 					Log.out("Opened workspace " + JSON.stringify(server.id) + "; ", {dir:server.dir, url:server.url});
 				})

diff --git a/www/lib/Tabs.js b/www/lib/Tabs.js
@@ -36,10 +36,15 @@ var Tabs = module.exports = {	//TODO: rename to Tabs
 		return Tabs.$container.on(eventName, handlerFn);
 	},
 
-	add: function add(title){
-		var $tab = $($(Tabs.TAB_HTML).appendTo(Tabs.$container));
-		Tabs.setTitle($tab, title);
+	add: function add(opts){
+		var $tab = $(Tabs.TAB_HTML).appendTo(Tabs.$container);
+		if (opts.title) Tabs.setTitle($tab, opts.title);
+		if (opts.tooltip) Tabs.setTooltip($tab, opts.tooltip);
 		$tab.on("click", Tabs.activate.bind(Tabs, $tab));
+		$tab.find(".tab_x").on("click", function(e) {
+			Tabs.remove($tab);
+			return false;
+		});
 		Tabs.$container.triggerHandler("added", [$tab]);
 		return $tab;
 	},
@@ -61,9 +66,12 @@ var Tabs = module.exports = {	//TODO: rename to Tabs
 
 	activate: function activate($tab){
 		var $oldTab = Tabs.$container.children(".tab.active");
-		$oldTab.removeClass("active");
-		$oldTab.triggerHandler("deactivated", [$oldTab]);
-		Tabs.$container.triggerHandler("deactivated", $oldTab);
+		if ($oldTab[0] === $tab[0]) return;
+		if ($oldTab[0]) {
+			$oldTab.removeClass("active");
+			$oldTab.triggerHandler("deactivated", [$oldTab]);
+			Tabs.$container.triggerHandler("deactivated", $oldTab);
+		}
 		$tab.addClass("active");
 		$tab.triggerHandler("activated", [$tab]);
 		Tabs.$container.triggerHandler("activated", [$tab]);