[PORTAL-7] Rebase
[portal.git] / ecomp-portal-FE-os / client / src / views / functionalMenu / jqTreeContextMenu.js
diff --git a/ecomp-portal-FE-os/client/src/views/functionalMenu/jqTreeContextMenu.js b/ecomp-portal-FE-os/client/src/views/functionalMenu/jqTreeContextMenu.js
new file mode 100644 (file)
index 0000000..6e2be32
--- /dev/null
@@ -0,0 +1,214 @@
+/*-\r
+ * ================================================================================\r
+ * ECOMP Portal\r
+ * ================================================================================\r
+ * Copyright (C) 2017 AT&T Intellectual Property\r
+ * ================================================================================\r
+ * Licensed under the Apache License, Version 2.0 (the "License");\r
+ * you may not use this file except in compliance with the License.\r
+ * You may obtain a copy of the License at\r
+ * \r
+ *      http://www.apache.org/licenses/LICENSE-2.0\r
+ * \r
+ * Unless required by applicable law or agreed to in writing, software\r
+ * distributed under the License is distributed on an "AS IS" BASIS,\r
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+ * See the License for the specific language governing permissions and\r
+ * limitations under the License.\r
+ * ================================================================================\r
+ */\r
+(function ($) {\r
+       if (!$.fn.tree) {\r
+               throw "Error jqTree is not loaded.";\r
+       }\r
+\r
+       $.fn.jqTreeContextMenu = function (menuElement, callbacks) {\r
+               //\r
+               // TODO:\r
+               // * Make sure the useContextMenu option is set in jqTree, either complain or set it automatically\r
+               // * Make menu fade in/out\r
+               //\r
+               var self = this;\r
+               var $el = this;\r
+\r
+               // The jQuery object of the menu div.\r
+               var $menuEl = menuElement;\r
+               \r
+               // This hash holds all menu items that should be disabled for a specific node.\r
+               var nodeToDisabledMenuItems = {};\r
+               \r
+               // Hide the menu div.\r
+               $menuEl.hide();\r
+\r
+               // Disable system context menu from beeing displayed.\r
+               $el.bind("contextmenu", function (e) { \r
+                       e.preventDefault();\r
+                       return false; \r
+               });\r
+\r
+               // Handle the contextmenu event sent from jqTree when user clicks right mouse button.\r
+               $el.bind('tree.contextmenu', function (event) {\r
+                       var x = event.click_event.pageX;\r
+                       var y = event.click_event.pageY;\r
+                       var yPadding = 5;\r
+                       var xPadding = 5;\r
+                       var menuHeight = $menuEl.height();\r
+                       var menuWidth = $menuEl.width();\r
+                       var windowHeight = $(window).height();\r
+                       var windowWidth = $(window).width();\r
+                       \r
+                       if (menuHeight + y + yPadding > windowHeight) {\r
+                               // Make sure the whole menu is rendered within the viewport. \r
+                               y = y - menuHeight;\r
+                       }\r
+                       if (menuWidth + x + xPadding > windowWidth) {\r
+                               // Make sure the whole menu is rendered within the viewport. \r
+                               x = x - menuWidth;\r
+                       }\r
+\r
+                       // Handle disabling and enabling of menu items on specific nodes.\r
+                       if (Object.keys(nodeToDisabledMenuItems).length > 0) {\r
+                               if (event.node.name in nodeToDisabledMenuItems) {\r
+                                       var nodeName = event.node.name;\r
+                                       var items = nodeToDisabledMenuItems[nodeName];\r
+                                       if (items.length === 0) {\r
+                                               $menuEl.find('li').addClass('disabled');\r
+                                               $menuEl.find('li > a').unbind('click');\r
+                                       } else {\r
+                                               $menuEl.find('li > a').each(function () {\r
+                                                       $(this).closest('li').removeClass('disabled');\r
+                                                       var hrefValue = $(this).attr('href');\r
+                                                       var value = hrefValue.slice(hrefValue.indexOf("#") + 1, hrefValue.length)\r
+                                                       if ($.inArray(value, items) > -1) {\r
+                                                               $(this).closest('li').addClass('disabled');\r
+                                                               $(this).unbind('click');\r
+                                                       }\r
+                                               });     \r
+                                       }\r
+                               } else {\r
+                                       $menuEl.find('li.disabled').removeClass('disabled');\r
+                               }\r
+                       }\r
+\r
+                       // Must call show before we set the offset (offset can not be set on display: none elements).\r
+                       $menuEl.show();\r
+\r
+                       $menuEl.offset({ left: x, top: y });\r
+\r
+                       var dismissContextMenu = function () {\r
+                               $(document).unbind('click.jqtreecontextmenu');\r
+                               $el.unbind('tree.click.jqtreecontextmenu');\r
+                               $menuEl.hide();\r
+                       }\r
+                       // Make it possible to dismiss context menu by clicking somewhere in the document.\r
+                       $(document).bind('click.jqtreecontextmenu', function () {\r
+                               dismissContextMenu();\r
+                       });\r
+\r
+                       // Dismiss context menu if another node in the tree is clicked.\r
+                       $el.bind('tree.click.jqtreecontextmenu', function (e) {\r
+                               dismissContextMenu();\r
+                       });\r
+\r
+                       // Make selection follow the node that was right clicked on.\r
+                       var selectedNode = $el.tree('getSelectedNode');\r
+                       if (selectedNode !== event.node) {\r
+                               $el.tree('selectNode', event.node);\r
+                       }\r
+\r
+                       // Handle click on menu items, if it's not disabled.\r
+                       var menuItems = $menuEl.find('li:not(.disabled) a');\r
+                       if (menuItems.length !== 0) {\r
+                               menuItems.unbind('click');\r
+                               menuItems.click(function (e) {\r
+                                       e.stopImmediatePropagation();\r
+                                       dismissContextMenu();\r
+                                       var hrefAnchor = e.currentTarget.attributes.href.nodeValue;\r
+                                       var funcKey = hrefAnchor.slice(hrefAnchor.indexOf("#") + 1, hrefAnchor.length)\r
+                                       var callbackFn = callbacks[funcKey];\r
+                                       if (callbackFn) {\r
+                                               callbackFn(event.node);\r
+                                       }\r
+                                       return false;\r
+                               });\r
+                       }\r
+               });\r
+               \r
+               this.disable = function () {\r
+                       if (arguments.length === 0) {\r
+                               // Called as: api.disable()\r
+                               $menuEl.find('li:not(.disabled)').addClass('disabled');\r
+                               $menuEl.find('li a').unbind('click');\r
+                               nodeToDisabledMenuItems = {};\r
+                       } else if (arguments.length === 1) {\r
+                               // Called as: api.disable(['edit','remove'])\r
+                               var items = arguments[0];\r
+                               if (typeof items !== 'object') {\r
+                                       return;\r
+                               }\r
+                               $menuEl.find('li > a').each(function () {\r
+                                       var hrefValue = $(this).attr('href');\r
+                                       var value = hrefValue.slice(hrefValue.indexOf("#") + 1, hrefValue.length)\r
+                                       if ($.inArray(value, items) > -1) {\r
+                                               $(this).closest('li').addClass('disabled');\r
+                                               $(this).unbind('click');\r
+                                       }\r
+                               });\r
+                               nodeToDisabledMenuItems = {};\r
+                       } else if (arguments.length === 2) {\r
+                               // Called as: api.disable(nodeName, ['edit','remove'])\r
+                               var nodeName = arguments[0];\r
+                               var items = arguments[1];\r
+                               nodeToDisabledMenuItems[nodeName] = items;\r
+                       }\r
+               };\r
+\r
+               this.enable = function () {\r
+                       if (arguments.length === 0) {\r
+                               // Called as: api.enable()\r
+                               $menuEl.find('li.disabled').removeClass('disabled');\r
+                               nodeToDisabledMenuItems = {};\r
+                       } else if (arguments.length === 1) {\r
+                               // Called as: api.enable(['edit','remove'])\r
+                               var items = arguments[0];\r
+                               if (typeof items !== 'object') {\r
+                                       return;\r
+                               }\r
+                               \r
+                               $menuEl.find('li > a').each(function () {\r
+                                       var hrefValue = $(this).attr('href');\r
+                                       var value = hrefValue.slice(hrefValue.indexOf("#") + 1, hrefValue.length)\r
+                                       if ($.inArray(value, items) > -1) {\r
+                                               $(this).closest('li').removeClass('disabled');\r
+                                       }\r
+                               });\r
+\r
+                               nodeToDisabledMenuItems = {};\r
+                       } else if (arguments.length === 2) {\r
+                               // Called as: api.enable(nodeName, ['edit','remove'])\r
+                               var nodeName = arguments[0];\r
+                               var items = arguments[1];\r
+                               if (items.length === 0) {\r
+                                       delete nodeToDisabledMenuItems[nodeName];\r
+                               } else {\r
+                                       var disabledItems = nodeToDisabledMenuItems[nodeName];\r
+                                       for (var i = 0; i < items.length; i++) {\r
+                                               var idx = disabledItems.indexOf(items[i]);\r
+                                               if (idx > -1) {\r
+                                                       disabledItems.splice(idx, 1);\r
+                                               }\r
+                                       }\r
+                                       if (disabledItems.length === 0) {\r
+                                               delete nodeToDisabledMenuItems[nodeName];\r
+                                       } else {\r
+                                               nodeToDisabledMenuItems[nodeName] = disabledItems;      \r
+                                       }\r
+                               }\r
+                               if (Object.keys(nodeToDisabledMenuItems).length === 0) {\r
+                                       $menuEl.find('li.disabled').removeClass('disabled');\r
+                               }\r
+                       }\r
+               };\r
+               return this;\r
+       };\r
+} (jQuery));\r