From 6d85535abde9169c7b58ab32088fd1143385d4a6 Mon Sep 17 00:00:00 2001
From: SeinopSys <seinopsys@protonmail.com>
Date: Fri, 25 Mar 2022 23:36:23 +0100
Subject: [PATCH] convert event utils to typescript

---
 assets/js/utils/__tests__/events.spec.ts |  2 +-
 assets/js/utils/dom.ts                   |  4 +---
 assets/js/utils/events.js                | 24 -----------------------
 assets/js/utils/events.ts                | 25 ++++++++++++++++++++++++
 4 files changed, 27 insertions(+), 28 deletions(-)
 delete mode 100644 assets/js/utils/events.js
 create mode 100644 assets/js/utils/events.ts

diff --git a/assets/js/utils/__tests__/events.spec.ts b/assets/js/utils/__tests__/events.spec.ts
index 2f133d11..7f65c8c2 100644
--- a/assets/js/utils/__tests__/events.spec.ts
+++ b/assets/js/utils/__tests__/events.spec.ts
@@ -3,7 +3,7 @@ import { getRandomArrayItem } from '../../../test/randomness';
 import { fireEvent } from '@testing-library/dom';
 
 describe('Event utils', () => {
-  const mockEvent = getRandomArrayItem(['click', 'blur', 'mouseleave']);
+  const mockEvent = getRandomArrayItem(['click', 'blur', 'mouseleave'] as (keyof GlobalEventHandlersEventMap)[]);
 
   describe('fire', () => {
     it('should call the native dispatchEvent method on the element', () => {
diff --git a/assets/js/utils/dom.ts b/assets/js/utils/dom.ts
index a9f2e0d1..b115b74c 100644
--- a/assets/js/utils/dom.ts
+++ b/assets/js/utils/dom.ts
@@ -1,6 +1,4 @@
-/**
- * DOM Utils
- */
+// DOM Utils
 
 /**
  * Get the first matching element
diff --git a/assets/js/utils/events.js b/assets/js/utils/events.js
deleted file mode 100644
index 51c46a13..00000000
--- a/assets/js/utils/events.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * DOM events
- */
-
-export function fire(el, event, detail) {
-  el.dispatchEvent(new CustomEvent(event, { detail, bubbles: true, cancelable: true }));
-}
-
-export function on(node, event, selector, func) {
-  delegate(node, event, { [selector]: func });
-}
-
-export function leftClick(func) {
-  return (event, target) => { if (event.button === 0) return func(event, target); };
-}
-
-export function delegate(node, event, selectors) {
-  node.addEventListener(event, e => {
-    for (const selector in selectors) {
-      const target = e.target.closest(selector);
-      if (target && selectors[selector](e, target) === false) break;
-    }
-  });
-}
diff --git a/assets/js/utils/events.ts b/assets/js/utils/events.ts
new file mode 100644
index 00000000..9b6558ff
--- /dev/null
+++ b/assets/js/utils/events.ts
@@ -0,0 +1,25 @@
+// DOM events
+
+export function fire<El extends Element, D>(el: El, event: string, detail: D) {
+  el.dispatchEvent(new CustomEvent<D>(event, { detail, bubbles: true, cancelable: true }));
+}
+
+export function on<K extends keyof GlobalEventHandlersEventMap>(node: GlobalEventHandlers, event: K, selector: string, func: ((e: GlobalEventHandlersEventMap[K], target: Element) => boolean)) {
+  delegate(node, event, { [selector]: func });
+}
+
+export function leftClick<E extends MouseEvent, Target extends EventTarget>(func: (e: E, t: Target) => void) {
+  return (event: E, target: Target) => { if (event.button === 0) return func(event, target); };
+}
+
+export function delegate<K extends keyof GlobalEventHandlersEventMap>(node: GlobalEventHandlers, event: K, selectors: { [k: string]: ((e: GlobalEventHandlersEventMap[K], target: Element) => boolean) }) {
+  node.addEventListener(event, e => {
+    for (const selector in selectors) {
+      const evtTarget = e.target as EventTarget | Element | null;
+      if (evtTarget && 'closest' in evtTarget && typeof evtTarget.closest === 'function') {
+        const target = evtTarget.closest(selector);
+        if (target && selectors[selector](e, target) === false) break;
+      }
+    }
+  });
+}