demarches-normaliennes/app/javascript/controllers/application_controller.ts
2023-01-30 11:34:24 +01:00

100 lines
2.9 KiB
TypeScript

import { Controller } from '@hotwired/stimulus';
import debounce from 'debounce';
import invariant from 'tiny-invariant';
export type Detail = Record<string, unknown>;
// see: https://www.quirksmode.org/blog/archives/2008/04/delegating_the.html
const FOCUS_EVENTS = ['focus', 'blur'];
export class ApplicationController extends Controller {
#debounced = new Map<() => void, ReturnType<typeof debounce>>();
protected debounce(fn: () => void, interval: number): void {
this.globalDispatch('debounced:added');
let debounced = this.#debounced.get(fn);
if (!debounced) {
const wrapper = () => {
fn.bind(this)();
this.#debounced.delete(fn);
if (this.#debounced.size == 0) {
this.globalDispatch('debounced:empty');
}
};
debounced = debounce(wrapper.bind(this), interval);
this.#debounced.set(fn, debounced);
}
debounced();
}
protected cancelDebounce(fn: () => void) {
this.#debounced.get(fn)?.clear();
}
protected globalDispatch<T = Detail>(type: string, detail?: T): void {
this.dispatch(type, {
detail: detail as object,
prefix: '',
target: document.documentElement
});
}
protected on<HandlerEvent extends Event = Event>(
target: EventTarget,
eventName: string,
handler: (event: HandlerEvent) => void
): void;
protected on<HandlerEvent extends Event = Event>(
eventName: string,
handler: (event: HandlerEvent) => void
): void;
protected on<HandlerEvent extends Event = Event>(
targetOrEventName: EventTarget | string,
eventNameOrHandler: string | ((event: HandlerEvent) => void),
handler?: (event: HandlerEvent) => void
): void {
if (typeof targetOrEventName == 'string') {
invariant(typeof eventNameOrHandler != 'string', 'handler is required');
this.onTarget(
this.element,
targetOrEventName,
eventNameOrHandler,
FOCUS_EVENTS.includes(targetOrEventName)
);
} else {
invariant(
typeof eventNameOrHandler == 'string',
'event name is required'
);
invariant(handler, 'handler is required');
this.onTarget(targetOrEventName, eventNameOrHandler, handler);
}
}
protected onGlobal<HandlerEvent extends Event = Event>(
eventName: string,
handler: (event: HandlerEvent) => void
): void {
this.onTarget(document.documentElement, eventName, handler);
}
private onTarget<HandlerEvent extends Event = Event>(
target: EventTarget,
eventName: string,
handler: (event: HandlerEvent) => void,
capture?: boolean
): void {
const disconnect = this.disconnect;
const callback = (event: Event): void => {
handler(event as HandlerEvent);
};
target.addEventListener(eventName, callback, capture);
this.disconnect = () => {
target.removeEventListener(eventName, callback, capture);
disconnect.call(this);
};
}
}