TWA-App/TWASys-App/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, btnMs, isMDiffD = false) {
        super();
        this.listIco = [];
        this.navM = (navM != null) ? document.querySelector(navM) : null;
        this.navD = document.querySelector(nav);
        this.transition = new ATransitionEffect();
        this.overlay = new AOverlay(document.body);
       
        this.isMDiffD = isMDiffD;
        this.changeActive();
  
        if (btnMs != null) {
            if (!(Array.isArray(btnMs) || btnMs instanceof NodeList || btnMs instanceof HTMLCollection)) {
                const tmp = [];
                tmp.push(btnMs);
                btnMs = tmp;
            }
            btnMs.forEach((el => {
                
                var f = function (e) {
                    this.mobileMenu.call(this, e, el);
                }.bind(this);
                el.addEventListener(this.eventName, f, false);
                this.addSystemEvent(this.eventName, el, f, "icomenu");
                this.listIco.push(el);
             
            }).bind(this));
            this.overlay.createOverlay();
            this.overlay.setIndex(2000);
            var e1 = this.navM.querySelector(".hd-close");
            var f1 = function (e) {
                this.overlay.removeOverlay();
                this.listIco.forEach(el => {
                    el.classList.remove("active");
                })
            }.bind(this);
            e1.addEventListener(this.eventName, f1, false);
            this.addSystemEvent(this.eventName, e1, f1, "aOverlay");
            this.overlay.on("before_close", (function () {
                this.listIco.forEach(el => {
                    el.classList.remove("active");
                })
                this.navM.classList.remove("show");
            }).bind(this));
        }
        this.initDropDown();
        this.initNav(this.navD);
        if (this.isMDiffD) {
            this.initNav(this.navM, "M");
        }
    }
   
    initNav(ele, type = "D") {
        let arr = ele.querySelectorAll(".nav-i.has-sub .nav-link, .navmain > .nav-i:not(.has-sub) a");
        Array.from(arr).forEach(el => {
            var f = function (evt) {
                evt.preventDefault();
                if (window.isValidPointerClick(evt)) return;
                this.addEventClick.call(this, evt, type);
            }.bind(this);
            el.addEventListener("click", f, true);
        });
    }
    initDropDown() {
        var d2 = new ADropdown();
        d2.bindDropDowns(this.navD.querySelectorAll(".nav-i.has-sub"));
        if (this.isMDiffD) {
            d2.bindDropDowns(this.navM.querySelectorAll(".nav-i.has-sub"));
        }
        this.dropdown = d2;
    }
    dispose() {
        this.overlay.dispose();
        this.dropdown.dispose();
        super.dispose();
    }
    updateIdPage() {
        this.idPage = document.head.querySelector("meta[name=idPage]").content;
      
        this.navActiveD = this.navD.querySelector("a[nav-id='" + this.idPage + "']");
        if (this.isMDiffD) {
            this.navActiveM = this.navM.querySelector("a[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);
        }
    }
    toggleItemActive(e, f, t = "Mobile") {
        if (e != null) {
            var hasSubE = e.closest(".has-sub");
            if (t == "Mobile") {
                if (f) {
                    (hasSubE != null) ? hasSubE.classList.add("activeM") : "";
                    e.classList.add("active");
                } else {
                    (hasSubE != null) ? hasSubE.classList.remove("activeM") : "";
                    e.classList.remove("active");
                }
            } else {
                if (f) {
                    if (hasSubE != null) {
                        hasSubE.classList.add("activeM")
                    }
                    e.classList.add("active");
                } else {
                    if (hasSubE != null) {
                        hasSubE.classList.remove("activeM");
                    }
                    e.classList.remove("active");
                }
            }
        }
    }

    addEventClick(e, t) {
        window.app.initNavApp(e.currentTarget.getAttribute("href"), e.currentTarget.hasAttribute("isflexpage"));
        window.requestTimeout((() => {
            requestAnimationFrame((() => {
                if (t == "M") {
                    this.overlay.removeOverlay();
                    this.listIco.forEach(el => {
                        el.classList.remove("active");
                    })
                } else {
                    this.dropdown.closeDropdown();
                }
            }).bind(this));
        }).bind(this), 100);
        
    }
    closeExpandMenu() {
        Array.from(this.navM.querySelectorAll(".nav-i.has-sub")).forEach(el => {
            el.classList.remove("active");
        });
    }
    mobileMenu(e, btn) {
        this.overlay.showOverlay();
        this.navM.classList.add("show");
        this.listIco.forEach(el => {
            el.classList.add("active");
        })
    }
}