Add project files.

SysApp/wwwroot/js/libs/js-AMenu.js

@@ -0,0 +1,154 @@
+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" });
+    }
+}