@lemonadejs/contextmenu 1.0.4 → 1.0.7

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Official Type definitions for LemonadeJS plugins
+ * https://lemonadejs.net
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ */
+
+interface Contextmenu {
+    (): any
+    [key: string]: any
+}
+
+interface Items {
+    type: 'line' | undefined;
+    title?: string;
+    icon?: string;
+    submenu?: Items[];
+    render?: (e: MouseEvent, element: HTMLElement) => void;
+    onclick?: (e: MouseEvent, element: HTMLElement) => void;
+}
+
+interface Options {
+    /** Modal is closed */
+    options?: Items[];
+}
+
+interface instance {
+    options: boolean;
+    open: (options: Options, x: number, y: number, e: MouseEvent) => void;
+    close: () => void;
+}
+
+export declare function Modal(el: HTMLElement, options?: Options): instance;

package/dist/index.js

@@ -30,12 +30,19 @@ if (! Modal && typeof (require) === 'function') {
 
     const Item = function() {
         let self = this;
-        if (this.type === 'line') {
+
+        self.onload = function() {
+            if (typeof(self.render) === 'function') {
+                self.render.call(self, self.el);
+            }
+        }
+
+        if (self.type === 'line') {
             return `<hr />`;
-        } else if (this.type === 'inline') {
-            return '<div>' + this.component() + '</div>';
+        } 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}}" onmouseover="self.parent.parent.open(self)">
+            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)">
                 <a>{{self.title}}</a> <div>{{self.shortcut}}</div>
             </div>`;
         }
@@ -44,21 +51,31 @@ if (! Modal && typeof (require) === 'function') {
     const Create = function() {
         let self = this;
 
+        // Delay on open
+        let delayTimer;
         // Save the position of this modal
         let index = self.parent.modals.length;
 
         // Close handler
         self.onclose = function() {
-            // if (typeof(value.modal.cursor) !== 'undefined') {
-            //     value.modal.options[value.modal.cursor].cursor = false;
-            //     delete value.modal.cursor;
-            // }
+            // Reset any cursor
+            resetCursor.call(self.modal);
+        }
 
-            console.log(self.cursor,self.options);
+        /**
+         * Close the modal
+         */
+        self.close = function() {
+            // Close modals with higher level
+            self.parent.close(index);
         }
 
-        // Open handler
-        self.open = function(s) {
+        /**
+         * Open submenu handler
+         * @param {object} s
+         * @param {boolean} cursor - Activate the first item
+         */
+        self.open = function(s, cursor) {
             if (s.submenu) {
                 // Get the modal in the container of modals
                 let item = self.parent.modals[index+1];
@@ -70,18 +87,13 @@ if (! Modal && typeof (require) === 'function') {
                 let parent = self.parent.modals[index].modal;
                 // Get the self of the modal
                 let modal = item.modal;
-
+                // Update modal content
                 if (modal.options !== s.submenu) {
                     // Close modals with higher level
                     modal.options = s.submenu;
-                    // Remove cursor
-                    if (modal.cursor) {
-                        delete modal.cursor;
-                    }
                     // Close other modals
                     self.parent.close(index+1);
                 }
-
                 // Open modal
                 modal.closed = false;
                 // Update selected modal
@@ -89,13 +101,46 @@ if (! Modal && typeof (require) === 'function') {
                 // Define the position
                 modal.top = parent.top + s.el.offsetTop + 2;
                 modal.left = parent.left + 248;
+
+                // Activate the cursor
+                if (cursor === true) {
+                    // Place cursor in the first position
+                    modal.options[0].cursor = true;
+                    // Position cursor
+                    modal.cursor = 0;
+                }
             } else {
                 // Close modals with higher level
                 self.parent.close(index+1);
             }
         }
 
-        let template = `<Modal :closed="true" :ref="self.modal" :responsive="false" :autoadjust="true" :onclose="self.onclose">
+        // Mouse open
+        self.mouseUp = function(s, e) {
+            if (typeof(s.onclick) === 'function') {
+                s.onclick.call(s, e, s.el);
+            }
+            if (! s.submenu) {
+                self.close();
+            }
+        }
+
+        self.mouseEnter = function(s) {
+            if (delayTimer) {
+                clearTimeout(delayTimer);
+            }
+            delayTimer = setTimeout(function() {
+                self.open(s);
+            }, 200);
+        }
+
+        self.mouseLeave = function() {
+            if (delayTimer) {
+                clearTimeout(delayTimer);
+            }
+        }
+
+        let template = `<Modal :closed="true" :ref="self.modal" :responsive="false" :auto-adjust="true" :onclose="self.onclose" :focus="false" :layers="false">
             <div class="lm-menu-submenu">
                 <Item :loop="self.options" />
             </div>
@@ -137,21 +182,59 @@ if (! Modal && typeof (require) === 'function') {
         this.options[cursor].cursor = true;
         // Cursor
         this.cursor = cursor;
+        // If is line move to the next one
+        if (this.options[cursor].type === 'line') {
+            setCursor.call(this, direction);
+        }
     }
 
-    const openSubmenu = function() {
-        if (typeof(this.options[this.cursor]) !== 'undefined') {
-            // Get the selected cursor
-            let item = this.options[this.cursor];
-            // Open submenu in case that exists
+    /**
+     * Reset the cursor for a contextmenu
+     */
+    const resetCursor = function() {
+        // Contextmenu modal
+        let item = this.options[this.cursor];
+        // Cursor is found so reset it
+        if (typeof(item) !== 'undefined') {
+            // Remove the cursor style
+            item.cursor = false;
+            // Delete reference index
+            delete this.cursor;
+        }
+    }
+
+    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;
             }
         }
     }
 
-    const closeSubmenu = function() {
-        this.parent.parent.close(this.parent.parent.modalIndex);
+    /**
+     * Open a sub option of the contextmenu by a user action
+     * @returns {boolean}
+     */
+    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 Contextmenu = function() {
@@ -174,16 +257,19 @@ if (! Modal && typeof (require) === 'function') {
             return s;
         }
 
-        self.open = function(e, options, x, y) {
+        self.open = function(options, x, y, e) {
             // Get the main modal
             let modal = self.modals[0].modal;
-            // Click on the top level menu toggle the state of the menu
-            if (e.type === 'click') {
-                modal.closed = ! modal.closed;
-            } else if (e.type === 'contextmenu') {
+            // Reset cursor
+            resetCursor.call(modal);
+
+            // Current state
+            if (! e || e.type === 'contextmenu') {
                 modal.closed = false;
+            } else if (e.type === 'click') {
+                modal.closed = ! modal.closed;
             }
-            
+
             // If the modal is open and the content is different from what is shown
             if (modal.closed === false) {
                 // Close modals with higher level
@@ -191,6 +277,7 @@ if (! Modal && typeof (require) === 'function') {
                 // Define new position
                 modal.top = y;
                 modal.left = x;
+                // Update the data
                 if (modal.options !== options) {
                     // Refresh content
                     modal.options = options;
@@ -199,50 +286,71 @@ if (! Modal && typeof (require) === 'function') {
         }
         
         self.close = function(level) {
+            // Close all modals from the level specified
             self.modals.forEach(function(value, k) {
                 if (k >= level) {
                     // Close the modal
                     value.modal.closed = true;
                 }
             });
-
-            self.modalIndex = level ? level-1 : 0;
+            // Keep the index of the modal that is opened
+            self.modalIndex = level ? level - 1 : 0;
         }
 
         self.onload = function() {
             if (! self.root) {
                 self.root = self.el.parentNode;
             }
+
             // 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') {
-                    closeSubmenu.call(m);
+                    if (self.modalIndex > 0) {
+                        // Close modal
+                        m.parent.close();
+                        // Action happened
+                        ret = true;
+                    }
                 } else if (e.key === 'ArrowRight') {
-                    openSubmenu.call(m);
+                    ret = openSubmenu.call(m);
                 } else if (e.key === 'ArrowUp') {
                     setCursor.call(m, 0);
                 } else if (e.key === 'ArrowDown') {
                     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();
                 }
             });
 
             // Create event for focus out
             self.root.addEventListener("focusout", (e) => {
-                if (! self.el.contains(e.relatedTarget)) {
+                if (! self.root.contains(e.relatedTarget)) {
                     self.close(0);
                 }
             });
+
             // Parent
             self.root.addEventListener("contextmenu", function(e) {
                 let [x,y] = getCoords(e);
                 // Open the context menu
-                self.open(e, self.options, x, y);
+                self.open(self.options, x, y, e);
                 e.preventDefault();
                 e.stopImmediatePropagation();
             });
+
             self.root.setAttribute('tabindex', -1);
+
             // Create first menu
             self.create();
         }

package/dist/style.css

@@ -3,7 +3,7 @@
     user-select: none;
     border: 1px solid transparent;
     border-radius: 4px;
-    box-shadow: 0 2px 6px 2px rgba(60,64,67,.15);
+    box-shadow: 0 2px 6px 2px rgba(60,64,67,.2);
     max-height: 300px;
     overflow-y: auto;
 
@@ -11,7 +11,6 @@
     height: initial;
     min-width: 250px;
     min-height: initial;
-    padding-bottom: 6px;
 }
 
 .lm-menu .lm-modal::-webkit-scrollbar {
@@ -54,6 +53,8 @@
 
 .lm-menu-submenu > div.lm-menu-item div {
     margin-right: 5px;
+    font-size: 0.9em;
+    color: #888;
 }
 
 .lm-menu-submenu > div.lm-menu-item[data-submenu="true"]::after {
@@ -83,5 +84,4 @@
     position: absolute;
     left: 9px;
     line-height: 24px;
-    transform: rotate(0.03deg);
 }

package/package.json

@@ -14,9 +14,10 @@
         "build": "webpack --config webpack.config.js"
     },
     "dependencies": {
-        "@lemonadejs/modal": "^2.3.1",
+        "@lemonadejs/modal": "^2.3.3",
         "lemonadejs": "^3.4.0"
     },
     "main": "dist/index.js",
-    "version": "1.0.4"
+    "types": "dist/index.d.ts",
+    "version": "1.0.7"
 }