philomena/assets/js/utils/events.ts

// DOM events

import '../../types/ujs';

export interface PhilomenaAvailableEventsMap {
  dragstart: DragEvent,
  dragover: DragEvent,
  dragenter: DragEvent,
  dragleave: DragEvent,
  dragend: DragEvent,
  drop: DragEvent,
  click: MouseEvent,
  submit: Event,
  reset: Event,
  fetchcomplete: FetchcompleteEvent
}

export interface PhilomenaEventElement {
  addEventListener<K extends keyof PhilomenaAvailableEventsMap>(
    type: K,
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    listener: (this: Document | HTMLElement, ev: PhilomenaAvailableEventsMap[K]) => any,
    options?: boolean | AddEventListenerOptions | undefined
  ): void;
}

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 PhilomenaAvailableEventsMap>(
  node: PhilomenaEventElement,
  event: K, selector: string, func: ((e: PhilomenaAvailableEventsMap[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 PhilomenaAvailableEventsMap, Target extends Element>(
  node: PhilomenaEventElement,
  event: K,
  selectors: Record<string, ((e: PhilomenaAvailableEventsMap[K], target: Target) => void | boolean)>
) {
  node.addEventListener(event, e => {
    for (const selector in selectors) {
      const evtTarget = e.target as EventTarget | Target | null;
      if (evtTarget && 'closest' in evtTarget && typeof evtTarget.closest === 'function') {
        const target = evtTarget.closest(selector) as Target;
        if (target && selectors[selector](e, target) === false) break;
      }
    }
  });
}