@medyll/idae-be/dist/modules/classes.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 } from '../be.js';
var classesMethods;
(function (classesMethods) {
    classesMethods["add"] = "add";
    classesMethods["remove"] = "remove";
    classesMethods["toggle"] = "toggle";
    classesMethods["replace"] = "replace";
})(classesMethods || (classesMethods = {}));
/**
 * Handles class operations for Be elements.
 */
export class ClassesHandler {
    beElement;
    static methods = Object.values(classesMethods);
    constructor(beElement) {
        this.beElement = beElement;
    }
    methods = ClassesHandler.methods;
    valueOf() {
        return `[ClassesHandler: methods=${this.methods}]`;
    }
    handle(actions) {
        if (!actions)
            return this.beElement;
        Object.entries(actions).forEach(([method, props]) => {
            switch (method) {
                default:
                    this[method](props);
                    break;
            }
        });
        return this.beElement;
    }
    /**
     * Adds one or more classes to the element(s).
     * @param className - The class or classes to add.
     * @returns The Be instance for method chaining.
     * @example
     * // HTML: <div id="test"></div>
     * const beInstance = be('#test');
     * beInstance.addClass('highlight'); // Adds a single class
     * beInstance.addClass(['highlight', 'active']); // Adds multiple classes
     */
    add(className) {
        const classesToAdd = Array.isArray(className) ? className : className.split(' ');
        this.beElement.eachNode((el) => el.classList.add(...classesToAdd.filter((c) => c.trim() !== '')));
        return this.beElement;
    }
    /**
     * Toggles a class on the element(s).
     * @param className - The class or classes to toggle.
     * @returns The Be instance for method chaining.
     * @example
     * // HTML: <div id="test" class="highlight"></div>
     * const beInstance = be('#test');
     * beInstance.toggleClass('highlight'); // Removes the "highlight" class
     * beInstance.toggleClass('active'); // Adds the "active" class
     */
    toggle(className) {
        const classesToToggle = Array.isArray(className) ? className : className.split(' ');
        classesToToggle.forEach((className) => {
            this.beElement.eachNode((el) => el.classList.toggle(className));
        });
        return this.beElement;
    }
    /**
     * Replaces a class on the element(s) with another class.
     * @param sourceClassName - The class to replace.
     * @param targetClassName - The class to replace it with.
     * @returns The Be instance for method chaining.
     * @example
     * // HTML: <div id="test" class="old-class"></div>
     * const beInstance = be('#test');
     * beInstance.replaceClass('old-class', 'new-class'); // Replaces "old-class" with "new-class"
     */
    replace(sourceClassName, targetClassName) {
        this.beElement.eachNode((el) => el.classList.replace(sourceClassName, targetClassName));
        return this.beElement;
    }
    /**
     * Removes one or more classes from the element(s).
     * @param className - The class or classes to remove.
     * @returns The Be instance for method chaining.
     * @example
     * // HTML: <div id="test" class="highlight active"></div>
     * const beInstance = be('#test');
     * beInstance.removeClass('highlight'); // Removes the "highlight" class
     * beInstance.removeClass(['highlight', 'active']); // Removes multiple classes
     */
    remove(className) {
        const classesToRemove = Array.isArray(className) ? className : className.split(' ');
        this.beElement.eachNode((el) => el.classList.remove(...classesToRemove.filter((c) => c.trim() !== '')));
        return this.beElement;
    }
}