Allows tabs to be closed and reopened

public/editor/components/base.js

@@ -5,6 +5,8 @@ define(function() {
     }
   };
 
+  _.extend(Component.prototype, Backbone.Events)
+
   Component.extend = Backbone.Model.extend;
 
   return Component;

public/editor/components/merge/merge.js

@@ -6,7 +6,9 @@ define(["components/base", "models/file", "components/dialog/dialog"], function(
         if (editor.hasChanged("openFile") && editor.previous("openFile")) {
           editor.previous("openFile").off("change:mergeStatus", self.margeStatusChanged);
         }
-        editor.get("openFile").on("change:mergeStatus", self.mergeStatusChanged, self);
+				if (editor.get("openFile")) {
+        	editor.get("openFile").on("change:mergeStatus", self.mergeStatusChanged, self);
+				}
       });
     },
 

public/editor/components/save/save.js

@@ -1,7 +1,7 @@
 define(["components/base", "components/text-editor/text-editor", "models/file"], function(Component, TextEditor, File) {
   var Save = Component.extend({
     initialize : function() {
-      this.enableSaving();
+      this.disableSaving();
 
       this.templates = {
         saveSuccess : _.template( $("#save-success-template").html() ),
@@ -10,9 +10,7 @@ define(["components/base", "components/text-editor/text-editor", "models/file"],
         merging     : _.template( $("#save-merging-template").html() )
       };
 
-      editor.on("change:openFile change:openFileView", this._setupForOpenFile, this);
-
-      this._setupForOpenFile();
+      editor.on("change:openFile", this._openFileChanged, this);
     },
 
     save : function() {
@@ -72,7 +70,7 @@ define(["components/base", "components/text-editor/text-editor", "models/file"],
       }
     },
 
-    _setupForOpenFile : function() {
+    _openFileChanged : function() {
       this._enableOrDisableSaving();
 
       if (editor.hasChanged("openFile") && editor.previous("openFile")) {

public/editor/components/tabs/tabs.js

@@ -15,10 +15,11 @@ define(["components/base", "lib/path_util"], function(Base, PathUtil) {
     },
 
     open : function(file, fileView) {
-      console.log("opening tab", file, fileView);
-      // We should never be asked to open a file twice, but if we are
-      // ignore the request.
-      if (this.openTabs[file.id]) return;
+      // If the tabs is already open just show it.
+      if (this.openTabs[file.id]) {
+        this.show(file);
+        return;
+      }
 
       var tabEl = $(_.template( $("#tab-template").html(), {
         name : PathUtil.basename(file.get("path")),
@@ -34,18 +35,84 @@ define(["components/base", "lib/path_util"], function(Base, PathUtil) {
       fileView.render();
       tabPaneEl.append(fileView.el);
 
-      this.openTabs[file.id] = {
+      var tab = {
         file      : file,
         fileView  : fileView,
         tabEl     : tabEl,
         tabPaneEl : tabPaneEl
       };
 
-      tabEl.find("a").tab("show");
-      tabEl.find("a").on("click", function(e) {
+      this.openTabs[file.id] = tab;
+
+      this._addEventListeners(tabEl, file, fileView);
+
+      this.show(file);
+    },
+
+    close : function(file) {
+      // Get the information about the file tab we are closing.
+      // We bail out if the file isn't open in a tab.
+      var tab = this.openTabs[file.id];
+      if (!tab) return;
+
+      // Remove it from the places the open files and tabs are stored.
+      delete this.openTabs[file.id];
+      editor.get("openFiles").remove(file);
+
+      // Open the previous tab
+      var previousTabEl = tab.tabEl.prev();
+      if (previousTabEl.length > 0) {
+        setTimeout(function() {
+          previousTabEl.find("a").tab("show");
+        }, 10);
+      } else {
+        editor.set({
+          openFile     : null,
+          openFileView : null
+        })
+      }
+
+      tab.tabEl.prev().tab("show")
+
+      // Unbind everything
+      tab.fileView.close();
+      tab.tabPaneEl.remove();
+      tab.tabEl.remove();
+
+      this._removeEventListeners(tab.tabEl);
+    },
+
+    show : function(file) {
+      var tab = this.openTabs[file.id];
+      if (!tab) return;
+
+      tab.tabEl.find("a").tab("show");
+    },
+
+    _removeEventListeners : function(tabEl) {
+      tabEl.find("a").off("click.tabs");
+      tabEl.find("a").off("shown.tabs");
+      tabEl.find(".tab-close").off("click.tabs");
+    },
+
+    _addEventListeners : function(tabEl, file, fileView) {
+      tabEl.find("a").on("click.tabs", function(e) {
         e.preventDefault();
         $(this).tab("show");
       });
+
+      var self = this;
+      tabEl.find("a").on("shown.tabs", function(e) {
+        editor.set({
+          openFile     : file,
+          openFileView : fileView
+        });
+      });
+
+      tabEl.find(".tab-close").on("click.tabs", function(e) {
+        e.preventDefault();
+        self.close(file);
+      });
     }
   });
 

public/editor/editor.js

@@ -32,15 +32,15 @@ define([
       this.mainView.render();
 
       this.components = {
-        save       : new Save(),
         merge      : new Merge(),
         fileOpener : new FileOpener(),
         tabs       : new Tabs()
       }
+      // Save depends on `tabs` already existing
+      this.components.save = new Save();
     },
 
     openFile : function(file) {
-      console.log("opening", file);
       // If the file isn't already open we need to insert it into the collection of
       // `openFiles`. Everything else should watch this collection if they need to
       // react to this.
@@ -55,9 +55,10 @@ define([
 
         // Display the tab
         this.components.tabs.open(file, fileView);
+      } else {
+        this.components.tabs.show(file);
       }
 
-      this.set("openFile", file);
     },
 
     _getFileViewType : function(type) {

public/editor/index.html

@@ -33,7 +33,12 @@
     </script>
 
     <script type="text/template" id="tab-template">
-      <li><a href="#{{id}}">{{ name }}</a></li>
+      <li>
+        <a href="#{{id}}">
+          {{ name }}
+          <i class="icon-remove tab-close"></i>
+        </a>
+      </li>
     </script>
 
     <script type="text/template" id="tab-pane-template">

public/editor/models/file.js

@@ -64,7 +64,7 @@ define(["models/base", "lib/path_util"], function(Base, PathUtil) {
       }
 
       if (this.ajaxOptions.ignoreCache) {
-        options["beforeSend"] =  function(xhr, settings) {
+        options["beforeSend"] = function(xhr, settings) {
           xhr.setRequestHeader("If-Modified-Since", null);
         }
       }
@@ -78,7 +78,10 @@ define(["models/base", "lib/path_util"], function(Base, PathUtil) {
       if (xhr.getResponseHeader("X-Revision-Id")) {
         attributes.currentRevisionId = xhr.getResponseHeader("X-Revision-Id");
         attributes.latestRevisionId  = xhr.getResponseHeader("X-Revision-Id");
-        attributes.icon              = xhr.getResponseHeader("X-Icon");
+      }
+
+      if (xhr.getResponseHeader("X-Icon")) {
+        attributes.icon = xhr.getResponseHeader("X-Icon");
       }
 
       if (resp) {