Files
q-edit/scripts/init-sidebar.mjs
2025-09-04 23:30:07 -04:00

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