MikaltoResort/ManagementApp/wwwroot/js/libs/js-AMenu.js

import ADropdown from '/js/libs/js-ADropdown.js'
import ATransitionEffect from '/js/libs/js-ATransitionEffect.js'
import AOverlay from '/js/libs/js-AOverlay.js';

export default class AMenu extends window.AObject {
    constructor(nav, navM, isMDiffD, btnM) {
        super();
        this.eleNav = nav;
        this.navM = document.querySelector(navM);
        this.navD = document.querySelector(nav);
        this.transition = new ATransitionEffect();
        this.overlay = new AOverlay(document.body);
        this.changeActive();
        this.isMDiffD = isMDiffD;
        if (this.isMDiffD) {
            this.initNavM();
            this.addEventItemClick(this.navM, false);
        }
        var f = function (e) {
            this.mobileMenu.call(this, e);
        }.bind(this);
        btnM.addEventListener("click", f, false);
        this.stackEvent.push({ "event": "click", "callback": f, "element": btnM, "parent": null });
        this.overlay.createOverlay();
        this.overlay.setIndex(2000);
        this.initDropDown();
        this.addEventItemClick(this.navD);
        this.overlay.on("before_close", (function () {
            this.navM.classList.remove("show");
        }).bind(this));
    }
    initNavM() {
        this.arr = this.navM.querySelectorAll(".nav-i.has-sub .nav-link");
        Array.from(this.arr).forEach(el => {
            var f = function (evt) {
                this.addEventClick.call(this, evt);
            }.bind(this);
            el.addEventListener("click", f, false);
        });
    }
    initDropDown() {
        var d2 = new ADropdown();
        d2.bindDropDowns(document.querySelectorAll(this.eleNav + " .nav-i.has-sub"));
        d2.on("closed", (ev1) => {
            var t = ev1.con.querySelector(".nav-i.active");
            if (t != null) {
                ev1.con.classList.add("active");
            }
        });
    }
    addEventItemClick(nav, isNavD = true) {
        if (nav != null) {
            var f1 = function (evt) {
                var item_nav = evt.target.closest("a[app-nav][app-url][nav-id]");
                if (item_nav != null) {
                    this.trigger("itemClick", item_nav, evt);
                    if (isNavD && this.isMDiffD) {
                        this.d1.checkCloseDropdown();
                    }
                }
            }.bind(this);
            nav.addEventListener("click", f1, false);
        }
    }
    updateIdPage() {
        this.idPage = document.head.querySelector("meta[name=idPage]").content;

        this.navActiveD = this.navD.querySelector("a[app-nav][nav-id='" + this.idPage + "']");
        if (this.isMDiffD) {
            this.navActiveM = this.navM.querySelector("a[app-nav][nav-id='" + this.idPage + "']");
        }
        window.removeStopCollapsed();
    }
    changeActive() {
        this.checkItemActive(false);
        this.updateIdPage();
        this.checkItemActive(true);
    }
    checkItemActive(f) {
        this.toggleItemActive(this.navActiveD, f, "Desktop");
        if (this.isMDiffD) {
            this.toggleItemActive(this.navActiveM, f);
        } else {
            if (this.navActiveD != null) {
                var t = this.navActiveD.closest("[data-dropdown]");
                if (t != null) {
                    if (f) {
                        t.setAttribute("stopCollapsed", "")
                    } else {
                        t.removeAttribute("stopCollapsed");
                    }
                }
            }
        }
    }
    toggleItemActive(e, f, t = "Mobile") {
        if (e != null) {
            var hasSubE = e.closest(".has-sub");
            if (t == "Mobile") {
                if (f) {
                    (hasSubE != null) ? hasSubE.classList.add("active") : "";
                    e.classList.add("active");
                } else {
                    (hasSubE != null) ? hasSubE.classList.remove("active") : "";
                    e.classList.remove("active");
                }
            } else {
                if (f) {
                    if (hasSubE != null) {
                        hasSubE.classList.add("active")
                        var t1 = hasSubE.querySelector(".sub-item");
                        t1.classList.remove("show");
                        t1.style.height = "auto";
                        t1.style.opacity = 1;
                    }
                    e.classList.add("active");
                } else {
                    if (hasSubE != null) {
                        hasSubE.classList.remove("active");
                        var t1 = hasSubE.querySelector(".sub-item");
                        t1.classList.remove("show");
                        t1.removeAttribute("style");
                    }
                    e.classList.remove("active");
                }
            }
        }
    }

    addEventClick(e) {
        var p = e.currentTarget.closest(".nav-i");
        if (!p.classList.contains("active")) {
            Array.from(this.navM.querySelectorAll(".nav-i.has-sub")).forEach(el => {
                el.classList.remove("active");
            });
            this.transition.expandEffect(p.querySelector(".nav-m-sub"), () => { p.classList.add("active"); });
        }
    }
    closeExpandMenu() {
        Array.from(this.navM.querySelectorAll(".nav-i.has-sub")).forEach(el => {
            el.classList.remove("active");
        });
    }
    mobileMenu(e) {
        this.overlay.showOverlay();
        this.navM.classList.add("show");
        var e1 = this.navM.querySelector(".hd-close");
        var f1 = function (e) {
            this.overlay.removeOverlay();
        }.bind(this);
        e1.addEventListener("click", f1, false);
        this.stackEvent.push({ "event": "click", "callback": f1, "element": e1, "parent": "a1" });
    }
}