radfusion/resources/assets/vendor/js/mega-dropdown.js

const TIMEOUT = 150;

class MegaDropdown {
    constructor(element, options = {}) {
        this._onHover =
            options.trigger === "hover" ||
            element.getAttribute("data-trigger") === "hover";

        this._container = MegaDropdown._findParent(element, "mega-dropdown");
        if (!this._container) return;

        this._menu = this._container.querySelector(
            ".dropdown-toggle ~ .dropdown-menu",
        );
        if (!this._menu) return;

        element.setAttribute("aria-expanded", "false");

        this._el = element;
        this._bindEvents();
    }

    open() {
        if (this._timeout) {
            clearTimeout(this._timeout);
            this._timeout = null;
        }
        if (this._focusTimeout) {
            clearTimeout(this._focusTimeout);
            this._focusTimeout = null;
        }

        if (this._el.getAttribute("aria-expanded") !== "true") {
            this._triggerEvent("show");
            this._container.classList.add("show");
            this._menu.classList.add("show");
            this._el.setAttribute("aria-expanded", "true");
            this._el.focus();
            this._triggerEvent("shown");
        }
    }

    close(force) {
        if (this._timeout) {
            clearTimeout(this._timeout);
            this._timeout = null;
        }
        if (this._focusTimeout) {
            clearTimeout(this._focusTimeout);
            this._focusTimeout = null;
        }

        if (this._onHover && !force) {
            this._timeout = setTimeout(() => {
                if (this._timeout) {
                    clearTimeout(this._timeout);
                    this._timeout = null;
                }
                this._close();
            }, TIMEOUT);
        } else {
            this._close();
        }
    }

    toggle() {
        // eslint-disable-next-line no-unused-expressions
        this._el.getAttribute("aria-expanded") === "true"
            ? this.close(true)
            : this.open();
    }

    destroy() {
        this._unbindEvents();
        this._el = null;

        if (this._timeout) {
            clearTimeout(this._timeout);
            this._timeout = null;
        }

        if (this._focusTimeout) {
            clearTimeout(this._focusTimeout);
            this._focusTimeout = null;
        }
    }

    _close() {
        if (this._el.getAttribute("aria-expanded") === "true") {
            this._triggerEvent("hide");
            this._container.classList.remove("show");
            this._menu.classList.remove("show");
            this._el.setAttribute("aria-expanded", "false");
            this._triggerEvent("hidden");
        }
    }

    _bindEvents() {
        this._elClickEvnt = (e) => {
            e.preventDefault();
            this.toggle();
        };
        this._el.addEventListener("click", this._elClickEvnt);

        this._bodyClickEvnt = (e) => {
            if (
                !this._container.contains(e.target) &&
                this._container.classList.contains("show")
            ) {
                this.close(true);
            }
        };
        document.body.addEventListener("click", this._bodyClickEvnt, true);

        this._menuClickEvnt = (e) => {
            if (e.target.classList.contains("mega-dropdown-link")) {
                this.close(true);
            }
        };
        this._menu.addEventListener("click", this._menuClickEvnt, true);

        this._focusoutEvnt = () => {
            if (this._focusTimeout) {
                clearTimeout(this._focusTimeout);
                this._focusTimeout = null;
            }

            if (this._el.getAttribute("aria-expanded") !== "true") return;

            this._focusTimeout = setTimeout(() => {
                if (
                    document.activeElement.tagName.toUpperCase() !== "BODY" &&
                    MegaDropdown._findParent(
                        document.activeElement,
                        "mega-dropdown",
                    ) !== this._container
                ) {
                    this.close(true);
                }
            }, 100);
        };
        this._container.addEventListener("focusout", this._focusoutEvnt, true);

        if (this._onHover) {
            this._enterEvnt = () => {
                if (
                    window
                        .getComputedStyle(this._menu, null)
                        .getPropertyValue("position") === "static"
                )
                    return;
                this.open();
            };
            this._leaveEvnt = () => {
                if (
                    window
                        .getComputedStyle(this._menu, null)
                        .getPropertyValue("position") === "static"
                )
                    return;
                this.close();
            };

            this._el.addEventListener("mouseenter", this._enterEvnt);
            this._menu.addEventListener("mouseenter", this._enterEvnt);
            this._el.addEventListener("mouseleave", this._leaveEvnt);
            this._menu.addEventListener("mouseleave", this._leaveEvnt);
        }
    }

    _unbindEvents() {
        if (this._elClickEvnt) {
            this._el.removeEventListener("click", this._elClickEvnt);
            this._elClickEvnt = null;
        }
        if (this._bodyClickEvnt) {
            document.body.removeEventListener(
                "click",
                this._bodyClickEvnt,
                true,
            );
            this._bodyClickEvnt = null;
        }
        if (this._menuClickEvnt) {
            this._menu.removeEventListener("click", this._menuClickEvnt, true);
            this._menuClickEvnt = null;
        }
        if (this._focusoutEvnt) {
            this._container.removeEventListener(
                "focusout",
                this._focusoutEvnt,
                true,
            );
            this._focusoutEvnt = null;
        }
        if (this._enterEvnt) {
            this._el.removeEventListener("mouseenter", this._enterEvnt);
            this._menu.removeEventListener("mouseenter", this._enterEvnt);
            this._enterEvnt = null;
        }
        if (this._leaveEvnt) {
            this._el.removeEventListener("mouseleave", this._leaveEvnt);
            this._menu.removeEventListener("mouseleave", this._leaveEvnt);
            this._leaveEvnt = null;
        }
    }

    static _findParent(el, cls) {
        if (el.tagName.toUpperCase() === "BODY") return null;
        el = el.parentNode;
        while (
            el.tagName.toUpperCase() !== "BODY" &&
            !el.classList.contains(cls)
        ) {
            el = el.parentNode;
        }
        return el.tagName.toUpperCase() !== "BODY" ? el : null;
    }

    _triggerEvent(event) {
        if (document.createEvent) {
            let customEvent;

            if (typeof Event === "function") {
                customEvent = new Event(event);
            } else {
                customEvent = document.createEvent("Event");
                customEvent.initEvent(event, false, true);
            }

            this._container.dispatchEvent(customEvent);
        } else {
            this._container.fireEvent(
                `on${event}`,
                document.createEventObject(),
            );
        }
    }
}

window.MegaDropdown = MegaDropdown;
export { MegaDropdown };