/** * @module lib/SelectorObserver * This module contains the SelectorObserver class, allowing you to register listeners that get called whenever the element(s) behind a selector exist in the DOM - [see the documentation for more info](https://github.com/Sv443-Network/UserUtils/blob/main/docs.md#selectorobserver) */ import { type DebouncerType, type Prettify } from "@sv443-network/coreutils"; /** Options for the `onSelector()` method of {@linkcode SelectorObserver} */ export type SelectorListenerOptions = Prettify | SelectorOptionsAll>; export type SelectorOptionsOne = SelectorOptionsCommon & { /** Whether to use `querySelectorAll()` instead - default is false */ all?: false; /** Gets called whenever the selector was found in the DOM */ listener: (element: TElem) => void; }; export type SelectorOptionsAll = SelectorOptionsCommon & { /** Whether to use `querySelectorAll()` instead - default is false */ all: true; /** Gets called whenever the selector was found in the DOM */ listener: (elements: NodeListOf) => void; }; export type SelectorOptionsCommon = { /** Whether to call the listener continuously instead of once - default is false */ continuous?: boolean; /** Whether to debounce the listener to reduce calls to `querySelector` or `querySelectorAll` - set undefined or <=0 to disable (default) */ debounce?: number; /** The edge type of the debouncer - default is "immediate" - refer to {@linkcode Debouncer} for more info */ debounceType?: DebouncerType; }; export type UnsubscribeFunction = () => void; export type SelectorObserverOptions = { /** If set, applies this debounce in milliseconds to all listeners that don't have their own debounce set */ defaultDebounce?: number; /** If set, applies this debounce edge type to all listeners that don't have their own set - refer to {@linkcode Debouncer} for more info */ defaultDebounceType?: DebouncerType; /** Whether to disable the observer when no listeners are present - default is true */ disableOnNoListeners?: boolean; /** Whether to ensure the observer is enabled when a new listener is added - default is true */ enableOnAddListener?: boolean; /** If set to a number, the checks will be run on interval instead of on mutation events - in that case all MutationObserverInit props will be ignored */ checkInterval?: number; }; export type SelectorObserverConstructorOptions = Prettify; /** Observes the children of the given element for changes */ export declare class SelectorObserver { private enabled; private baseElement; private observer?; private observerOptions; private customOptions; private listenerMap; /** * Creates a new SelectorObserver that will observe the children of the given base element selector for changes (only creation and deletion of elements by default) * @param baseElementSelector The selector of the element to observe * @param options Fine-tune what triggers the MutationObserver's checking function - `subtree` and `childList` are set to true by default */ constructor(baseElementSelector: string, options?: SelectorObserverConstructorOptions); /** * Creates a new SelectorObserver that will observe the children of the given base element for changes (only creation and deletion of elements by default) * @param baseElement The element to observe * @param options Fine-tune what triggers the MutationObserver's checking function - `subtree` and `childList` are set to true by default */ constructor(baseElement: Element, options?: SelectorObserverConstructorOptions); /** Call to check all selectors in the {@linkcode listenerMap} using {@linkcode checkSelector()} */ protected checkAllSelectors(): void; /** Checks if the element(s) with the given {@linkcode selector} exist in the DOM and calls the respective {@linkcode listeners} accordingly */ protected checkSelector(selector: string, listeners: SelectorListenerOptions[]): void; /** * Starts observing the children of the base element for changes to the given {@linkcode selector} according to the set {@linkcode options} * @param selector The selector to observe * @param options Options for the selector observation * @param options.listener Gets called whenever the selector was found in the DOM * @param [options.all] Whether to use `querySelectorAll()` instead - default is false * @param [options.continuous] Whether to call the listener continuously instead of just once - default is false * @param [options.debounce] Whether to debounce the listener to reduce calls to `querySelector` or `querySelectorAll` - set undefined or <=0 to disable (default) * @returns Returns a function that can be called to remove this listener more easily */ addListener(selector: string, options: SelectorListenerOptions): UnsubscribeFunction; /** Disables the observation of the child elements */ disable(): void; /** * Enables or reenables the observation of the child elements. * @param immediatelyCheckSelectors Whether to immediately check if all previously registered selectors exist (default is true) * @returns Returns true when the observation was enabled, false otherwise (e.g. when the base element wasn't found) */ enable(immediatelyCheckSelectors?: boolean): boolean; /** Returns whether the observation of the child elements is currently enabled */ isEnabled(): boolean; /** Removes all listeners that have been registered with {@linkcode addListener()} */ clearListeners(): void; /** * Removes all listeners for the given {@linkcode selector} that have been registered with {@linkcode addListener()} * @returns Returns true when all listeners for the associated selector were found and removed, false otherwise */ removeAllListeners(selector: string): boolean; /** * Removes a single listener for the given {@linkcode selector} and {@linkcode options} that has been registered with {@linkcode addListener()} * @returns Returns true when the listener was found and removed, false otherwise */ removeListener(selector: string, options: SelectorListenerOptions): boolean; /** Returns all listeners that have been registered with {@linkcode addListener()} */ getAllListeners(): Map[]>; /** Returns all listeners for the given {@linkcode selector} that have been registered with {@linkcode addListener()} */ getListeners(selector: string): SelectorListenerOptions[] | undefined; }