Remember document tree's open state for browsing session This has been so inconvenient.

Changes

3 changed files (+68/-5)

• page_builder/default_theme/pages/json_canvas.tsx
  • @@ -13,7 +13,11 @@ import type { BuildContext } from "../context.ts";
    import { buildClasses, css, join } from "../css.ts"; import { layout, layoutStyles } from "../widgets/layout.tsx"; - import { documentTree, documentTreeStyles } from "../widgets/document_tree.tsx"; + import { + documentTree, + documentTreeScript, + documentTreeStyles, + } from "../widgets/document_tree.tsx"; import { footer, footerStyles } from "../widgets/footer.tsx"; import { pageMetadata, pageMetadataScript } from "../widgets/page_metadata.tsx"; import { jsonCanvas, jsonCanvasStyles } from "../json_canvas/mod.tsx";
  • @@ -80,7 +84,7 @@ return h(null, [
    { type: "doctype" }, template({ context, - scripts: [pageMetadataScript], + scripts: [pageMetadataScript, documentTreeScript], body: layout({ fullscreen: true, nav: documentTree({ context }),
• page_builder/default_theme/pages/markdown.tsx
  • @@ -13,7 +13,11 @@ import type { TocItem } from "../hast/hast_util_toc_mut.ts";
    import { layout, layoutStyles } from "../widgets/layout.tsx"; import { toc, tocStyles } from "../widgets/toc.tsx"; - import { documentTree, documentTreeStyles } from "../widgets/document_tree.tsx"; + import { + documentTree, + documentTreeScript, + documentTreeStyles, + } from "../widgets/document_tree.tsx"; import { footer, footerStyles } from "../widgets/footer.tsx"; import { title, titleStyles } from "../widgets/title.tsx"; import { pageMetadata, pageMetadataScript } from "../widgets/page_metadata.tsx";
  • @@ -85,7 +89,7 @@ return h(null, [
    { type: "doctype" }, template({ context, - scripts: [pageMetadataScript], + scripts: [pageMetadataScript, documentTreeScript], body: layout({ nav: documentTree({ context }), footer: footer({ copyright: context.copyright }),
• page_builder/default_theme/widgets/document_tree.tsx
  • @@ -86,6 +86,57 @@ }
    `, ); + const enum StorageKey { + OpenedPaths = "__macana_doctree_0", + } + + export const documentTreeScript = ` + function loadSavedTreeState() { + const data = window.sessionStorage.getItem("${StorageKey.OpenedPaths}"); + if (!data) { + return [] + } + + const parsed = JSON.parse(data) + if (!Array.isArray(parsed)) { + return [] + } + + return parsed.filter(path => typeof path === "string"); + } + + let saved = new Set(); + try { + saved = new Set(loadSavedTreeState()); + } catch (error) { + console.warn("Failed to restore tree state", { error }); + } + + for (const dir of Array.from(document.getElementsByClassName("${c.directory}"))) { + const path = dir.dataset.macanaPath; + if (typeof path !== "string") { + continue; + } + + if (saved.has(path)) { + dir.open = true; + } + + dir.addEventListener("toggle", () => { + if (dir.open) { + saved.add(path); + } else { + saved.delete(path); + } + + window.sessionStorage.setItem( + "${StorageKey.OpenedPaths}", + JSON.stringify(Array.from(saved.values())) + ); + }); + } + `.trim(); + export interface DocumentTreeProps { context: Readonly<BuildContext>; }
  • @@ -140,7 +191,11 @@ const defaultOpened = currentPath[0] === value.metadata.name;
    return ( <li lang={value.metadata.language ?? undefined}> - <details className={c.directory} open={defaultOpened ? "" : undefined}> + <details + className={c.directory} + open={defaultOpened ? "" : undefined} + data-macana-path={value.path.join("/")} + > <summary className={c.directoryHeader}> {icons.chevronDown({ className: c.chevron })} <span>{value.metadata.title}</span>