stylescape/ts/elements/DropdownHandler.ts

Stylescape is a visual identity framework developed by Scape Agency.

export class DropdownHandler {
    private dropdowns: NodeListOf<HTMLElement>;

    constructor(containerSelector: string = ".select_dropdown") {
        this.dropdowns =
            document.querySelectorAll<HTMLElement>(containerSelector);
        if (this.dropdowns.length === 0) return;

        this.initializeDropdowns();
        this.setupGlobalClickListener();
    }

    private initializeDropdowns() {
        this.dropdowns.forEach((dropdown) => {
            const header = dropdown.querySelector<HTMLElement>(
                ".select_dropdown--header",
            );
            const menu = dropdown.querySelector<HTMLElement>(
                ".select_dropdown--menu.dropdown--collapse",
            );
            const checkboxes = dropdown.querySelectorAll<HTMLInputElement>(
                'input[type="checkbox"]',
            );

            if (!header) return;

            header.addEventListener("click", () => {
                if (menu) {
                    menu.classList.toggle("active");
                }

                const flipper = header.querySelector<HTMLElement>(
                    ".flipper--down, .flipper--up",
                );
                if (flipper) {
                    flipper.classList.toggle("flipper--down");
                    flipper.classList.toggle("flipper--up");
                    // flipper.classList.toggle("active")
                }
            });

            checkboxes.forEach((checkbox) => {
                checkbox.addEventListener("change", () => {
                    this.updateSelectionLabel(dropdown);
                });
            });

            this.updateSelectionLabel(dropdown);
        });
    }

    private updateSelectionLabel(dropdown: HTMLElement) {
        const countSpan =
            dropdown.querySelector<HTMLElement>("#selected-count");
        const checkboxes = dropdown.querySelectorAll<HTMLInputElement>(
            'input[type="checkbox"]',
        );

        if (!countSpan || checkboxes.length === 0) return;

        const selected = Array.from(checkboxes).filter(
            (cb) => cb.checked,
        ).length;
        countSpan.textContent = `Selected: ${selected} option${selected !== 1 ? "s" : ""}`;
    }

    private setupGlobalClickListener() {
        document.addEventListener("click", (e) => {
            this.dropdowns.forEach((dropdown) => {
                const menu = dropdown.querySelector<HTMLElement>(
                    ".dropdown--collapse",
                );
                if (menu && !dropdown.contains(e.target as Node)) {
                    menu.classList.remove("active");
                }
            });
        });
    }
}