Products.CMFPlone/master-jqtree-contextmenu: Add jqtree-contextual-menu and js-shortcuts to the registry.

Repository: Products.CMFPlone
Branch: refs/heads/master-jqtree-contextmenu
Date: 2017-07-25T10:42:11-05:00
Author: Oshane Bailey (b4oshany) <[email protected]>
Commit: https://github.com/plone/Products.CMFPlone/commit/c7c4916d30e3d8238c971641067da9e6c86abd05

Add jqtree-contextual-menu and js-shortcuts to the registry.

Files changed:
A Products/CMFPlone/static/components/cs-jqtree-contextmenu/src/jqTreeContextMenu.js
M CHANGES.rst
M Products/CMFPlone/profiles/dependencies/registry.xml
M Products/CMFPlone/static/bower.json

diff --git a/CHANGES.rst b/CHANGES.rst
index 6235df51a..3a10c53bd 100644
--- a/CHANGES.rst
+++ b/CHANGES.rst
@@ -10,7 +10,7 @@ Changelog
 
 Breaking changes:
 
-- Replaced cssmin with PyScss to ensure Python 3 compatibility and maintainability. 
+- Replaced cssmin with PyScss to ensure Python 3 compatibility and maintainability.
   Removed dependency to cssmin, so could break dependency for third party addons that depend on it.
   Introduced PyScss as a drop in replacement that could also do more things.
   Discussion on that at https://github.com/plone/Products.CMFPlone/issues/1800
@@ -21,6 +21,12 @@ New features:
 - Added ``Show Toolbar`` permission.
   [agitator]
 
