@lemonadejs/contextmenu 5.2.1 → 5.2.4

package/dist/index.js

@@ -12,6 +12,36 @@ if (! Modal && typeof (require) === 'function') {
     global.Contextmenu = factory();
 }(this, (function () {
 
+    class CustomEvents extends Event {
+        constructor(type, props, options) {
+            super(type, {
+                bubbles: true,
+                composed: true,
+                ...options,
+            });
+
+            if (props) {
+                for (const key in props) {
+                    // Avoid assigning if property already exists anywhere on `this`
+                    if (! (key in this)) {
+                        this[key] = props[key];
+                    }
+                }
+            }
+        }
+    }
+
+    // Dispatcher
+    const Dispatch = function(method, type, options) {
+        // Try calling the method directly if provided
+        if (typeof method === 'function') {
+            let a = Object.values(options);
+            return method(...a);
+        } else if (this.tagName) {
+            this.dispatchEvent(new CustomEvents(type, options));
+        }
+    }
+
     // Get the coordinates of the action
     const getCoords = function(e) {
         let x;
@@ -25,11 +55,6 @@ if (! Modal && typeof (require) === 'function') {
             y = e.clientY;
         }
 
-        // Adjust for any scrollable parent element
-        let b = document.body;
-        x -= b.scrollLeft;
-        y -= b.scrollTop;
-
         return [x,y];
     }
 
@@ -42,12 +67,15 @@ if (! Modal && typeof (require) === 'function') {
             }
         }
 
+        // Initialize expanded state
+        self.expanded = false;
+
         if (self.type === 'line') {
-            return `<hr />`;
+            return `<hr role="separator" />`;
         } else if (self.type === 'inline') {
             return `<div></div>`;
         } else {
-            return `<div class="lm-menu-item" data-disabled="{{self.disabled}}" data-cursor="{{self.cursor}}" data-icon="{{self.icon}}" title="{{self.tooltip}}" data-submenu="${!!self.submenu}" onmouseup="self.parent.mouseUp" onmouseenter="self.parent.mouseEnter" onmouseleave="self.parent.mouseLeave">
+            return `<div class="lm-menu-item" role="menuitem" data-disabled="{{self.disabled}}" data-cursor="{{self.cursor}}" data-icon="{{self.icon}}" title="{{self.tooltip}}" data-submenu="${!!self.submenu}" aria-haspopup="${!!self.submenu}" aria-expanded="{{self.expanded}}" aria-label="{{self.title}}" tabindex="-1" onmouseup="self.parent.mouseUp" onmouseenter="self.parent.mouseEnter" onmouseleave="self.parent.mouseLeave">
                 <a>{{self.title}}</a> <div>{{self.shortcut}}</div>
             </div>`;
         }
@@ -100,7 +128,7 @@ if (! Modal && typeof (require) === 'function') {
                 let current = self.parent.modals[index+1];
                 // Do not exist yet, create it.
                 if (! current) {
-                    // Modal need to be created
+                    // Modal needs to be created
                     current = self.parent.create();
                 }
                 // Get the parent from this one
@@ -112,13 +140,17 @@ if (! Modal && typeof (require) === 'function') {
                     // Close other modals
                     self.parent.close(index+1);
                 }
-                // Update selected modal
+                // Update the selected modal
                 self.parent.modalIndex = index+1;
                 let rect = parent.modal.el.getBoundingClientRect();
                 // Update modal
-                current.modal.closed = false;
+                current.modal.open();
+                // Aria indication
                 current.modal.top = rect.y + s.el.offsetTop + 2;
                 current.modal.left = rect.x + 248;
+                // Keep current item for each modal
+                current.item = s;
+                s.expanded = true;
 
                 // Activate the cursor
                 if (cursor === true) {
@@ -161,7 +193,7 @@ if (! Modal && typeof (require) === 'function') {
         }
 
         let template = `<lm-modal :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">
+            <div class="lm-menu-submenu" role="menu" aria-orientation="vertical">
                 <Item :loop="self.options" />
             </div>
         </lm-modal>`;
@@ -169,46 +201,71 @@ if (! Modal && typeof (require) === 'function') {
         return lemonade.element(template, self, { Item: Item });
     }
 
+    const findNextEnabledCursor = function(startIndex, direction) {
+        if (!this.options || this.options.length === 0) {
+            return null;
+        }
+        
+        let cursor = startIndex;
+        let attempts = 0;
+        const maxAttempts = this.options.length;
+        
+        while (attempts < maxAttempts) {
+            if (direction) {
+                // Down
+                if (cursor >= this.options.length) {
+                    cursor = 0;
+                }
+            } else {
+                // Up
+                if (cursor < 0) {
+                    cursor = this.options.length - 1;
+                }
+            }
+            
+            let item = this.options[cursor];
+            if (item && !item.disabled && item.type !== 'line') {
+                return cursor;
+            }
+            
+            cursor = direction ? cursor + 1 : cursor - 1;
+            attempts++;
+        }
+        return null;
+    };
+
     const setCursor = function(direction) {
         let cursor = null;
 
         if (typeof(this.cursor) !== 'undefined') {
             if (! direction) {
                 // Up
-                cursor = this.cursor - 1;
-                if (cursor < 0) {
-                    cursor = this.options.length - 1;
-                }
+                cursor = findNextEnabledCursor.call(this, this.cursor - 1, false);
             } else {
                 // Down
-                cursor = this.cursor + 1;
-                if (cursor >= this.options.length) {
-                    cursor = 0;
-                }
+                cursor = findNextEnabledCursor.call(this, this.cursor + 1, true);
             }
         }
 
         // Remove the cursor
         if (cursor === null) {
             if (direction) {
-                cursor = 0;
+                cursor = findNextEnabledCursor.call(this, 0, true);
             } else {
-                cursor = this.options.length - 1;
+                cursor = findNextEnabledCursor.call(this, this.options.length - 1, false);
             }
-        } else {
+        } else if (typeof(this.cursor) !== 'undefined') {
             this.options[this.cursor].cursor = false;
         }
 
-        // Add the cursor
-        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);
+        // Add the cursor if found
+        if (cursor !== null) {
+            this.options[cursor].cursor = true;
+            this.cursor = cursor;
+            return true;
         }
 
-        return true;
+        return false;
     }
 
     /**
@@ -260,68 +317,73 @@ if (! Modal && typeof (require) === 'function') {
             return s;
         }
 
+        self.isClosed = function() {
+            return self.modals[0].modal.closed === true;
+        }
+
         self.open = function(options, x, y, e) {
             // Get the main modal
             let menu = self.modals[0];
             // Reset cursor
             resetCursor.call(menu);
-
-            // Current state
-            if (! e || e.type === 'contextmenu') {
-                menu.modal.closed = false;
-            } else if (e.type === 'click') {
-                menu.modal.closed = ! menu.modal.closed;
+            // Open
+            menu.modal.open();
+            // If the modal is open and the content is different from what is shown. Close modals with higher level
+            self.close(1);
+            // Update the data
+            if (options && menu.options !== options) {
+                // Refresh content
+                menu.options = options;
             }
-            // If the modal is open and the content is different from what is shown
-            if (menu.modal.closed === false) {
-                // Close modals with higher level
-                self.close(1);
-                // Update the data
-                if (menu.options !== options) {
-                    // Refresh content
-                    menu.options = options;
-                }
-                // Define new position
-                menu.modal.top = y;
-                menu.modal.left = x;
+            // Define new position
+            menu.modal.top = y;
+            menu.modal.left = x;
 
-                onopen(self, options);
-            }
+            onopen(self, options);
+
+            // Focus
+            self.el.classList.add('lm-menu-focus');
+            // Focus on the contextmenu
+            self.el.focus();
         }
 
         self.close = function(level) {
             // Close all modals from the level specified
             self.modals.forEach(function(menu, k) {
                 if (k >= level) {
-                    // Reset cursor
-                    resetCursor.call(menu);
-                    // Close the modal
-                    menu.modal.closed = true;
+                    if (menu.item) {
+                        menu.item.expanded = false;
+                        menu.item = null;
+                    }
+                    menu.modal.close();
                 }
             });
             // Keep the index of the modal that is opened
             self.modalIndex = level ? level - 1 : 0;
-        }
 
-        onload(() => {
-            if (! self.root) {
-                self.root = self.el.parentNode;
-            }
+            // Close event
+            if (level === 0) {
+                self.el.classList.remove('lm-menu-focus');
 
-            self.root.setAttribute('tabindex', 0);
+                Dispatch.call(self, self.onclose, 'close', {
+                    instance: self,
+                });
+            }
+        }
 
+        onload(() => {
             // Create first menu
             self.create();
 
-            // Normal click
-            self.root.addEventListener("click", function(e) {
-                if (e.target === self.root) {
+            // Create event for focus out
+            self.el.addEventListener("focusout", (e) => {
+                if (! (e.relatedTarget && (self.el.contains(e.relatedTarget) || self.root?.contains(e.relatedTarget)))) {
                     self.close(0);
                 }
             });
 
             // Keyboard event
-            self.root.addEventListener("keydown", function(e) {
+            self.el.addEventListener("keydown", function(e) {
                 // Menu object
                 let menu = self.modals[self.modalIndex];
                 // Modal must be opened
@@ -375,6 +437,8 @@ if (! Modal && typeof (require) === 'function') {
                                 ret = true;
                             }
                         }
+                    } else if (e.key === 'Escape') {
+                        self.close(0);
                     }
 
                     // Something important happen so block any progression
@@ -385,23 +449,22 @@ if (! Modal && typeof (require) === 'function') {
                 }
             });
 
-            // Create event for focus out
-            self.root.addEventListener("focusout", (e) => {
-                if (! self.root.contains(e.relatedTarget)) {
-                    self.close(0);
-                }
-            });
+            if (! self.root) {
+                self.root = self.el.parentNode;
+            }
 
             // Parent
             self.root.addEventListener("contextmenu", function(e) {
-                let [x, y] = getCoords(e);
-                self.open(self.options, x, y, e);
-                e.preventDefault();
-                e.stopImmediatePropagation();
+                if (Array.isArray(self.options) && self.options.length) {
+                    let [x, y] = getCoords(e);
+                    self.open(self.options, x, y, e);
+                    e.preventDefault();
+                    e.stopImmediatePropagation();
+                }
             });
         });
 
-        return `<div class="lm-menu"></div>`;
+        return `<div class="lm-menu" role="menu" aria-orientation="vertical" tabindex="0"></div>`;
     }
 
     lemonade.setComponents({ Contextmenu: Contextmenu });

package/dist/style.css

@@ -1,10 +1,18 @@
+.lm-menu {
+    display: none;
+}
+
+.lm-menu-focus {
+    display: unset;
+}
+
 .lm-menu .lm-modal {
     color: #555;
     user-select: none;
     border: 1px solid var(--lm-border-color-light, #e9e9e9);
     border-radius: 4px;
     box-shadow: 0 2px 4px 2px rgba(60,64,67,.2);
-    max-height: 350px;
+    max-height: 600px;
     width: initial;
     height: initial;
     min-width: 250px;
@@ -29,6 +37,7 @@
     font-family:sans-serif;
     text-align: left;
     align-items: center;
+    position: relative;
 }
 
 .lm-menu-submenu > div.lm-menu-item a {
@@ -76,6 +85,7 @@
     line-height: 24px;
     position: absolute;
     left: 11px;
+    transform: rotate(0.03deg);
 }
 
 .lm-dark-mode .lm-menu .lm-modal {

package/package.json

@@ -15,9 +15,9 @@
     },
     "dependencies": {
         "lemonadejs": "^5.2.0",
-        "@lemonadejs/modal": "^5.2.0"
+        "@lemonadejs/modal": "^5.2.1"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "5.2.1"
+    "version": "5.2.4"
 }