Opening files now works, but is buggy (opens files twice)

_locales/en/messages.json

@@ -100,6 +100,7 @@
   "dialogUnsaved": { "message": "$1 has unsaved work." },
   
   "projectNoCurrentProject": { "message": "No project currently open." },
+  "projectRemoveDirectory": { "message": "Remove from project" },
   
   "paletteExecuting": { "message": "Executing $1..." },
   

js/project/file.js

@@ -38,7 +38,7 @@ define([
     return json;
   };
   
-  openProjectFile: function() {
+  var openProjectFile = function() {
     var file = new File();
     file.open(function() {
       file.read(function(err, data) {

js/project/node.js

@@ -1,21 +1,35 @@
-define(["util/manos", "util/elementData", "util/dom2"], function(M, elementData) {
+define([
+  "util/manos",
+  "util/elementData",
+  "sessions",
+  "storage/file",
+  "util/template!templates/projectDir.html,templates/projectFile.html",
+  "ui/contextMenus",
+  "util/dom2"
+], function(M, elementData, sessions, File, inflate, context) {
+  
+  //TODO: create a promise for when the directory is ready
+  //TODO: move rendering out into a separate NodeView
   
   var noop = function() {};
+  var guid = 0;
   
   var Node = function(entry) {
     this.entry = entry;
     this.name = entry.name
-    this.isOpen = false;
     this.isDirty = true;
     this.isDir = entry.isDirectory;
     this.children = [];
+    this.id = guid++;
   };
   
   Node.prototype = {
+    id: null,
     entry: null,
     isOpen: false,
     isDirty: false,
     isDir: false,
+    isRoot: false,
     path: null,
     name: null,
     parent: null,
@@ -33,23 +47,35 @@ define(["util/manos", "util/elementData", "util/dom2"], function(M, elementData)
       var self = this;
       done = done || noop;
       if (!this.element) return done();
+      //render the label
+      var template;
+      var menu;
+      if (this.isDir) {
+        template = "templates/projectDir.html";
+        menu = context.makeURL(this.isRoot ? "root/directory" : "directory", this.id);
+      } else {
+        template = "templates/projectFile.html";
+        menu = context.makeURL("file", this.entry.fullPath.replace(/[\/\\]/g, "@"));
+      }
       var a = this.element.find("a.label");
       if (!a) {
         a = document.createElement("a");
-        if (this.isDir) a.className = "directory";
-        a.addClass("label");
         this.element.append(a);
       }
-      a.innerHTML = this.name;
+      a.outerHTML = inflate.getHTML(template, {
+        label: this.name,
+        path: this.entry.fullPath,
+        contextMenu: menu
+      });
       if (!this.isOpen) {
         this.element.removeClass("expanded");
         return done();
       }
+      //only render children if open
       this.element.addClass("expanded");
       if (this.isDirty && this.isDir) {
         this.readdir(function() {
           self.renderChildren(function() {
-            self.isDirty = false;
             done();
           });
         });
@@ -74,6 +100,7 @@ define(["util/manos", "util/elementData", "util/dom2"], function(M, elementData)
       }, done)
     },
     readdir: function(done) {
+      //TODO: track entries, compare to existing, do not duplicate
       var self = this;
       var reader = this.entry.createReader();
       var entries = [];
@@ -83,13 +110,60 @@ define(["util/manos", "util/elementData", "util/dom2"], function(M, elementData)
         reader.readEntries(collect);
       };
       var complete = function() {
-        self.children = entries.map(function(entry) {
-          return new Node(entry);
+        M.map(entries, function(entry, i, c) {
+          var node = new Node(entry);
+          if (node.isDir) {
+            return node.readdir(function() {
+              c(node);
             });
+          }
+          return c(node);
+        }, function(children) {
+          self.children = children;
+          self.isDirty = false;
           done();
+        });
       };
       reader.readEntries(collect);
       
+    },
+    walk: function(f, done) {
+      M.map(this.children, function(node, i, c) {
+        f(node);
+        node.walk(f, c);
+      }, done);
+    },
+    openFile: function() {
+      var self = this;
+      var tabs = sessions.getAllTabs();
+      var found = false;
+      chrome.fileSystem.getDisplayPath(this.entry, function(path) {
+        //look through the tabs for matching display paths
+        M.map(
+          tabs,
+          function(tab, i, c) {
+            if (!tab.file || tab.file.virtual) {
+              return c(false);
+            }
+            tab.file.getPath(function(err, p) {
+              if (p == path) {
+                sessions.setCurrent(tab);
+                found = true;
+              }
+              //we don't actually use the result
+              c();
+            });
+          },
+          //if no match found, create a tab
+          function() {
+            if (found) return;
+            var file = new File(self.entry);
+            file.read(function(err, data) {
+              sessions.addFile(data, file);
+            });
+          }
+        );
+      });
     }
   };
   

js/project/tree.js

@@ -2,15 +2,26 @@ define([
   "project/node",
   "command",
   "util/elementData",
-  "util/dom2"],
-function(Node, command, elementData) {
+  "util/i18n",
+  "ui/contextMenus",
+  "util/dom2"
+], function(Node, command, elementData, i18n, context) {
   
   var directories = [];
+  var pathMap = {};
   var container = document.find(".project");
   container.addClass("show");
   var tree = container.find(".tree");
   
-  command.on("project:add-dir", function() {
+  var setVisible = function() {
+    if (this.directories.length) {
+      container.addClass("show");
+    } else {
+      container.removeClass("show");
+    }
+  };
+  
+  var addDirectory = function() {
     chrome.fileSystem.chooseEntry({ type: "openDirectory" }, function(entry) {
       var root = new Node(entry);
       directories.push(root);
@@ -20,16 +31,35 @@ function(Node, command, elementData) {
       element.append(rootElement);
       root.setElement(rootElement);
       root.isOpen = true;
-      root.render();
-      
-    })
+      root.isRoot = true;
+      root.render(function() {
+        root.walk(function(node) {
+          pathMap[node.entry.fullPath] = node;
         });
+      });
+      setVisible();
+    });
+  };
+  
+  var removeDirectory = function(id) {
+    directories = directories.filter(function(node) {
+      if (node.id == id) {
+        node.element.remove();
+        return false;
+      }
+      return true;
+    });
+    setVisible();
+  };
   
   tree.on("click", function(e) {
-    if (e.target.hasClass("directory")) {
     var li = e.target.findUp("li");
     var node = elementData.get(li);
+    if (!li || !node) return;
+    if (e.target.hasClass("directory")) {
       node.toggle();
+    } else {
+      node.openFile();
     }
   });
   
@@ -37,14 +67,34 @@ function(Node, command, elementData) {
   project:refresh-dir
   project:add-dir
   project:remove-all
-  project:open-file
+  project:open-file (for the palette)
   */
   
+  command.on("project:add-dir", addDirectory);
+  command.on("project:open-file", function(path) {
+    var node = pathMap[path];
+    if (node) node.openFile();
+  });
+  
+  context.register(
+    i18n.get("projectRemoveDirectory"),
+    "removeDirectory",
+    "root/directory/:id",
+    function(args) {
+      removeDirectory(args.id);
+    }
+  );
+  
   return {
-    getPaths: function() { return [] },
+    getPaths: function() { return Object.keys(pathMap) },
     getDirectories: function() { return directories },
-    insertDirectory: function() {},
-    clear: function() {}
+    insertDirectory: addDirectory,
+    clear: function() {
+      tree.innerHTML = "";
+      directories = [];
+      pathmap = {};
+      setVisible();
+    }
   }
   
 });

js/tab.js

@@ -3,8 +3,9 @@ define([
     "storage/file",
     "util/manos",
     "settings!ace,user",
-    "util/template!templates/tab.html"
-  ], function(command, File, M, Settings, inflate) {
+    "util/template!templates/tab.html",
+    "ui/dialog"
+  ], function(command, File, M, Settings, inflate, dialog) {
     
   /*
   

templates/projectDir.html

@@ -1,9 +1,9 @@
 <a
-  tabindex="-1"
-  class="directory"
-  href="{{contextMenu}}"
+  class="directory label"
   command="null"
   data-full-path="{{path}}"
+  href="{{contextMenu}}"
+  tabindex="-1"
 >
   {{label}}
 </a>

templates/projectFile.html

@@ -1,7 +1,8 @@
 <a 
-  href="{{contextMenu}}" 
-  command="project:open-file" 
   argument="{{path}}"
+  class="file label"
+  command="project:open-file" 
+  href="{{contextMenu}}"
   tabindex="-1"
 >
   {{label}}