infodocs 0.3.0

data/app/javascript/infodocs/controllers/tree_state_controller.js

@@ -0,0 +1,37 @@
+import { Controller } from "@hotwired/stimulus"
+
+const KEY = "infodocs:open-folders"
+
+// Remembers which sidebar folders are open and scrolls the sidebar to the
+// current page.
+export default class extends Controller {
+  connect() {
+    const saved = this.#read()
+    this.element.querySelectorAll("li[data-slug] > details").forEach((details) => {
+      if (saved.includes(details.parentElement.dataset.slug)) details.open = true
+    })
+    this.onToggle = () => this.#write()
+    this.element.addEventListener("toggle", this.onToggle, true)
+    requestAnimationFrame(() => this.#scrollToCurrent())
+  }
+
+  disconnect() { this.element.removeEventListener("toggle", this.onToggle, true) }
+
+  #scrollToCurrent() {
+    const link = this.element.querySelector("a[aria-current=page]")
+    const panel = this.element.closest("aside")
+    if (!link || !panel) return
+
+    const offset = link.getBoundingClientRect().top - panel.getBoundingClientRect().top
+    panel.scrollTop += offset - panel.clientHeight / 2
+  }
+
+  #read() {
+    try { return JSON.parse(localStorage.getItem(KEY)) || [] } catch { return [] }
+  }
+
+  #write() {
+    const open = [...this.element.querySelectorAll("li[data-slug] > details[open]")].map((details) => details.parentElement.dataset.slug)
+    try { localStorage.setItem(KEY, JSON.stringify(open)) } catch { /* storage unavailable */ }
+  }
+}