@lemonadejs/contextmenu 1.1.3 → 1.4.0

package/dist/index.js

@@ -1,4 +1,4 @@
-if (!lemonade && typeof (require) === 'function') {
+if (! lemonade && typeof(require) === 'function') {
     var lemonade = require('lemonadejs');
 }
 
@@ -47,7 +47,7 @@ if (! Modal && typeof (require) === 'function') {
         } else if (self.type === 'inline') {
             return `<div></div>`;
         } else {
-            return `<div class="lm-menu-item" data-cursor="{{self.cursor}}" data-icon="{{self.icon}}" data-submenu="{{self.submenu?true:''}}" onmouseup="self.parent.parent.mouseUp(self, e)" onmouseenter="self.parent.parent.mouseEnter(self)" onmouseleave="self.parent.parent.mouseLeave(self)">
+            return `<div class="lm-menu-item" data-disabled="{{self.disabled}}" data-cursor="{{self.cursor}}" data-icon="{{self.icon}}" data-submenu="${!!self.submenu}" onmouseup="self.parent.mouseUp" onmouseenter="self.parent.mouseEnter" onmouseleave="self.parent.mouseLeave">
                 <a>{{self.title}}</a> <div>{{self.shortcut}}</div>
             </div>`;
         }
@@ -61,10 +61,13 @@ if (! Modal && typeof (require) === 'function') {
         // Save the position of this modal
         let index = self.parent.modals.length;
 
+        // Blank options
+        self.options = [];
+
         // Close handler
         self.onclose = function() {
             // Reset any cursor
-            resetCursor.call(self.modal);
+            resetCursor.call(self);
             // Parent
             if (typeof(self.parent.onclose) === 'function') {
                 self.parent.onclose(self.parent, self);
@@ -94,39 +97,37 @@ if (! Modal && typeof (require) === 'function') {
         self.open = function(s, cursor) {
             if (s.submenu) {
                 // Get the modal in the container of modals
-                let item = self.parent.modals[index+1];
-                if (! item) {
+                let current = self.parent.modals[index+1];
+                // Do not exist yet, create it.
+                if (! current) {
                     // Modal need to be created
-                    item = self.parent.create();
+                    current = self.parent.create();
                 }
                 // Get the parent from this one
-                let parent = self.parent.modals[index].modal;
-                // Get the self of the modal
-                let modal = item.modal;
+                let parent = self.parent.modals[index];
                 // Update modal content
-                if (modal.options !== s.submenu) {
+                if (current.options !== s.submenu) {
                     // Close modals with higher level
-                    modal.options = s.submenu;
+                    current.options = s.submenu;
                     // Close other modals
                     self.parent.close(index+1);
                 }
-                // Open modal
-                modal.closed = false;
                 // Update selected modal
                 self.parent.modalIndex = index+1;
-                // Define the position
-                modal.top = parent.top + s.el.offsetTop + 2;
-                modal.left = parent.left + 248;
+                // Update modal
+                current.modal.closed = false;
+                current.modal.top = parent.modal.top + s.el.offsetTop + 2;
+                current.modal.left = parent.modal.left + 248;
 
                 // Activate the cursor
                 if (cursor === true) {
                     // Place cursor in the first position
-                    modal.options[0].cursor = true;
+                    current.options[0].cursor = true;
                     // Position cursor
-                    modal.cursor = 0;
+                    current.cursor = 0;
                 }
 
-                onopen(modal, s.submenu)
+                onopen(current, s.submenu)
             } else {
                 // Close modals with higher level
                 self.parent.close(index+1);
@@ -134,7 +135,7 @@ if (! Modal && typeof (require) === 'function') {
         }
 
         // Mouse open
-        self.mouseUp = function(s, e) {
+        self.mouseUp = function(e, s) {
             if (typeof(s.onclick) === 'function') {
                 s.onclick.call(s, e, s.el);
             }
@@ -143,7 +144,7 @@ if (! Modal && typeof (require) === 'function') {
             }
         }
 
-        self.mouseEnter = function(s) {
+        self.mouseEnter = function(e, s) {
             if (delayTimer) {
                 clearTimeout(delayTimer);
             }
@@ -152,17 +153,17 @@ if (! Modal && typeof (require) === 'function') {
             }, 200);
         }
 
-        self.mouseLeave = function() {
+        self.mouseLeave = function(e, s) {
             if (delayTimer) {
                 clearTimeout(delayTimer);
             }
         }
 
-        let template = `<Modal position="absolute" :overflow="true" :closed="true" :ref="self.modal" :responsive="false" :auto-adjust="true" :focus="false" :layers="false" :onopen="self.onopen" :onclose="self.onclose">
+        let template = `<lm-modal position="absolute" :overflow="true" :closed="true" :ref="self.modal" :responsive="false" :auto-adjust="true" :focus="false" :layers="false" :onopen="self.onopen" :onclose="self.onclose">
             <div class="lm-menu-submenu">
                 <Item :loop="self.options" />
             </div>
-        </Modal>`;
+        </lm-modal>`;
 
         return lemonade.element(template, self, { Item: Item });
     }
@@ -196,6 +197,7 @@ if (! Modal && typeof (require) === 'function') {
         } else {
             this.options[this.cursor].cursor = false;
         }
+
         // Add the cursor
         this.options[cursor].cursor = true;
         // Cursor
@@ -223,40 +225,11 @@ if (! Modal && typeof (require) === 'function') {
         }
     }
 
-    const actionCursor = function(e) {
-        // Contextmenu modal
-        let item = this.options[this.cursor];
-        // Cursor is found so reset it
-        if (typeof(item) !== 'undefined') {
-            // Execute action
-            if (typeof(item.onclick) === 'function') {
-                item.onclick.call(item, e, item.el);
-            }
-            // Open sub menu in case exists
-            if (item.submenu) {
-                this.parent.open(item);
-                return true;
-            }
-        }
-    }
-
     /**
-     * Open a sub option of the contextmenu by a user action
-     * @returns {boolean}
+     * Go through all items of a menu
+     * @param s
+     * @param options
      */
-    const openSubmenu = function() {
-        // Get the selected cursor
-        let item = this.options[this.cursor];
-        // Open submenu
-        if (typeof(item) !== 'undefined') {
-            // Open submenu in case that exists
-            if (item.submenu) {
-                this.parent.open(item, true);
-                return true;
-            }
-        }
-    }
-
     const onopen = function(s, options) {
         // Onopen
         for (let i = 0; i < options.length; i++) {
@@ -280,7 +253,7 @@ if (! Modal && typeof (require) === 'function') {
             };
             // Render the modal inside the main container
             lemonade.render(Create, self.el, s);
-            // Add the reference of the modal in a container
+            // Add the reference of the modal in a container#
             self.modals.push(s);
             // Return self
             return s;
@@ -288,38 +261,41 @@ if (! Modal && typeof (require) === 'function') {
 
         self.open = function(options, x, y, e) {
             // Get the main modal
-            let modal = self.modals[0].modal;
+            let menu = self.modals[0];
             // Reset cursor
-            resetCursor.call(modal);
+            resetCursor.call(menu);
 
             // Current state
             if (! e || e.type === 'contextmenu') {
-                modal.closed = false;
+                menu.modal.closed = false;
             } else if (e.type === 'click') {
-                modal.closed = ! modal.closed;
+                menu.modal.closed = ! menu.modal.closed;
             }
             // If the modal is open and the content is different from what is shown
-            if (modal.closed === false) {
+            if (menu.modal.closed === false) {
                 // Close modals with higher level
                 self.close(1);
                 // Update the data
-                if (modal.options !== options) {
+                if (menu.options !== options) {
                     // Refresh content
-                    modal.options = options;
+                    menu.options = options;
                 }
                 // Define new position
-                modal.top = y;
-                modal.left = x;
+                menu.modal.top = y;
+                menu.modal.left = x;
+
                 onopen(self, options);
             }
         }
         
         self.close = function(level) {
             // Close all modals from the level specified
-            self.modals.forEach(function(value, k) {
+            self.modals.forEach(function(menu, k) {
                 if (k >= level) {
+                    // Reset cursor
+                    resetCursor.call(menu);
                     // Close the modal
-                    value.modal.closed = true;
+                    menu.modal.closed = true;
                 }
             });
             // Keep the index of the modal that is opened
@@ -331,34 +307,80 @@ if (! Modal && typeof (require) === 'function') {
                 self.root = self.el.parentNode;
             }
 
+            self.root.setAttribute('tabindex', -1);
+
+            // Create first menu
+            self.create();
+
+            // Normal click
+            self.root.addEventListener("click", function(e) {
+                if (e.target === self.root) {
+                    self.close(0);
+                }
+            });
+
             // Keyboard event
             self.root.addEventListener("keydown", function(e) {
-                // Modal object
-                let m = self.modals[self.modalIndex].modal;
-                // Something happens
-                let ret = false;
-                // Control
-                if (e.key === 'ArrowLeft') {
-                    if (self.modalIndex > 0) {
-                        // Close modal
-                        m.parent.close();
-                        // Action happened
-                        ret = true;
+                // Menu object
+                let menu = self.modals[self.modalIndex];
+                // Modal must be opened
+                if (! menu.modal.closed) {
+                    // Something happens
+                    let ret = false;
+                    // Control
+                    if (e.key === 'ArrowLeft') {
+                        if (self.modalIndex > 0) {
+                            // Close modal
+                            menu.close();
+                            // Action happened
+                            ret = true;
+                        }
+                    } else if (e.key === 'ArrowRight') {
+                        // Get the selected cursor
+                        let item = menu.options[menu.cursor];
+                        // Open submenu
+                        if (typeof (item) !== 'undefined') {
+                            // Open submenu in case that exists
+                            if (item.submenu && !item.disabled) {
+                                // Open modal
+                                menu.open(item, true);
+                                // Action happened
+                                ret = true;
+                            }
+                        }
+                    } else if (e.key === 'ArrowUp') {
+                        ret = setCursor.call(menu, 0);
+                    } else if (e.key === 'ArrowDown') {
+                        ret = setCursor.call(menu, 1);
+                    } else if (e.key === 'Enter') {
+                        // Contextmenu modal
+                        let item = menu.options[menu.cursor];
+                        // Cursor is found so reset it
+                        if (typeof (item) !== 'undefined') {
+                            // Execute action
+                            if (typeof (item.onclick) === 'function') {
+                                item.onclick.call(item, e, item.el);
+                            }
+                            // Open sub menu in case exists
+                            if (item.submenu) {
+                                // Open menu
+                                menu.open(item, true);
+                                // Action happened
+                                ret = true;
+                            } else {
+                                // Close all menu
+                                self.close(0);
+                                // Action happened
+                                ret = true;
+                            }
+                        }
                     }
-                } else if (e.key === 'ArrowRight') {
-                    ret = openSubmenu.call(m);
-                } else if (e.key === 'ArrowUp') {
-                    ret = setCursor.call(m, 0);
-                } else if (e.key === 'ArrowDown') {
-                    ret = setCursor.call(m, 1);
-                } else if (e.key === 'Enter') {
-                    ret = actionCursor.call(m, e);
-                }
 
-                // Something important happen so block any progression
-                if (ret === true) {
-                    e.preventDefault();
-                    e.stopImmediatePropagation();
+                    // Something important happen so block any progression
+                    if (ret === true) {
+                        e.preventDefault();
+                        e.stopImmediatePropagation();
+                    }
                 }
             });
 
@@ -378,11 +400,6 @@ if (! Modal && typeof (require) === 'function') {
                 e.preventDefault();
                 e.stopImmediatePropagation();
             });
-
-            self.root.setAttribute('tabindex', -1);
-
-            // Create first menu
-            self.create();
         }
 
         return `<div class="lm-menu"></div>`;
@@ -390,6 +407,8 @@ if (! Modal && typeof (require) === 'function') {
 
     lemonade.setComponents({ Contextmenu: Contextmenu });
 
+    lemonade.createWebComponent('contextmenu', Contextmenu);
+
     return function (root, options) {
         if (typeof (root) === 'object') {
             lemonade.render(Contextmenu, root, options)

package/dist/react.d.ts

@@ -6,10 +6,13 @@
 import Component from './index';
 
 interface Contextmenu {
+    ref?: MutableRefObject<undefined>;
     (): any
     [key: string]: any
 }
 
-declare function Contextmenu<Contextmenu>(props: Component.Options): any;
+type Props = IntrinsicAttributes & Component.Options & Contextmenu;
+
+declare function Contextmenu<Contextmenu>(props: Props): any;
 
 export default Contextmenu;

package/dist/style.css

@@ -11,6 +11,7 @@
     min-height: initial;
     padding-top: 4px;
     padding-bottom: 4px;
+    z-index: 16;
 }
 
 .lm-menu-submenu {
@@ -46,8 +47,9 @@
     content: '\25B6'
 }
 
-.lm-menu-submenu > div.lm-menu-item.disabled {
-    color: #ccc;
+.lm-menu-submenu > div.lm-menu-item[data-disabled="true"] {
+    opacity: 0.5;
+    pointer-events: none;
 }
 
 .lm-menu-submenu > div.lm-menu-item:hover,

package/package.json

@@ -14,10 +14,10 @@
         "build": "webpack --config webpack.config.js"
     },
     "dependencies": {
-        "@lemonadejs/modal": "^2.8.1",
-        "lemonadejs": "^4.2.2"
+        "lemonadejs": "^4.3.3",
+        "@lemonadejs/modal": "^3.3.0"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "1.1.3"
+    "version": "1.4.0"
 }