1.6.0

nkappler · Sep 4, 2023 · ceacd84 · ceacd84
1 parent 2d5f69e
commit ceacd84
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 14 deletions.
diff --git a/docs/demo.js b/docs/demo.js
@@ -120,7 +120,17 @@
                 ]
             },
             { isDivider: true },
-            { text: "Event specific stuff" }
+            { text: "Event specific stuff" },
+            {
+                text: "Hover me!",
+                action: function () { },
+                events: {
+                    mouseenter: function (_e) { return document.querySelector("h1").style.animation = "blinker 1s linear infinite"; },
+                    mouseleave: {
+                        listener: function (_e) { return document.querySelector("h1").style.animation = ""; }
+                    }
+                }
+            }
         ], function (m, e) {
             m.push({
                 text: "e.g. Cursor Position: X:" + e.clientX + " / Y:" + e.clientY,

diff --git a/index.d.ts b/index.d.ts
@@ -3,6 +3,13 @@ type ValueOrFunction<T> = T | (() => T);
 interface CTXMDivider {
     isDivider: true;
 }
+type CTXMItemEventListener<K extends keyof HTMLElementEventMap> = (this: HTMLLIElement, ev: HTMLElementEventMap[K]) => any;
+type CTXMItemEventRegistry = {
+    [K in keyof HTMLElementEventMap]?: CTXMItemEventListener<K> | {
+        listener: CTXMItemEventListener<K>;
+        options?: AddEventListenerOptions;
+    };
+};
 /**
  * This is a heading item which displays a text and optionally shows a tooltip when hovering over it.
  *
@@ -21,6 +28,8 @@ interface CTXMHeading {
     icon?: ValueOrFunction<string>;
     /** inline attribute appended to the `<li>` Element */
     style?: ValueOrFunction<string>;
+    /** A record of event listeners */
+    events?: ValueOrFunction<CTXMItemEventRegistry>;
 }
 interface CTXMInteractive extends CTXMHeading {
     /** Whether the Context Menu Item is disabled or not. Defaults to `false` */
@@ -101,8 +110,8 @@ interface CTXMenuSingleton {
     hide(): void;
 }
 
-/*! ctxMenu v1.5.1 | (c) Nikolaj Kappler | https://github.com/nkappler/ctxmenu/blob/master/LICENSE !*/
+/*! ctxMenu v1.6.0 | (c) Nikolaj Kappler | https://github.com/nkappler/ctxmenu/blob/master/LICENSE !*/
 
 declare const ctxmenu: CTXMenuSingleton;
 
-export { BeforeRenderFN, CTXMAction, CTXMAnchor, CTXMDivider, CTXMHeading, CTXMInteractive, CTXMItem, CTXMSubMenu, CTXMenu, CTXMenuSingleton, ValueOrFunction, ctxmenu };
+export { BeforeRenderFN, CTXMAction, CTXMAnchor, CTXMDivider, CTXMHeading, CTXMInteractive, CTXMItem, CTXMItemEventListener, CTXMItemEventRegistry, CTXMSubMenu, CTXMenu, CTXMenuSingleton, ValueOrFunction, ctxmenu };
diff --git a/index.js b/index.js
@@ -106,6 +106,14 @@ function generateBaseItemContent(item, li) {
         li.classList.add("icon");
         li.innerHTML += '<img class="icon" src="'.concat(getProp(item.icon), '" />');
     }
+    for (var _i = 0, _a = Object.entries(getProp(item.events) || {}); _i < _a.length; _i++) {
+        var _b = _a[_i], event_1 = _b[0], handler = _b[1];
+        var _c = typeof handler === "function" ? {
+            listener: handler,
+            options: {}
+        } : handler, listener = _c.listener, options = _c.options;
+        li.addEventListener(event_1, listener, options);
+    }
 }
 
 var hdir = "r";
@@ -224,7 +232,7 @@ function getScale() {
 
 var styles = 'html{min-height:100%}.ctxmenu{position:fixed;border:1px solid #999;padding:2px 0;box-shadow:#aaa 3px 3px 3px;background:#fff;margin:0;z-index:9999;overflow-y:auto;font:15px Verdana, sans-serif;box-sizing:border-box}.ctxmenu li{margin:1px 0;display:block;position:relative;user-select:none}.ctxmenu li.heading{font-weight:bold;margin-left:-5px}.ctxmenu li span{display:block;padding:2px 20px;cursor:default}.ctxmenu li a{color:inherit;text-decoration:none}.ctxmenu li.icon{padding-left:15px}.ctxmenu img.icon{position:absolute;width:18px;left:10px;top:2px}.ctxmenu li.disabled{color:#ccc}.ctxmenu li.divider{border-bottom:1px solid #aaa;margin:5px 0}.ctxmenu li.interactive:hover{background:rgba(0, 0, 0, .1)}.ctxmenu li.submenu::after{content:"";position:absolute;display:block;top:0;bottom:0;right:.4em;margin:auto .1rem auto auto;border-right:1px solid #000;border-top:1px solid #000;transform:rotate(45deg);width:.3rem;height:.3rem}.ctxmenu li.submenu.disabled::after{border-color:#ccc}';
 
-/*! ctxMenu v1.5.1 | (c) Nikolaj Kappler | https://github.com/nkappler/ctxmenu/blob/master/LICENSE !*/ var ContextMenu = function() {
+/*! ctxMenu v1.6.0 | (c) Nikolaj Kappler | https://github.com/nkappler/ctxmenu/blob/master/LICENSE !*/ var ContextMenu = function() {
     function ContextMenu() {
         var _this = this;
         this.cache = {};

diff --git a/index.min.js b/index.min.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ctxmenu",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",

diff --git a/src/ctxmenu.ts b/src/ctxmenu.ts
@@ -1,4 +1,4 @@
-/*! ctxMenu v1.5.1 | (c) Nikolaj Kappler | https://github.com/nkappler/ctxmenu/blob/master/LICENSE !*/
+/*! ctxMenu v1.6.0 | (c) Nikolaj Kappler | https://github.com/nkappler/ctxmenu/blob/master/LICENSE !*/
 
 import { generateMenuItem, isDisabled, onHoverDebounced } from "./elementFactory";
 import type { BeforeRenderFN, CTXMenu, CTXMenuSingleton } from "./interfaces";

diff --git a/standalone/ctxmenu.d.ts b/standalone/ctxmenu.d.ts
@@ -3,6 +3,13 @@ type ValueOrFunction<T> = T | (() => T);
 interface CTXMDivider {
     isDivider: true;
 }
+type CTXMItemEventListener<K extends keyof HTMLElementEventMap> = (this: HTMLLIElement, ev: HTMLElementEventMap[K]) => any;
+type CTXMItemEventRegistry = {
+    [K in keyof HTMLElementEventMap]?: CTXMItemEventListener<K> | {
+        listener: CTXMItemEventListener<K>;
+        options?: AddEventListenerOptions;
+    };
+};
 /**
  * This is a heading item which displays a text and optionally shows a tooltip when hovering over it.
  *
@@ -21,6 +28,8 @@ interface CTXMHeading {
     icon?: ValueOrFunction<string>;
     /** inline attribute appended to the `<li>` Element */
     style?: ValueOrFunction<string>;
+    /** A record of event listeners */
+    events?: ValueOrFunction<CTXMItemEventRegistry>;
 }
 interface CTXMInteractive extends CTXMHeading {
     /** Whether the Context Menu Item is disabled or not. Defaults to `false` */
@@ -107,4 +116,4 @@ declare global {
     }
 }
 
-export { BeforeRenderFN, CTXMAction, CTXMAnchor, CTXMDivider, CTXMHeading, CTXMInteractive, CTXMItem, CTXMSubMenu, CTXMenu, CTXMenuSingleton, ValueOrFunction };
+export { BeforeRenderFN, CTXMAction, CTXMAnchor, CTXMDivider, CTXMHeading, CTXMInteractive, CTXMItem, CTXMItemEventListener, CTXMItemEventRegistry, CTXMSubMenu, CTXMenu, CTXMenuSingleton, ValueOrFunction };
diff --git a/standalone/ctxmenu.js b/standalone/ctxmenu.js
@@ -90,6 +90,14 @@
             li.classList.add("icon");
             li.innerHTML += '<img class="icon" src="'.concat(getProp(item.icon), '" />');
         }
+        for (var _i = 0, _a = Object.entries(getProp(item.events) || {}); _i < _a.length; _i++) {
+            var _b = _a[_i], event_1 = _b[0], handler = _b[1];
+            var _c = typeof handler === "function" ? {
+                listener: handler,
+                options: {}
+            } : handler, listener = _c.listener, options = _c.options;
+            li.addEventListener(event_1, listener, options);
+        }
     }
     var hdir = "r";
     var vdir = "d";
@@ -198,7 +206,7 @@
         };
     }
     var styles = 'html{min-height:100%}.ctxmenu{position:fixed;border:1px solid #999;padding:2px 0;box-shadow:#aaa 3px 3px 3px;background:#fff;margin:0;z-index:9999;overflow-y:auto;font:15px Verdana, sans-serif;box-sizing:border-box}.ctxmenu li{margin:1px 0;display:block;position:relative;user-select:none}.ctxmenu li.heading{font-weight:bold;margin-left:-5px}.ctxmenu li span{display:block;padding:2px 20px;cursor:default}.ctxmenu li a{color:inherit;text-decoration:none}.ctxmenu li.icon{padding-left:15px}.ctxmenu img.icon{position:absolute;width:18px;left:10px;top:2px}.ctxmenu li.disabled{color:#ccc}.ctxmenu li.divider{border-bottom:1px solid #aaa;margin:5px 0}.ctxmenu li.interactive:hover{background:rgba(0, 0, 0, .1)}.ctxmenu li.submenu::after{content:"";position:absolute;display:block;top:0;bottom:0;right:.4em;margin:auto .1rem auto auto;border-right:1px solid #000;border-top:1px solid #000;transform:rotate(45deg);width:.3rem;height:.3rem}.ctxmenu li.submenu.disabled::after{border-color:#ccc}';
-    /*! ctxMenu v1.5.1 | (c) Nikolaj Kappler | https://github.com/nkappler/ctxmenu/blob/master/LICENSE !*/    var ContextMenu = function() {
+    /*! ctxMenu v1.6.0 | (c) Nikolaj Kappler | https://github.com/nkappler/ctxmenu/blob/master/LICENSE !*/    var ContextMenu = function() {
         function ContextMenu() {
             var _this = this;
             this.cache = {};