@lemonadejs/contextmenu 1.0.8 → 1.1.1

package/README.md

@@ -0,0 +1,98 @@
+# LemonadeJS Context Menu
+
+[Official website and documentation is here](https://lemonadejs.net/docs/plugins/context-menu)
+
+Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
+
+The LemonadeJS Context Menu is a versatile solution for interactive menu navigation, offering a customizable and intuitive experience. Designed for efficient decision-making, users can choose options that trigger specific actions or toggle the opening of another menu—configurable to your preferences.
+
+With a focus on flexibility, this component empowers you to tailor the menu's behavior according to your application's needs. Whether it's executing actions directly or revealing nested options for a more in-depth selection process, the Context Menu adapts seamlessly.
+
+Noteworthy features include a user-friendly interface, allowing for smooth interactions and a clear decision-making process. The configuration options provided by the Context Menu make it a valuable addition to various applications, ensuring a responsive and adaptable menu system.
+
+## Getting Started
+
+You can install using NPM or using directly from a CDN.
+
+### npm Installation
+
+To install it in your project using npm, run the following command:
+
+```bash
+$ npm install @lemonadejs/contextmenu
+```
+
+### CDN
+
+To use Context Menu via a CDN, include the following script tags in your HTML file:
+
+```html
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/contextmenu/dist/index.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/contextmenu/dist/style.min.css" />
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />
+```
+
+### Usage
+
+Quick example with Lemonade
+
+```javascript
+// Add the following link to your HTML file:
+// <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
+import Contextmenu from '@lemonadejs/contextmenu';
+import '@lemonadejs/contextmenu/dist/style.css';
+import '@lemonadejs/modal/dist/style.css';
+
+export default function App() {
+    const self = this;
+
+    self.options = [
+        {
+            title: 'Console.log',
+            onclick:function() {
+                console.log('Hello!')
+            },
+        },
+        {
+            title: 'Show Alert',
+            onclick:function() {
+                alert('Hello!')
+            },
+        },
+    ];
+
+    return `<div style="background-color: #2222AA; width: 100px; height: 100px;">
+        <Contextmenu :options="self.options" :ref="self.contextmenu" />
+    </div>`
+}
+```
+
+### Properties
+
+| Property  | Type | Description |
+|-----------|------|-------------|
+| options | option[] | An array of option objects describing the rendering options. Each item should follow the structure defined in the 'Option Details' section.  |
+
+### Option Details
+
+| Property  | Type | Description |
+|-----------|------|-------------|
+| submenu? | array of options | An optional array containing options displayed as a sub-menu. |
+| title? | string | The title text associated with the option. |
+| type? | string | The type of the current object, which can be utilized to display a line with 'line'. |
+| onclick? | function | The function executed upon selecting the option. |
+| icon? | string | The name of the Material Icon associated with the option. |
+| render? | function | The function executed when rendering the option. |
+| onopen? | function | The function executed when the submenu is opened. |
+| onclose? | function | The function executed when the submenu is closed. |
+
+## License
+
+The [LemonadeJS](https://lemonadejs.net) Context Menu is released under the MIT.
+
+## Other Tools
+
+-   [jSuites](https://jsuites.net/v4/)
+-   [Jspreadsheet Data Grid](https://jspreadsheet.com)

package/dist/index.d.ts

@@ -4,29 +4,32 @@
  * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
  */
 
-interface Contextmenu {
-    (): any
-    [key: string]: any
-}
+declare function Contextmenu(el: HTMLElement, options?: Contextmenu.Options): Contextmenu.Instance;
 
-interface Items {
-    type: 'line' | undefined;
-    title?: string;
-    icon?: string;
-    submenu?: Items[];
-    render?: (e: MouseEvent, element: HTMLElement) => void;
-    onclick?: (e: MouseEvent, element: HTMLElement) => void;
-}
+declare namespace Contextmenu {
+    interface Item {
+        submenu?: Item[];
+        title?: string;
+        type: 'line' | undefined;
+        onclick?: (e: MouseEvent, element: HTMLElement) => void;
+        icon?: string;
+        render?: (e: MouseEvent, element: HTMLElement) => void;
+        /** onopen event */
+        onopen?: (self: object) => void;
+        /** onclose event */
+        onclose?: (self: object) => void;
+    }
 
-interface Options {
-    /** Modal is closed */
-    options?: Items[];
-}
+    interface Options {
+        /** Modal is closed */
+        options?: Item[];
+    }
 
-interface instance {
-    options: boolean;
-    open: (options: Options, x: number, y: number, e: MouseEvent) => void;
-    close: () => void;
+    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;
+export default Contextmenu;

package/dist/index.js

@@ -25,6 +25,11 @@ 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];
     }
 
@@ -60,6 +65,17 @@ if (! Modal && typeof (require) === 'function') {
         self.onclose = function() {
             // Reset any cursor
             resetCursor.call(self.modal);
+            // Parent
+            if (typeof(self.parent.onclose) === 'function') {
+                self.parent.onclose(self.parent, self);
+            }
+        }
+
+        self.onopen = function() {
+            // Parent
+            if (typeof(self.parent.onopen) === 'function') {
+                self.parent.onopen(self.parent, self);
+            }
         }
 
         /**
@@ -109,6 +125,8 @@ if (! Modal && typeof (require) === 'function') {
                     // Position cursor
                     modal.cursor = 0;
                 }
+
+                onopen(modal, s.submenu)
             } else {
                 // Close modals with higher level
                 self.parent.close(index+1);
@@ -140,7 +158,7 @@ if (! Modal && typeof (require) === 'function') {
             }
         }
 
-        let template = `<Modal :overflow="true" :closed="true" :ref="self.modal" :responsive="false" :auto-adjust="true" :onclose="self.onclose" :focus="false" :layers="false">
+        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">
             <div class="lm-menu-submenu">
                 <Item :loop="self.options" />
             </div>
@@ -186,6 +204,8 @@ if (! Modal && typeof (require) === 'function') {
         if (this.options[cursor].type === 'line') {
             setCursor.call(this, direction);
         }
+
+        return true;
     }
 
     /**
@@ -237,6 +257,15 @@ if (! Modal && typeof (require) === 'function') {
         }
     }
 
+    const onopen = function(s, options) {
+        // Onopen
+        for (let i = 0; i < options.length; i++) {
+            if (typeof(options[i].onopen) === 'function') {
+                options[i].onopen(s);
+            }
+        }
+    }
+
     const Contextmenu = function() {
         let self = this;
 
@@ -269,7 +298,6 @@ if (! Modal && typeof (require) === 'function') {
             } 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
@@ -282,6 +310,7 @@ if (! Modal && typeof (require) === 'function') {
                     // Refresh content
                     modal.options = options;
                 }
+                onopen(self, options);
             }
         }
         
@@ -319,9 +348,9 @@ if (! Modal && typeof (require) === 'function') {
                 } else if (e.key === 'ArrowRight') {
                     ret = openSubmenu.call(m);
                 } else if (e.key === 'ArrowUp') {
-                    setCursor.call(m, 0);
+                    ret = setCursor.call(m, 0);
                 } else if (e.key === 'ArrowDown') {
-                    setCursor.call(m, 1);
+                    ret = setCursor.call(m, 1);
                 } else if (e.key === 'Enter') {
                     ret = actionCursor.call(m, e);
                 }
@@ -336,7 +365,7 @@ if (! Modal && typeof (require) === 'function') {
             // Create event for focus out
             self.root.addEventListener("focusout", (e) => {
                 if (! self.root.contains(e.relatedTarget)) {
-                    self.close(0);
+                    //self.close(0);
                 }
             });
 
@@ -344,7 +373,7 @@ if (! Modal && typeof (require) === 'function') {
             self.root.addEventListener("contextmenu", function(e) {
                 let [x,y] = getCoords(e);
                 // Open the context menu
-                var scrollPosition = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
+                let scrollPosition = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
                 self.open(self.options, x, y+scrollPosition, e);
                 e.preventDefault();
                 e.stopImmediatePropagation();

package/dist/react.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Official Type definitions for the LemonadeJS plugins
+ * https://lemonadejs.net
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ */
+import Component from './index';
+
+interface Contextmenu {
+    (): any
+    [key: string]: any
+}
+
+declare function Contextmenu<Contextmenu>(props: Component.Options): any;
+
+export default Contextmenu;

package/dist/style.css

@@ -19,7 +19,7 @@
 .lm-menu-submenu > div.lm-menu-item {
     box-sizing: border-box;
     display: flex;
-    padding: 0 8px 0 32px;
+    padding: 0 8px 0 8px;
     width: 250px;
     font-size: 11px;
     font-family:sans-serif;
@@ -64,7 +64,7 @@
     content: attr(data-icon);
     font-family: 'Material Icons';
     font-size: 16px;
-    position: absolute;
-    left: 9px;
     line-height: 24px;
+    margin-right: 10px;
+    width: 16px;
 }

package/dist/vue.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Official Type definitions for the LemonadeJS plugins
+ * https://lemonadejs.net
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ */
+import Component from './index';
+
+interface Contextmenu {
+    (): any
+    [key: string]: any
+}
+
+declare function Contextmenu<Contextmenu>(props: Component.Options): any;
+
+export default Contextmenu;

package/package.json

@@ -14,10 +14,10 @@
         "build": "webpack --config webpack.config.js"
     },
     "dependencies": {
-        "@lemonadejs/modal": "^2.4.4",
+        "@lemonadejs/modal": "^2.7.1",
         "lemonadejs": "^4.0.7"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "1.0.8"
+    "version": "1.1.1"
 }