@medyll/idae-be/dist/modules/events.js

A modern, lightweight, and extensible DOM manipulation library built with TypeScript. Designed for precise element targeting and manipulation using a callback-based approach. Features include advanced DOM traversal, event handling, style management, attri

import { be, Be } from '../be.js';
var eventsMethods;
(function (eventsMethods) {
    eventsMethods["on"] = "on";
    eventsMethods["off"] = "off";
    eventsMethods["fire"] = "fire";
})(eventsMethods || (eventsMethods = {}));
/**
 * Handles event operations for Be elements.
 */
export class EventsHandler {
    beElement;
    static methods = Object.values(eventsMethods);
    constructor(beElement) {
        this.beElement = beElement;
    }
    methods = EventsHandler.methods;
    /**
     * Handle event actions (add or remove event listeners).
     * @param actions An object specifying the event actions to perform.
     * @returns The Be instance for method chaining.
     */
    handle(actions) {
        Object.entries(actions).forEach(([method, props]) => {
            const [eventName, handler] = Object.entries(props)[0];
            switch (method) {
                case 'on':
                case 'off':
                    this[method](eventName, handler, props?.options, props?.callback);
                    break;
                case 'fire':
                    this.fire(eventName, props?.detail, props?.options, props?.callback);
                    break;
            }
        });
        return this.beElement;
    }
    /**
     * Adds an event listener to the element(s).
     * @param eventName - The name of the event to listen for.
     * @param handler - The event handler function.
     * @param options - Optional event listener options.
     * @param callback - Optional callback function to execute after adding the event listener.
     * @returns The Be instance for method chaining.
     * @example
     * // HTML: <div id="test"></div>
     * const beInstance = be('#test');
     * beInstance.on('click', () => console.log('Clicked!')); // Adds a click event listener
     */
    on(eventName, handler, options, callback) {
        this.beElement.eachNode((el) => {
            el.addEventListener(eventName, handler, options);
            callback?.({
                fragment: undefined,
                be: be(el),
                root: this.beElement
            });
        });
        return this.beElement;
    }
    /**
     * Removes an event listener from the element(s).
     * @param eventName - The name of the event to remove.
     * @param handler - The event handler function.
     * @param options - Optional event listener options.
     * @param callback - Optional callback function to execute after removing the event listener.
     * @returns The Be instance for method chaining.
     * @example
     * // HTML: <div id="test"></div>
     * const beInstance = be('#test');
     * const handler = () => console.log('Clicked!');
     * beInstance.on('click', handler); // Adds a click event listener
     * beInstance.off('click', handler); // Removes the click event listener
     */
    off(eventName, handler, options, callback) {
        this.beElement.eachNode((el) => {
            el.removeEventListener(eventName, handler, options);
            callback?.({
                fragment: undefined,
                be: be(el),
                root: this.beElement
            });
        });
        return this.beElement;
    }
    /**
     * Dispatches a custom event on the element(s).
     * @param eventName - The name of the custom event to dispatch.
     * @param detail - Optional data to include in the event.
     * @param options - Optional event initialization options.
     * @param callback - Optional callback function to execute after dispatching the event.
     * @returns The Be instance for method chaining.
     * @example
     * // HTML: <div id="test"></div>
     * const beInstance = be('#test');
     * beInstance.fire('customEvent', { key: 'value' }); // Dispatches a custom event with data
     */
    fire(eventName, detail, options, callback) {
        this.beElement.eachNode((el) => {
            el.dispatchEvent(new CustomEvent(eventName, { ...options, detail }));
            callback?.({
                fragment: undefined,
                be: be(el),
                root: this.beElement
            });
        });
        return this.beElement;
    }
    valueOf() {
        return this.beElement;
    }
}