allow drag-drop opening of files and directories

css/tabs.less

@@ -11,7 +11,7 @@
     cursor: default;
     justify-content: space-between;
     align-items: center;
-    max-width: 300px;
+    max-width: 200px;
     padding: 0px 0px 0px 4px;
     margin-right: 3px;
     opacity: .8;
@@ -19,7 +19,7 @@
     border-radius: 2px 2px 0 0;
     color: @foreground;
     padding-bottom: 4px;
-    flex: 0 1 auto;
+    flex: 1 1 auto;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;

js/command.js

@@ -54,7 +54,7 @@ define([
       sync: sync
     });
   }
-  
+
   //delegate for all elements that have a command attribute
   document.body.on("click", function(e) {
     //cancel on inputs, selectboxes
@@ -76,7 +76,17 @@ define([
       fire(command, arg);
     }
   });
-  
+
+  document.body.on("dragover", function(e) {
+    e.preventDefault();
+  });
+
+  document.body.on("drop", function(e) {
+    e.preventDefault();
+    if (e.dataTransfer.types.indexOf("Files") === -1) return;
+    fire("session:open-dragdrop", e.dataTransfer.items);
+  });
+
   //register for startup and fire any commands that are pending
   register("init:startup", function() {
     if (window.launchCommands) {

js/fileManager.js

@@ -4,8 +4,9 @@ define([
     "ui/dialog",
     "command",
     "settings!", //not excited, it just runs as a RequireJS plugin,
-    "util/manos"
-  ], function(sessions, File, dialog, command, Settings, M) {
+    "util/manos",
+    "ui/projectManager"
+  ], function(sessions, File, dialog, command, Settings, M, projectManager) {
 
   var openFile = function(c) {
     //have to call chooseEntry manually to support multiple files
@@ -40,7 +41,27 @@ define([
       });
     }
   };
+
+  var openFromDropEvent = function(items) {
+    [].forEach.call(items, function(entry){
+      //only process files
+      if (entry.kind !== "file") return;
+      entry = entry.webkitGetAsEntry();
+
+      //files get opened in a tab
+      if (entry.isFile) {
+        var f = new File(entry);
+        return f.read().then(function(data) {
+          sessions.addFile(data, f);
+        }, dialog);
+      //directories get added to project
+      } else if (entry.isDirectory) {
+        projectManager.insertDirectory(entry);
+      }
+    });
+  };
   
+  command.on("session:open-dragdrop", openFromDropEvent);
   command.on("session:new-file", function(content) { return sessions.addFile(content) });
   command.on("session:open-file", openFile);
   command.on("session:save-file", function(c) { sessions.getCurrent().save(c) });

js/sessions.js

@@ -271,11 +271,13 @@ define([
     });
     tabContainer.on("dragover", function(e) {
       e.preventDefault();
+      e.stopPropagation();
       e.dropEffect = "move";
     });
     tabContainer.on("dragenter", function(e) {
       if (!e.target.matches(".tab")) return;
       e.target.addClass("hovering");
+      e.stopPropagation();
     });
     tabContainer.on("dragleave", function(e) {
       if (!e.target.matches(".tab")) return;
@@ -283,6 +285,7 @@ define([
     });
     tabContainer.on("drop", function(e) {
       if (!draggedTab) return;
+      e.stopPropagation();
       var target = e.target;
       var location = "before";
       var x = e.offsetX;

js/ui/projectManager.js

@@ -109,11 +109,27 @@ define([
       var self = this;
       chrome.fileSystem.chooseEntry({ type: "openDirectory" }, function(d) {
         if (!d) return;
-        var root = new FSNode(d);
-        self.directories.push(root);
-        root.walk(self.render.bind(self));
+        self.insertDirectory(d);
       });
     },
+    insertDirectory: function(entry) {
+      var root;
+      //ensure we aren't duplicating
+      this.directories.forEach(function(directoryNode){
+        if (directoryNode.entry.fullPath === entry.fullPath) {
+          root = directoryNode;
+        }
+      });
+      if (!root) {
+        root = new FSNode(entry);
+        this.directories.push(root);
+      }
+
+      //if the directory was there, we still want
+      //to refresh it, in response to the users
+      //interaction
+      root.walk(this.render.bind(this));
+    },
     removeDirectory: function(args) {
       this.directories = this.directories.filter(function(node) {
         return node.id != args.id;