implement #46

nkappler · Sep 4, 2023 · 728a21e · 728a21e
1 parent f267398
commit 728a21e
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 4 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -14,7 +14,8 @@
             height: 100%;
             margin: 0;
         }
-        body{
+
+        body {
             font-family: "Ubuntu";
             font-size: 22px;
             padding-top: 65px;
@@ -130,6 +131,12 @@
                 padding-inline-start: 20px;
             }
         }
+
+        @keyframes blinker {
+            50% {
+                opacity: 0;
+            }
+        }
     </style>
     <link rel="shortcut icon" type="image/x-icon" href="favicon.png">
     <meta charset="utf8" />

diff --git a/src/elementFactory.ts b/src/elementFactory.ts
@@ -87,4 +87,8 @@ function generateBaseItemContent(item: CTXMHeading, li: HTMLLIElement) {
         li.classList.add("icon");
         li.innerHTML += `<img class="icon" src="${getProp(item.icon)}" />`;
     }
+    for (const [event, handler] of Object.entries(item.events || {})) {
+        const { listener, options } = typeof handler === "function" ? { listener: handler, options: {} as EventListenerOptions } : handler;
+        li.addEventListener<any>(event, listener, options);
+    }
 }
diff --git a/src/interfaces.ts b/src/interfaces.ts
@@ -6,6 +6,8 @@ export interface CTXMDivider {
     isDivider: true;
 }
 
+export type CTXMItemEventListener<K extends keyof HTMLElementEventMap> = (this: HTMLLIElement, ev: HTMLElementEventMap[K]) => any;
+
 /**
  * This is a heading item which displays a text and optionally shows a tooltip when hovering over it.
  *
@@ -24,6 +26,13 @@ export interface CTXMHeading {
     icon?: ValueOrFunction<string>;
     /** inline attribute appended to the `<li>` Element */
     style?: ValueOrFunction<string>;
+    /** A record of event listeners */
+    events?: {
+        [K in keyof HTMLElementEventMap]?: CTXMItemEventListener<K> | {
+            listener: CTXMItemEventListener<K>,
+            options?: AddEventListenerOptions
+        };
+    }
 }
 
 export interface CTXMInteractive extends CTXMHeading {

diff --git a/src/position.ts b/src/position.ts
@@ -19,7 +19,7 @@ export function resetDirections() {
 export function setPosition(container: HTMLUListElement, parentOrEvent: HTMLElement | MouseEvent): void {
     // restrict menu size to viewport size
     const scale = getScale();
-    const { width, height } = window.visualViewport;
+    const { width, height } = window.visualViewport!;
     Object.assign(container.style, {
         maxHeight: (height / scale.y) + "px",
         maxWidth: (width / scale.x) + "px",
@@ -74,7 +74,7 @@ export function setPosition(container: HTMLUListElement, parentOrEvent: HTMLElem
 
 /** returns a safe position inside the viewport, given the desired position */
 function getPosition(rect: Rect, pos: Point): Point {
-    const { width, height } = window.visualViewport;
+    const { width, height } = window.visualViewport!;
     const hasTransform = document.body.style.transform !== "";
     const { left, top } = hasTransform ? document.body.getBoundingClientRect() : { left: 0, top: 0 };
     const scale = getScale();

diff --git a/test/demo.ts b/test/demo.ts
@@ -131,7 +131,17 @@
                 ]
             },
             { isDivider: true },
-            { text: "Event specific stuff" }
+            { text: "Event specific stuff" },
+            {
+                text: "Hover me!",
+                action: () => {/** */ },
+                events: {
+                    mouseenter: (_e) => document.querySelector("h1")!.style.animation = "blinker 1s linear infinite",
+                    mouseleave: {
+                        listener: (_e) => document.querySelector("h1")!.style.animation = "",
+                    }
+                }
+            }
         ], function (m, e) {
             m.push({
                 text: "e.g. Cursor Position: X:" + e.clientX + " / Y:" + e.clientY,