133 lines
3.8 KiB
JavaScript
133 lines
3.8 KiB
JavaScript
const STORAGE_KEY = "qedit:sidebarCollapsed";
|
|
|
|
function getStoredCollapsed() {
|
|
try {
|
|
const v = window.localStorage.getItem(STORAGE_KEY);
|
|
return v === "true";
|
|
} catch {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function setStoredCollapsed(val) {
|
|
try {
|
|
window.localStorage.setItem(STORAGE_KEY, String(!!val));
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}
|
|
|
|
function applyCollapsed(collapsed) {
|
|
const shell = document.getElementById("app-shell");
|
|
const sidebar = document.getElementById("sidebar");
|
|
const collapseBtn = document.getElementById("sidebar-collapse");
|
|
const revealBtn = document.getElementById("sidebar-reveal");
|
|
if (!shell || !sidebar) {
|
|
return;
|
|
}
|
|
if (collapsed) {
|
|
// Simple, robust: hide the sidebar directly
|
|
shell.classList.add("is-collapsed");
|
|
sidebar.style.display = "none";
|
|
sidebar.setAttribute("aria-hidden", "true");
|
|
if (collapseBtn) {
|
|
collapseBtn.setAttribute("aria-pressed", "true");
|
|
collapseBtn.setAttribute("aria-expanded", "false");
|
|
}
|
|
if (revealBtn) {
|
|
revealBtn.style.display = "inline-block";
|
|
}
|
|
} else {
|
|
shell.classList.remove("is-collapsed");
|
|
sidebar.style.display = "";
|
|
sidebar.removeAttribute("aria-hidden");
|
|
if (collapseBtn) {
|
|
collapseBtn.setAttribute("aria-pressed", "false");
|
|
collapseBtn.setAttribute("aria-expanded", "true");
|
|
}
|
|
if (revealBtn) {
|
|
revealBtn.style.display = "none";
|
|
}
|
|
}
|
|
}
|
|
|
|
export function initSidebarToggle() {
|
|
try {
|
|
console.log("[qedit] initSidebarToggle: start");
|
|
} catch {}
|
|
const collapseBtn = document.getElementById("sidebar-collapse");
|
|
const revealBtn = document.getElementById("sidebar-reveal");
|
|
const shell = document.getElementById("app-shell");
|
|
const sidebar = document.getElementById("sidebar");
|
|
if (!shell || !sidebar) {
|
|
try {
|
|
console.warn("[qedit] initSidebarToggle: missing shell or sidebar");
|
|
} catch {}
|
|
return;
|
|
}
|
|
|
|
// initial state
|
|
const initial = getStoredCollapsed();
|
|
applyCollapsed(initial);
|
|
try {
|
|
console.log("[qedit] initSidebarToggle: applied initial", { initial });
|
|
if (shell) {
|
|
shell.dataset.sidebarInitialized = "1";
|
|
}
|
|
} catch {}
|
|
|
|
if (collapseBtn) {
|
|
collapseBtn.addEventListener("click", () => {
|
|
try {
|
|
console.log("[qedit] sidebar-collapse: click");
|
|
} catch {}
|
|
const nowCollapsed = !shell.classList.contains("is-collapsed");
|
|
applyCollapsed(nowCollapsed);
|
|
setStoredCollapsed(nowCollapsed);
|
|
});
|
|
}
|
|
|
|
if (revealBtn) {
|
|
revealBtn.addEventListener("click", () => {
|
|
try {
|
|
console.log("[qedit] sidebar-reveal: click");
|
|
} catch {}
|
|
applyCollapsed(false);
|
|
setStoredCollapsed(false);
|
|
});
|
|
}
|
|
|
|
// Defensive delegation: handle clicks even if elements are replaced later
|
|
document.addEventListener("click", (e) => {
|
|
// Be robust to clicks landing on Text/SVG nodes: climb to an Element first
|
|
const targetEl =
|
|
e.target && e.target instanceof Element
|
|
? e.target
|
|
: e.target && /** @type {any} */ (e.target).parentElement
|
|
? /** @type {HTMLElement} */ (/** @type {any} */ (e.target).parentElement)
|
|
: null;
|
|
const el = targetEl ? targetEl.closest("#sidebar-collapse, #sidebar-reveal") : null;
|
|
if (!el) {
|
|
return;
|
|
}
|
|
e.preventDefault();
|
|
try {
|
|
console.log("[qedit] sidebar delegate: click", el.id);
|
|
} catch {}
|
|
if (el.id === "sidebar-collapse") {
|
|
const nowCollapsed = !shell.classList.contains("is-collapsed");
|
|
applyCollapsed(nowCollapsed);
|
|
setStoredCollapsed(nowCollapsed);
|
|
} else if (el.id === "sidebar-reveal") {
|
|
applyCollapsed(false);
|
|
setStoredCollapsed(false);
|
|
}
|
|
});
|
|
}
|
|
|
|
if (document.readyState === "loading") {
|
|
document.addEventListener("DOMContentLoaded", () => initSidebarToggle(), { once: true });
|
|
} else {
|
|
initSidebarToggle();
|
|
}
|