@lemonadejs/contextmenu 1.0.0

package/dist/index.js

@@ -0,0 +1,173 @@
+if (!lemonade && typeof (require) === 'function') {
+    var lemonade = require('lemonadejs');
+}
+
+if (!Modal && typeof (require) === 'function') {
+    var Modal = require('@lemonadejs/modal');
+}
+
+; (function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    global.Contextmenu = factory();
+}(this, (function () {
+
+    // Level
+    let index = 0;
+
+    // Get the coordinates of the action
+    const getCoords = function(e) {
+        let x;
+        let y;
+
+        if (e.changedTouches && e.changedTouches[0]) {
+            x = e.changedTouches[0].clientX;
+            y = e.changedTouches[0].clientY;
+        } else {
+            x = e.clientX;
+            y = e.clientY;
+        }
+
+        return [x,y];
+    }
+
+    const Item = function() {
+        if (this.type === 'line') {
+            return `<hr />`;
+        } else {
+            return `<div data-icon="{{self.icon}}" data-submenu="{{!!self.submenu}}" onmouseover="self.parent.parent.open(e, self)">
+                <a>{{self.title}}</a> <span>{{self.shortcut}}</span>
+            </div>`;
+        }
+    }
+
+    const Create = function() {
+        let self = this;
+
+        self.open = function(e, s) {
+            if (s.submenu) {
+                // Get the modal in the container of modals
+                let item = self.parent.modals[self.index+1];
+                if (! item) {
+                    // Modal need to be created
+                    item = self.parent.create();
+                }
+                // Get the parent from this one
+                let parent = self.parent.modals[self.index].modal;
+                // Get the self of the modal
+                let modal = item.modal;
+
+                if (modal.options !== s.submenu) {
+                    // Close modals with higher level
+                    modal.options = s.submenu;
+                    // Close other modals
+                    self.parent.close(self.index+1);
+                }
+
+                // Open modal
+                modal.closed = false;
+                // Define the position
+                modal.top = parent.top + e.target.offsetTop + 2;
+                modal.left = parent.left + 248;
+            } else {
+                // Close modals with higher level
+                self.parent.close(self.index+1);
+            }
+        }
+
+        let template = `<Modal :closed="true" :ref="self.modal">
+            <div class="lm-menu-submenu">
+                <Item :loop="self.options" />
+            </div>
+        </Modal>`;
+
+        return lemonade.element(template, self, { Item: Item });
+    }
+
+    const Contextmenu = function() {
+        let self = this;
+
+        // Container for all modals
+        self.modals = [];
+
+        self.create = function() {
+            // Create a new self for each modal
+            let s = {
+                index: index++,
+                parent: self,
+            };
+            // Render the modal inside the main container
+            lemonade.render(Create, self.el, s);
+            // Add the reference of the modal in a container
+            self.modals.push(s);
+            // Return self
+            return s;
+        }
+
+        self.open = function(e, options, x, y) {
+            // 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') {
+                modal.closed = false;
+            }
+
+            // If the modal is open and the content is different from what is shown
+            if (modal.closed === false) {
+                // Close modals with higher level
+                self.close(1);
+                // Define new position
+                modal.top = y;
+                modal.left = x;
+                if (modal.options !== options) {
+                    // Refresh content
+                    modal.options = options;
+                }
+            }
+        }
+
+        self.close = function(level) {
+            self.modals.forEach(function(value, k) {
+                if (k >= level) {
+                    value.modal.closed = true;
+                }
+            })
+        }
+
+        self.onload = function() {
+            if (! self.root) {
+                self.root = self.el.parentNode;
+            }
+            // Create event for focus out
+            self.root.addEventListener("focusout", (e) => {
+                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);
+                e.preventDefault();
+                e.stopImmediatePropagation();
+            });
+            self.root.setAttribute('tabindex', -1);
+            // Create first menu
+            self.create();
+        }
+
+        return `<div class="lm-menu"></div>`;
+    }
+
+    lemonade.setComponents({ Contextmenu: Contextmenu });
+
+    return function (root, options) {
+        if (typeof (root) === 'object') {
+            lemonade.render(Contextmenu, root, options)
+            return options;
+        } else {
+            return Contextmenu.call(this, root)
+        }
+    }
+})));

package/dist/style.css

@@ -0,0 +1,72 @@
+.lm-menu .lm-modal {
+    color: #555;
+    user-select: none;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    box-shadow: 0 2px 6px 2px rgba(60,64,67,.15);
+    max-height: calc(100vh - 94px);
+    overflow-y: auto;
+
+    width: initial;
+    height: initial;
+    min-height: initial;
+}
+
+.lm-menu-submenu {
+    padding-top: 1px;
+    padding-bottom: 1px;
+}
+
+.lm-menu-submenu > div {
+    box-sizing: border-box;
+    display: flex;
+    padding: 0 12px 0 32px;
+    width: 250px;
+    font-size: 11px;
+    font-family:sans-serif;
+    text-align: left;
+    align-items: center;
+}
+
+.lm-menu-submenu > div a {
+    text-decoration: none;
+    flex: 1;
+    cursor: pointer;
+    line-height: 28px;
+}
+
+.lm-menu-submenu > div span {
+    margin-right: 10px;
+}
+
+.lm-menu-submenu > div[data-submenu="true"]::after {
+    content: '\25B6'
+}
+
+.lm-menu-submenu > div.disabled {
+    color: #ccc;
+}
+
+.lm-menu-submenu > div:hover {
+    background: #ebebeb;
+}
+
+.lm-menu-submenu hr {
+    border: 1px solid #e9e9e9;
+    border-bottom: 0;
+    margin-top:5px;
+    margin-bottom:5px;
+}
+
+.lm-menu-submenu > div::before {
+    content: attr(data-icon);
+    font-family: 'Material Icons';
+    font-size: 15px;
+    position: absolute;
+    left: 9px;
+    line-height: 24px;
+}
+
+.lm-menu-submenu.symbols > div::before {
+    font-family: 'Material Symbols Outlined';
+}

package/package.json

@@ -0,0 +1,22 @@
+{
+    "name": "@lemonadejs/contextmenu",
+    "title": "LemonadeJS contextmenu",
+    "description": "LemonadeJS Contextmenu JavaScript Plugin",
+    "author": {
+        "name": "Contact <contact@lemonadejs.net>",
+        "url": "https://lemonadejs.net"
+    },
+    "keywords": [
+        "javascript contextmenu"
+    ],
+    "scripts": {
+        "start": "webpack serve --history-api-fallback",
+        "build": "webpack --config webpack.config.js"
+    },
+    "dependencies": {
+        "@lemonadejs/modal": "^2.0.4",
+        "lemonadejs": "^3.3.2"
+    },
+    "main": "dist/index.js",
+    "version": "1.0.0"
+}