update

2025-11-20 13:10:28 +07:00
parent 1c2c38a8bb
commit 060e3643ea
38 changed files with 18803 additions and 2839 deletions
--- a/assets/script/main.js
+++ b/assets/script/main.js
@@ -0,0 +1,179 @@
+class LayoutCustomizer {
+    constructor() {
+        this.defaultConfig = {
+            theme: "system",
+            direction: "ltr",
+            fontFamily: "default",
+            sidebarTheme: "light",
+            fullscreen: false,
+        }
+        const configCache = localStorage.getItem("__NEXUS_CONFIG_v3.0__")
+        if (configCache) {
+            this.config = JSON.parse(configCache)
+        } else {
+            this.config = { ...this.defaultConfig }
+        }
+        this.html = document.documentElement
+        this.sidebar = document.getElementById("layout-sidebar")
+
+        window.config = this.config
+    }
+
+    updateTheme = () => {
+        localStorage.setItem("__NEXUS_CONFIG_v3.0__", JSON.stringify(this.config))
+
+        if (this.config.theme === "system") {
+            this.html.removeAttribute("data-theme")
+        } else {
+            this.html.setAttribute("data-theme", this.config.theme)
+        }
+
+        if (this.sidebar) {
+            if (
+                this.config.sidebarTheme === "dark" &&
+                ["light", "contrast"].includes(this.config.theme)
+            ) {
+                this.sidebar.setAttribute("data-theme", this.config.sidebarTheme)
+            } else {
+                this.sidebar.removeAttribute("data-theme")
+            }
+        }
+
+        this.html.setAttribute("data-sidebar-theme", this.config.sidebarTheme)
+        this.html.dir = this.config.direction
+
+        if (this.config.fullscreen) {
+            this.html.setAttribute("data-fullscreen", "")
+        } else {
+            this.html.removeAttribute("data-fullscreen")
+        }
+
+        if (this.config.fontFamily !== "default") {
+            this.html.setAttribute("data-font-family", config.fontFamily)
+        } else {
+            this.html.removeAttribute("data-font-family")
+        }
+    }
+
+    initEventListener = () => {
+        const themeControls = document.querySelectorAll("[data-theme-control]")
+        themeControls.forEach((control) => {
+            control.addEventListener("click", () => {
+                let theme = control.getAttribute("data-theme-control") ?? "light"
+                if (theme === "toggle") {
+                    theme = this.config.theme === "light" ? "dark" : "light"
+                }
+                this.config.theme = theme
+                this.updateTheme()
+            })
+        })
+
+        const sidebarThemeControls = document.querySelectorAll("[data-sidebar-theme-control]")
+        sidebarThemeControls.forEach((control) => {
+            control.addEventListener("click", () => {
+                this.config.sidebarTheme =
+                    control.getAttribute("data-sidebar-theme-control") ?? "light"
+                this.updateTheme()
+            })
+        })
+
+        const fontFamilyControls = document.querySelectorAll("[data-font-family-control]")
+        fontFamilyControls.forEach((control) => {
+            control.addEventListener("click", () => {
+                this.config.fontFamily =
+                    control.getAttribute("data-font-family-control") ?? "default"
+                this.updateTheme()
+            })
+        })
+
+        const dirControls = document.querySelectorAll("[data-dir-control]")
+        dirControls.forEach((control) => {
+            control.addEventListener("click", () => {
+                this.config.direction = control.getAttribute("data-dir-control") ?? "ltr"
+                this.updateTheme()
+            })
+        })
+
+        const fullscreenControls = document.querySelectorAll("[data-fullscreen-control]")
+        fullscreenControls.forEach((control) => {
+            control.addEventListener("click", () => {
+                if (document.fullscreenElement != null) {
+                    this.config.fullscreen = false
+                    document.exitFullscreen()
+                } else {
+                    this.config.fullscreen = true
+                    this.html.requestFullscreen()
+                }
+                this.updateTheme()
+            })
+        })
+
+        const resetControls = document.querySelectorAll("[data-reset-control]")
+        resetControls.forEach((control) => {
+            control.addEventListener("click", () => {
+                this.config = { ...this.defaultConfig }
+                if (document.fullscreenElement != null) {
+                    document.exitFullscreen()
+                }
+                this.updateTheme()
+            })
+        })
+
+        const fullscreenMedia = window.matchMedia("(display-mode: fullscreen)")
+        const fullscreenListener = () => {
+            this.config.fullscreen = fullscreenMedia.matches
+            this.updateTheme()
+        }
+        fullscreenMedia.addEventListener("change", fullscreenListener)
+        fullscreenListener()
+    }
+
+    initLeftmenu = () => {
+        const initMenuActivation = () => {
+            const menuItems = document.querySelectorAll(".sidebar-menu-activation  a")
+            let currentURL = window.location.href
+            if (window.location.pathname === "/") {
+                currentURL += "dashboards-ecommerce.html"
+            }
+            menuItems.forEach((item) => {
+                if (item.href === currentURL) {
+                    item.classList.add("active")
+                    const parentElement1 = item.parentElement.parentElement
+                    if (parentElement1.classList.contains("collapse-content")) {
+                        const inputElement1 = parentElement1.parentElement.querySelector("input")
+                        if (inputElement1) {
+                            inputElement1.checked = true
+                        }
+                    }
+                }
+            })
+        }
+
+        const scrollToActiveMenu = () => {
+            const simplebarEl = document.querySelector("#layout-sidebar [data-simplebar]")
+            const activatedItem = document.querySelector("#layout-sidebar .menu a.active")
+            if (simplebarEl && activatedItem) {
+                const simplebar = new SimpleBar(simplebarEl)
+                const top = activatedItem?.getBoundingClientRect().top
+                if (top && top !== 0) {
+                    simplebar.getScrollElement().scrollTo({ top: top - 300, behavior: "smooth" })
+                }
+            }
+        }
+
+        initMenuActivation()
+        scrollToActiveMenu()
+    }
+
+    afterInit = () => {
+        this.initEventListener()
+        this.initLeftmenu()
+    }
+
+    init = () => {
+        this.updateTheme()
+        window.addEventListener("DOMContentLoaded", this.afterInit)
+    }
+}
+
+new LayoutCustomizer().init()