mockup/contextual-menu: Improved the drag and drop feature.

Repository: mockup
Branch: refs/heads/contextual-menu
Date: 2017-07-10T22:03:06Z
Author: Oshane Bailey (b4oshany) <[email protected]>
Commit: https://github.com/plone/mockup/commit/f3bf1ac72086223632cd8f5efaa45caf226e9c84

Improved the drag and drop feature.

Files changed:
M mockup/patterns/filemanager/pattern.filemanager.less
M mockup/patterns/filemanager/pattern.js
M mockup/patterns/filemanager/templates/app.xml
M mockup/patterns/tree/pattern.js

diff --git a/mockup/patterns/filemanager/pattern.filemanager.less b/mockup/patterns/filemanager/pattern.filemanager.less
index 85d01cdc..f2049f80 100644
--- a/mockup/patterns/filemanager/pattern.filemanager.less
+++ b/mockup/patterns/filemanager/pattern.filemanager.less
@@ -46,6 +46,7 @@
     .btn-group-dropdown:extend(.btn-group all){
         display: inline-block;
         margin: 0 !important;
+        vertical-align: initial !important;
     }
     .input-group:extend(.input-group all){}
     .input-group-addon:extend(.input-group-addon all){}
diff --git a/mockup/patterns/filemanager/pattern.js b/mockup/patterns/filemanager/pattern.js
index 98a212d7..f4e194ad 100644
--- a/mockup/patterns/filemanager/pattern.js
+++ b/mockup/patterns/filemanager/pattern.js
@@ -98,6 +98,13 @@ define([
         dataUrl: self.options.actionUrl + '?action=dataTree',
         dragAndDrop: true,
         useContextMenu: true,
+        onCanMoveTo: function(moved, target, position) {
+          /* if not using folder option, just allow, otherwise, only allow if folder */
+          if (position === "inside") {
+            return target.folder === undefined || target.folder === true;
+          }
+          return true;
+        },
         onCreateLi: function(node, li) {
           var imageTypes = ['png', 'jpg', 'jpeg', 'gif', 'ico'];
           var themeTypes = ['css', 'html', 'htm', 'txt', 'xml', 'js', 'cfg', 'less'];
@@ -164,6 +171,13 @@ define([
           tooltip: _t('Delete currently selected resource'),
           icon: 'trash',
           context: 'danger'
+        }),
+        "upload": new ButtonView({
+            id: 'upload',
+            title: _t('Upload'),
+            tooltip: _t('Upload file to current directory'),
+            icon: 'upload',
+            context: 'default'
         })
       };
 
@@ -201,7 +215,7 @@ define([
         id: 'find',
         app: self,
         disable: function() {}
-      })
+      });
 
       self.views = [
         newFolderView,
@@ -222,13 +236,7 @@ define([
 
       if (self.options.uploadUrl && utils.featureSupport.dragAndDrop() && utils.featureSupport.fileApi()) {
         var uploadView = new UploadView({
-          triggerView: new ButtonView({
-            id: 'upload',
-            title: _t('Upload'),
-            tooltip: _t('Upload file to current directory'),
-            icon: 'upload',
-            context: 'default'
-          }),
+          triggerView: self.btns["upload"],
           app: self,
           callback: function(data) {
             var path = self.uploadFolder + '/' + data.name;
@@ -363,10 +371,17 @@ define([
       });
 
       self.$tree.bind('tree.move', function(event) {
+        
+        var srcpath = event.move_info.moved_node.path;
+        var newpath = event.move_info.target_node.path;
+        if (event.move_info.position !== "inside" ){
+          newpath = newpath.substring(newpath.indexOf('/'), newpath.lastIndexOf('/'));
+        }
+        
         self.doAction('move', {
           data: {
-            source: event.move_info.moved_node.path,
-            destination: event.move_info.target_node.path
+            source: srcpath,
+            destination: newpath
           },
           dataType: 'json',
           success: function(data) {
diff --git a/mockup/patterns/filemanager/templates/app.xml b/mockup/patterns/filemanager/templates/app.xml
index 280faaad..519d6dad 100644
--- a/mockup/patterns/filemanager/templates/app.xml
+++ b/mockup/patterns/filemanager/templates/app.xml
@@ -22,4 +22,5 @@
     <li data-item="newfolder"><a>New Folder</a></li>
     <li data-item="rename"><a>Rename</a></li>
     <li data-item="delete"><a>Delete</a></li>
+    <li data-item="upload"><a>Upload Here</a></li>
 </ul>
diff --git a/mockup/patterns/tree/pattern.js b/mockup/patterns/tree/pattern.js
index 2be19804..bf5ae48c 100644
--- a/mockup/patterns/tree/pattern.js
+++ b/mockup/patterns/tree/pattern.js
@@ -79,11 +79,13 @@ define([
         }
       }
 
-      if (self.options.dragAndDrop && self.options.onCanMoveTo === undefined) {
+      if (self.options.onCanMoveTo === undefined) {
         self.options.onCanMoveTo = function(moved, target, position) {
           /* if not using folder option, just allow, otherwise, only allow if folder */
-          return target.folder === undefined || target.folder === true;
-        };
+          if (position === "inside") {
+            return target.folder === undefined || target.folder === true;
+          }
+          return true;
       }
 
       if (self.options.data && typeof(self.options.data) === 'string') {



------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot