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" }); } }