filebrowser: added upload via drag and drop

vispa/extensions/file/static/css/base/base.css

@@ -67,4 +67,9 @@
     visibility: hidden;
     width: 300px;
     z-index: 99;
-}
\ No newline at end of file
+}
+
+.file-dragover {
+    background-color: #f5f5f5;
+    border: #000000 1px solid;
+}

vispa/extensions/file/static/js/base/actions.js

@@ -351,10 +351,12 @@ var FileBaseActions = Class.extend({
     });
   },
 
-  upload: function() {
+  upload: function(path) {
     // blueimp jquery file upload
     var self = this;
-    var path = this.FileBase.workflow.path;
+    if (path === undefined) {
+      var path = this.FileBase.workflow.path;
+    }
     $('<input />')
       .attr({
         type: 'file',

vispa/extensions/file/static/js/base/events.js

@@ -23,6 +23,7 @@ var FileBaseEvents = Class.extend({
     });
     this.nodeRightClickHold(node, data);
     this.nodeClickDblClick(node, data);
+    this.DragAndDrop(node, data);
     this.nodePropertiesClickTab(node, data);
     if (data.type == "f" && ~this.FileBase.helper.isBrowserFile(data.name)) {
       this.nodeSetPreview(data);
@@ -40,7 +41,7 @@ var FileBaseEvents = Class.extend({
       var inselection = self.FileBase.selections.entries[abspath];
       if (inselection === undefined) {
         if (self.FileBase.workflow.selectmode && Object.keys(self.FileBase
-        .selections.entries).length >= 1) {
+          .selections.entries).length >= 1) {
           self.FileBase.selections.changeSelection(node, true);
           self.FileBase.menuitems.showMenu(event, "s");
         } else {
@@ -171,5 +172,46 @@ var FileBaseEvents = Class.extend({
         "data-lightbox": lbId,
         id: boxId
       }).appendTo('body');
+  },
+
+  DragAndDrop: function(node, data) {
+    var self = this;
+
+    node.on('dragover', function(event) {
+      event.preventDefault();
+      event.stopPropagation;
+      if (data.type == "d") {
+        $(node).addClass("file-dragover");
+      }
+    });
+
+    node.on('dragenter', function(event) {
+      event.preventDefault();
+      event.stopPropagation;
+    });
+
+    node.on('dragleave', function(event) {
+      event.preventDefault();
+      event.stopPropagation;
+      $(node).removeClass("file-dragover");
+    });
+
+    node.on('drop', function(event) {
+      event.preventDefault();
+      event.stopPropagation;
+
+      $(node).removeClass("file-dragover");
+
+      if (data.type == "d") {
+        var path = self.FileBase.workflow.path + '/' + data.name;
+      } else {
+        var path = self.FileBase.workflow.path;
+      }
+
+      self.FileBase.actions.upload(path);
+    });
+
   }
+
+
 });
\ No newline at end of file

vispa/extensions/file/static/js/base/view.js

@@ -5,6 +5,7 @@ var FileBaseView = Class.extend({
     this.FileBase = FileBase;
     this.instance = FileBase.instance;
     this.fileContentContainer = null;
+    this.dropzone = null;
     this.filterField = null;
     this.masterNode = null;
     this.previewBoxID = null;
@@ -39,6 +40,16 @@ var FileBaseView = Class.extend({
         // set the events that can happen when a click on the node occurs
         "action": function(nodeObj) {
           self.FileBase.events.setupNodeEvents(nodeObj);
+        },
+        // add classes to folder for drag and drop
+        "class": function(nodeObj) {
+          var baseClass = " file-node row file-table-object file-table-content";
+          if (this.type == "d") {
+            return "dropzone-dir " + baseClass;
+          }
+          else {
+            return "dropzone-file" + baseClass;
+          }
         }
       },
       // convert timestamp to dd.mm.jjjj  hh:mm:ss
@@ -83,6 +94,16 @@ var FileBaseView = Class.extend({
         self.FileBase.menuitems.makeMenuClickable();
       });
 
+
+      // self.dropdings = $(".dropzone-dir", contentNode);
+      // console.log(self.dropdings);
+
+      // drag and drop
+      // self.dragAndDrop();
+
+
+
+
       // default view
       self.FileBase.changeView(self.FileBase.workflow.currentView);
 
@@ -95,6 +116,7 @@ var FileBaseView = Class.extend({
       self.filterField = $(filterField);
       // node.append(self.filterField);
     });
+
   },
 
   // Helper function for setting the symbol
@@ -158,4 +180,5 @@ var FileBaseView = Class.extend({
     }
   }
 
+
 });
\ No newline at end of file