+- Add jqtree contextual menu to the file tree.
+  [b4oshany]
+
+- Add js-shortcuts package for keyboard shortcuts
+  [b4oshany]
+
 Bug fixes:
 
 - add :focus class on toolbar for keyboard users  (https://github.com/plone/Products.CMFPlone/issues/1620)
@@ -29,6 +35,9 @@ Bug fixes:
 - Fix empty DX add_forms if formlib is also installed thru addon dependencies
   [MrTango]
 
+- Update jqtree to 1.4.1
+  [b4oshany]
+
 
 5.1b4 (2017-07-03)
 ------------------
diff --git a/Products/CMFPlone/profiles/dependencies/registry.xml b/Products/CMFPlone/profiles/dependencies/registry.xml
index 5b8e5a9dd..1d99424c2 100644
--- a/Products/CMFPlone/profiles/dependencies/registry.xml
+++ b/Products/CMFPlone/profiles/dependencies/registry.xml
@@ -310,6 +310,18 @@
       </value>
   </records>
 
+  <records prefix="plone.resources/jqtree-contextmenu"
+            interface='Products.CMFPlone.interfaces.IResourceRegistry'>
+      <value key="js">++plone++static/components/cs-jqtree-contextmenu/src/jqTreeContextMenu.js</value>
+      <value key="deps">jqtree</value>
+  </records>
+
+  <records prefix="plone.resources/js-shortcuts"
+            interface='Products.CMFPlone.interfaces.IResourceRegistry'>
+      <value key="js">++plone++static/components/js-shortcuts/js-shortcuts.js</value>
+      <value key="deps">jquery</value>
+  </records>
+
   <records prefix="plone.resources/jquery.form"
             interface='Products.CMFPlone.interfaces.IResourceRegistry'>
       <value key="js">++plone++static/components/jquery-form/jquery.form.js</value>
diff --git a/Products/CMFPlone/static/bower.json b/Products/CMFPlone/static/bower.json
index b392ee3c2..c4e5cd58e 100644
--- a/Products/CMFPlone/static/bower.json
+++ b/Products/CMFPlone/static/bower.json
@@ -27,7 +27,9 @@
     "tinymce-builded": "4.5.6",
     "requirejs": "",
     "less": "2.1.2",
-    "r.js": "2.1.15"
+    "r.js": "2.1.15",
+    "cs-jqtree-contextmenu": "^0.1.0",
+    "js-shortcuts": "^1.0.1"
   },
   "devDependencies": {
     "expect": "0.3.1",
diff --git a/Products/CMFPlone/static/components/cs-jqtree-contextmenu/src/jqTreeContextMenu.js b/Products/CMFPlone/static/components/cs-jqtree-contextmenu/src/jqTreeContextMenu.js
new file mode 100644
index 000000000..b21e02d97
--- /dev/null
+++ b/Products/CMFPlone/static/components/cs-jqtree-contextmenu/src/jqTreeContextMenu.js
@@ -0,0 +1,97 @@
+(function ($) {
+    if (!$.fn.tree) {
+        throw "Error jqTree is not loaded.";
+    }
+
+    $.fn.jqTreeContextMenu = function (options) {
+        var defaults = {
+            menuFadeDuration: 250,
+            selectClickedNode: true,
+            onContextMenuItem: null,
+            contextMenuDecider: null
+        };
+        var settings = $.extend({}, defaults, options);
+        var $el = this;
+        var $menuEl;
+
+        // Check if useContextMenu option is set
+        var jqTree = $el.data('simple_widget_tree');
+        if(!jqTree || !jqTree.options.useContextMenu){
+            throw 'Either jqTree was not found or useContextMenu in jqTree is set to false.';
+        }
+
+        // Check if the parameter is a jquery object
+        if(settings.menu instanceof jQuery) {
+            $menuEl = settings.menu;
+        } else if (typeof settings.menu == "string") {
+            $menuEl = $(settings.menu);
+        } else {
+            throw 'You must pass a menu selector string or jquery element to the jqTreeContextMenu.';
+        }
+        $menuEl.hide();
+        if (settings.onContextMenuItem) {
+            this.bind('cm-jqtree.item.click', settings.onContextMenuItem);
+        }
+
+        // Handle the contextmenu event sent from jqTree when user clicks right mouse button.
+        $el.bind('tree.contextmenu', function (event) {
+            var menu = $menuEl;
+            if (typeof(settings.contextMenuDecider) == "function") {
+                var menuChoice = settings.contextMenuDecider(event.node);
+                menu = (typeof menuChoice == "string") ? $(menuChoice) : $menuEl;
+            }
+            var x = event.click_event.pageX;
+            var y = event.click_event.pageY;
+            var yPadding = 5;
+            var xPadding = 5;
+
+            var menuHeight = menu.height();
+            var menuWidth = menu.width();
+            var windowHeight = $(window).height();
+            var windowWidth = $(window).width();
+
+            // Make sure the whole menu is rendered within the viewport.
+            if (menuHeight + y + yPadding > windowHeight) {
+                y = y - menuHeight;
+            }
+            if (menuWidth + x + xPadding > windowWidth) {
+                x = x - menuWidth;
+            }
+
+            // Must call show before we set the offset (offset can not be set on display: none elements).
+            menu.fadeIn(settings.menuFadeDuration);
+            menu.offset({ left: x, top: y });
+
+            var dismissContextMenu = function () {
+                $(document).unbind('click.jqtreecontextmenu');
+                $el.unbind('tree.click.jqtreecontextmenu');
+                menu.fadeOut(settings.menuFadeDuration);
+            };
+
+            // Make it possible to dismiss context menu by clicking somewhere in the document.
+            $(document).bind('click.jqtreecontextmenu', function (e) {
+                if (x != e.pageX || y != e.pageY) {
+                    dismissContextMenu();
+                }
+            });
+            // Dismiss context menu if another node in the tree is clicked.
+            $el.bind('tree.click.jqtreecontextmenu', function () {
+                dismissContextMenu();
+            });
+
+            // Make the selection follow the node that was right clicked on (if desired).
+            if (settings.selectClickedNode && $el.tree('getSelectedNode') !== event.node) {
+                $el.tree('selectNode', event.node);
+            }
+
+            // Handle click on menu items, if it's not disabled.
+            menu.find('li').off('click.contextmenu').on('click.contextmenu', function (e) {
+                e.stopImmediatePropagation();
+                dismissContextMenu();
+                $el.trigger('cm-jqtree.item.click', [event.node, $(this)]);
+            });
+        });
+
+        return this;
+    };
+} (jQuery));



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