mockup/contextual-menu: Add contextual menu to theme files in the file tree

Repository: mockup
Branch: refs/heads/contextual-menu
Date: 2017-07-23T18:33:16Z
Author: Oshane Bailey (b4oshany) <[email protected]>
Commit: https://github.com/plone/mockup/commit/eb096c52616af9ad475ad5c9cda9273a4a0a6153

Add contextual menu to theme files in the file tree

Files changed:
M CHANGES.rst
M mockup/js/bundles/filemanager.js
M mockup/js/config.js
M mockup/patterns/filemanager/pattern.js
M mockup/patterns/filemanager/templates/app.xml

diff --git a/CHANGES.rst b/CHANGES.rst
index a5f16fbb..1f449af1 100644
--- a/CHANGES.rst
+++ b/CHANGES.rst
@@ -32,6 +32,21 @@ New features:
   - Add Anchor (a) tag to the UI views.
   - Upgrade JQTree to 1.4.1
   - Enable Drag and Drop inside of the theme editor file tree.
+ - Search for files and text within files and opening the file upon click.
+  [b4oshany]
+ - Add contextual menu to theme files in the file tree.
+  [b4oshany]
+ - Search for files and text within files and opening the file upon click.
+  [b4oshany]
+ - Added Bootstrap Dropdown menu to the UI views.
+  [b4oshany]
+ - Enable Drag and Drop inside of the theme editor file tree.
+  [b4oshany]
+ - Added Anchor (a) tag to the UI views.
+  [b4oshany]
+ - Upgrade JQTree to 1.4.1
+  [b4oshany]
+ - Enable Drag and Drop inside of the theme editor file tree.
   [b4oshany]
 
  - Make thumb scale in folder contents listing adjustable/supressable.
diff --git a/mockup/js/bundles/filemanager.js b/mockup/js/bundles/filemanager.js
index 84778497..39960793 100644
--- a/mockup/js/bundles/filemanager.js
+++ b/mockup/js/bundles/filemanager.js
@@ -1,6 +1,7 @@
 define([
   'pat-registry',
   'mockup-patterns-filemanager',
+  'jqtree-contextmenu'
 ], function(registry) {
   'use strict';
   // initialize only if we are in top frame
diff --git a/mockup/js/config.js b/mockup/js/config.js
index 5775747a..db006c03 100644
--- a/mockup/js/config.js
+++ b/mockup/js/config.js
@@ -35,6 +35,7 @@
       'dropzone': 'bower_components/dropzone/dist/dropzone-amd-module',
       'expect': 'bower_components/expect/index',
       'jqtree': 'bower_components/jqtree/tree.jquery',
+      'jqtree-contextmenu': 'bower_components/cs-jqtree-contextmenu/src/jqTreeContextMenu',
       'jquery': 'bower_components/jquery/dist/jquery',
       'jquery.browser': 'bower_components/jquery.browser/dist/jquery.browser',
       'jquery.cookie': 'bower_components/jquery.cookie/jquery.cookie',
@@ -138,6 +139,7 @@
       'bootstrap-transition': { exports: 'window.jQuery.support.transition', deps: ['jquery'] },
       'expect': { exports: 'window.expect' },
       'jqtree': { deps: ['jquery'] },
+      'jqtree-contextmenu': { deps: ['jqtree'] },
       'select2': { deps: ["jquery"] },
       'jquery.cookie': { deps: ['jquery'] },
       'jquery.event.drag': { deps: ['jquery'] },
diff --git a/mockup/patterns/filemanager/pattern.js b/mockup/patterns/filemanager/pattern.js
index d6a37f3c..8e613c7a 100644
--- a/mockup/patterns/filemanager/pattern.js
+++ b/mockup/patterns/filemanager/pattern.js
@@ -34,6 +34,7 @@ define([
   'jquery',
   'pat-base',
   'underscore',
+  'jqtree-contextmenu',
   'mockup-patterns-tree',
   'mockup-patterns-texteditor',
   'text!mockup-patterns-filemanager-url/templates/app.xml',
@@ -54,7 +55,7 @@ define([
   'mockup-utils',
   'text!mockup-ui-url/templates/popover.xml',
   'text!mockup-ui-url/templates/dropdown.xml'
-], function($, Base, _, Tree, TextEditor, AppTemplate, Toolbar,
+], function($, Base, _, ContextMenu, Tree, TextEditor, AppTemplate, Toolbar,
   ButtonView, ButtonGroup, AnchorView, DropdownView,
   AddNewView, NewFolderView, FindFileView, FindInFilesView, DeleteView,
   CustomizeView, RenameView, UploadView, _t, utils) {
@@ -346,6 +347,19 @@ define([
         }
       });
 
+      // bind 'tree.contextmenu' event
+      self.$tree.jqTreeContextMenu({
+          menu: '#contextual-menu',
+          onContextMenuItem: function(e, node, $el) {
+            var action = $el.data("item");
+            try {
+              self.btns[action].el.click();
+            } catch($err) {
+              console.log("Command does not exist: " + action);
+            }
+          }
+      });
+
       self.$tree.bind('tree.select', function(e) {
         if (e.node === null) {
           self.toggleButtons(false);
diff --git a/mockup/patterns/filemanager/templates/app.xml b/mockup/patterns/filemanager/templates/app.xml
index e5194500..6c335b68 100644
--- a/mockup/patterns/filemanager/templates/app.xml
+++ b/mockup/patterns/filemanager/templates/app.xml
@@ -17,3 +17,9 @@
             </div>
         </nav>
 </div>
+<div id="contextual-menu" class="dropdown-menu">
+    <li data-item="newfile"><a>New File</a></li>
+    <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>
+</div>



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