|
@@ -1,29 +1,36 @@
|
|
const interactionKeys = ["Enter", " ", "Space"];
|
|
const interactionKeys = ["Enter", " ", "Space"];
|
|
|
|
|
|
|
|
+type ListenerOpts = AddEventListenerOptions & {
|
|
|
|
+ preventDefault?: boolean;
|
|
|
|
+ stopPropagation?: boolean;
|
|
|
|
+};
|
|
|
|
+
|
|
/**
|
|
/**
|
|
* Adds generic, accessible interaction listeners to the passed element.
|
|
* Adds generic, accessible interaction listeners to the passed element.
|
|
* All listeners have the default behavior prevented and stop propagation (for keyboard events only as long as the captured key is valid).
|
|
* All listeners have the default behavior prevented and stop propagation (for keyboard events only as long as the captured key is valid).
|
|
* @param listenerOptions Provide a {@linkcode listenerOptions} object to configure the listeners
|
|
* @param listenerOptions Provide a {@linkcode listenerOptions} object to configure the listeners
|
|
*/
|
|
*/
|
|
-export function onInteraction<TElem extends HTMLElement>(elem: TElem, listener: (evt: MouseEvent | KeyboardEvent) => void, listenerOptions?: AddEventListenerOptions) {
|
|
|
|
|
|
+export function onInteraction<TElem extends HTMLElement>(elem: TElem, listener: (evt: MouseEvent | KeyboardEvent) => void, listenerOptions?: ListenerOpts) {
|
|
|
|
+ const { preventDefault = true, stopPropagation = true, ...listenerOpts } = listenerOptions ?? {};
|
|
|
|
+
|
|
const proxListener = (e: MouseEvent | KeyboardEvent) => {
|
|
const proxListener = (e: MouseEvent | KeyboardEvent) => {
|
|
if(e instanceof KeyboardEvent) {
|
|
if(e instanceof KeyboardEvent) {
|
|
if(interactionKeys.includes(e.key)) {
|
|
if(interactionKeys.includes(e.key)) {
|
|
- e.preventDefault();
|
|
|
|
- e.stopPropagation();
|
|
|
|
|
|
+ preventDefault && e.preventDefault();
|
|
|
|
+ stopPropagation && e.stopPropagation();
|
|
}
|
|
}
|
|
else return;
|
|
else return;
|
|
}
|
|
}
|
|
else if(e instanceof MouseEvent) {
|
|
else if(e instanceof MouseEvent) {
|
|
- e.preventDefault();
|
|
|
|
- e.stopPropagation();
|
|
|
|
|
|
+ preventDefault && e.preventDefault();
|
|
|
|
+ stopPropagation && e.stopPropagation();
|
|
}
|
|
}
|
|
|
|
|
|
// clean up the other listener that isn't automatically removed if `once` is set
|
|
// clean up the other listener that isn't automatically removed if `once` is set
|
|
- listenerOptions?.once && e.type === "keydown" && elem.removeEventListener("click", proxListener, listenerOptions);
|
|
|
|
- listenerOptions?.once && e.type === "click" && elem.removeEventListener("keydown", proxListener, listenerOptions);
|
|
|
|
|
|
+ listenerOpts?.once && e.type === "keydown" && elem.removeEventListener("click", proxListener, listenerOpts);
|
|
|
|
+ listenerOpts?.once && e.type === "click" && elem.removeEventListener("keydown", proxListener, listenerOpts);
|
|
listener(e);
|
|
listener(e);
|
|
};
|
|
};
|
|
- elem.addEventListener("click", proxListener, listenerOptions);
|
|
|
|
- elem.addEventListener("keydown", proxListener, listenerOptions);
|
|
|
|
|
|
+ elem.addEventListener("click", proxListener, listenerOpts);
|
|
|
|
+ elem.addEventListener("keydown", proxListener, listenerOpts);
|
|
}
|
|
}
|