op-packages/luci-theme-shadcn/htdocs/luci-static/resources/sidebar-shadcn.js

"use strict";"require baseclass";const THEME_KEY="shadcn.theme",SIDEBAR_KEY="shadcn.sidebar";return baseclass.extend({__init__(){const e=document.getElementById("sidebar");"1"!==e?.getAttribute("data-shadcn-built")?document.addEventListener("shadcn-sidebar-ready",()=>this._start(),{once:!0}):this._start()},_start(){if(this._started)return;const e=document.getElementById("sidebar");"1"===e?.getAttribute("data-shadcn-built")&&(this._started=!0,this.initTheme(),this.initSidebar(),this.initMobileDrawer(),this.initThemeToggle())},initTheme(){const e=localStorage.getItem(THEME_KEY)||"device";this.applyTheme(e)},applyTheme(e){const t="dark"===e||"device"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches;document.documentElement.setAttribute("data-darkmode",t),localStorage.setItem(THEME_KEY,e),this._updateThemeIcon(t)},_updateThemeIcon(e){const t=document.getElementById("theme-toggle-btn");if(!t)return;const o=t.querySelector("img");if(!o)return;const s=document.documentElement.getAttribute("data-shadcn-media")||"/luci-static/shadcn",d=String(s).replace(/\/$/,"");o.src=d+(e?"/icons/moon.svg":"/icons/sun.svg")},initThemeToggle(){const e=document.getElementById("theme-toggle-btn");e&&(e.addEventListener("click",()=>{const e="true"===document.documentElement.getAttribute("data-darkmode");this.applyTheme(e?"light":"dark")}),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",()=>{"device"===(localStorage.getItem(THEME_KEY)||"device")&&this.applyTheme("device")}))},initSidebar(){const e=document.getElementById("sidebar");if(!e)return;const t=getComputedStyle(document.documentElement).getPropertyValue("--breakpoint-md").trim();this._mobileQuery=window.matchMedia(`(width < ${t})`),this._mobileQuery.addEventListener("change",e=>{e.matches||this._hideCollapsedPopover()});const o="true"===localStorage.getItem(SIDEBAR_KEY);e.setAttribute("data-collapsed",o);const s=document.getElementById("sidebar-toggle-btn");s&&s.addEventListener("click",()=>{this._mobileQuery.matches?this.closeDrawer():this.toggleCollapse()}),this._initAccordion(),this._initCollapsedPopover()},toggleCollapse(){const e=document.getElementById("sidebar");if(!e)return;const t="true"!==e.getAttribute("data-collapsed");e.setAttribute("data-collapsed",t),document.documentElement.setAttribute("data-sidebar-collapsed",t?"true":"false"),localStorage.setItem(SIDEBAR_KEY,t),this._hideCollapsedPopover(),t&&document.querySelectorAll(".sidebar-accordion-item[data-open='true']").forEach(e=>{this._closeAccordionItem(e)})},_initCollapsedPopover(){document.addEventListener("mouseover",e=>{const t=document.getElementById("sidebar");if("true"!==t?.getAttribute("data-collapsed"))return;if(e.target.closest("#sidebar-collapsed-popover"))return void clearTimeout(this._popoverTimer);const o=e.target.closest(".sidebar-accordion-item");o&&(clearTimeout(this._popoverTimer),this._showCollapsedPopover(o))}),document.addEventListener("mouseout",e=>{const t=document.getElementById("sidebar");if("true"!==t?.getAttribute("data-collapsed"))return;if(!e.target.closest(".sidebar-accordion-item")&&!e.target.closest("#sidebar-collapsed-popover"))return;const o=e.relatedTarget;o&&(o.closest(".sidebar-accordion-item")||o.closest("#sidebar-collapsed-popover"))||(this._popoverTimer=setTimeout(()=>this._hideCollapsedPopover(),100))})},_showCollapsedPopover(e){const t=e.getAttribute("data-section")||"",o=document.getElementById("sidebar-collapsed-popover");if(o&&o.getAttribute("data-section")===t)return;this._hideCollapsedPopover();const s=e.querySelectorAll(".sidebar-sub-link");if(!s.length)return;const d=e.querySelector(".sidebar-label"),i=d?d.textContent.trim():"",r=document.createElement("div");if(r.id="sidebar-collapsed-popover",r.className="sidebar-collapsed-popover",r.setAttribute("data-section",t),i){const e=document.createElement("div");e.className="sidebar-collapsed-popover-title",e.textContent=i,r.appendChild(e)}const a=document.createElement("ul");a.className="sidebar-collapsed-popover-list",s.forEach(e=>{const t=e.closest(".sidebar-sub-item")?.classList.contains("active"),o=document.createElement("li"),s=document.createElement("a");s.href=e.href,s.className="sidebar-collapsed-popover-link"+(t?" active":""),s.textContent=e.textContent,o.appendChild(s),a.appendChild(o)}),r.appendChild(a),document.body.appendChild(r);const n=document.getElementById("sidebar").getBoundingClientRect(),c=e.getBoundingClientRect();r.style.left=n.right+4+"px";const l=Math.min(c.top,window.innerHeight-r.offsetHeight-8);r.style.top=Math.max(8,l)+"px"},_hideCollapsedPopover(){clearTimeout(this._popoverTimer);const e=document.getElementById("sidebar-collapsed-popover");e&&e.remove()},_initAccordion(){document.addEventListener("click",e=>{const t=e.target.closest(".sidebar-nav-parent");if(!t)return;const o=document.getElementById("sidebar");if("true"===o?.getAttribute("data-collapsed"))return;const s=t.closest(".sidebar-accordion-item");if(!s)return;const d="true"===s.getAttribute("data-open");document.querySelectorAll(".sidebar-accordion-item[data-open='true']").forEach(e=>{e!==s&&this._closeAccordionItem(e)}),d?this._closeAccordionItem(s):this._openAccordionItem(s)})},_openAccordionItem(e){e.setAttribute("data-open","true")},_closeAccordionItem(e){e.setAttribute("data-open","false")},initMobileDrawer(){const e=document.getElementById("sidebar-hamburger"),t=document.getElementById("sidebar-overlay");e&&e.addEventListener("click",()=>this.openDrawer()),t&&t.addEventListener("click",()=>this.closeDrawer()),document.addEventListener("keydown",e=>{"Escape"===e.key&&this.closeDrawer()})},openDrawer(){const e=document.getElementById("sidebar"),t=document.getElementById("sidebar-overlay");e&&(e.setAttribute("data-drawer-open","true"),t?.classList.add("active"),document.body.style.overflow="hidden")},closeDrawer(){const e=document.getElementById("sidebar"),t=document.getElementById("sidebar-overlay");e&&(e.setAttribute("data-drawer-open","false"),t?.classList.remove("active"),document.body.style.overflow="")}});