From ca08ec1ae7c0003a186fb5a38b56208d4baf30bd Mon Sep 17 00:00:00 2001
From: Emile Bangma <github@emilebangma.com>
Date: Wed, 12 Mar 2025 13:15:16 +0000
Subject: [PATCH] fix(explorer): mobile explorer toggle (#1823)

---
 quartz/components/scripts/explorer.inline.ts |   48 ++++++++++++++++++++++--------------------------
 1 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/quartz/components/scripts/explorer.inline.ts b/quartz/components/scripts/explorer.inline.ts
index 68a20bb..7160492 100644
--- a/quartz/components/scripts/explorer.inline.ts
+++ b/quartz/components/scripts/explorer.inline.ts
@@ -21,14 +21,13 @@
 
 let currentExplorerState: Array<FolderState>
 function toggleExplorer(this: HTMLElement) {
-  const explorers = document.querySelectorAll(".explorer")
-  for (const explorer of explorers) {
-    explorer.classList.toggle("collapsed")
-    explorer.setAttribute(
-      "aria-expanded",
-      explorer.getAttribute("aria-expanded") === "true" ? "false" : "true",
-    )
-  }
+  const nearestExplorer = this.closest(".explorer") as HTMLElement
+  if (!nearestExplorer) return
+  nearestExplorer.classList.toggle("collapsed")
+  nearestExplorer.setAttribute(
+    "aria-expanded",
+    nearestExplorer.getAttribute("aria-expanded") === "true" ? "false" : "true",
+  )
 }
 
 function toggleFolder(evt: MouseEvent) {
@@ -145,7 +144,7 @@
 }
 
 async function setupExplorer(currentSlug: FullSlug) {
-  const allExplorers = document.querySelectorAll(".explorer") as NodeListOf<HTMLElement>
+  const allExplorers = document.querySelectorAll("div.explorer") as NodeListOf<HTMLElement>
 
   for (const explorer of allExplorers) {
     const dataFns = JSON.parse(explorer.dataset.dataFns || "{}")
@@ -192,7 +191,7 @@
       collapsed: oldIndex.get(path) === true,
     }))
 
-    const explorerUl = document.getElementById("explorer-ul")
+    const explorerUl = explorer.querySelector(".explorer-ul")
     if (!explorerUl) continue
 
     // Create and insert new content
@@ -219,14 +218,12 @@
     }
 
     // Set up event handlers
-    const explorerButtons = explorer.querySelectorAll(
-      "button.explorer-toggle",
-    ) as NodeListOf<HTMLElement>
-    if (explorerButtons) {
-      window.addCleanup(() =>
-        explorerButtons.forEach((button) => button.removeEventListener("click", toggleExplorer)),
-      )
-      explorerButtons.forEach((button) => button.addEventListener("click", toggleExplorer))
+    const explorerButtons = explorer.getElementsByClassName(
+      "explorer-toggle",
+    ) as HTMLCollectionOf<HTMLElement>
+    for (const button of explorerButtons) {
+      button.addEventListener("click", toggleExplorer)
+      window.addCleanup(() => button.removeEventListener("click", toggleExplorer))
     }
 
     // Set up folder click handlers
@@ -235,8 +232,8 @@
         "folder-button",
       ) as HTMLCollectionOf<HTMLElement>
       for (const button of folderButtons) {
-        window.addCleanup(() => button.removeEventListener("click", toggleFolder))
         button.addEventListener("click", toggleFolder)
+        window.addCleanup(() => button.removeEventListener("click", toggleFolder))
       }
     }
 
@@ -244,15 +241,15 @@
       "folder-icon",
     ) as HTMLCollectionOf<HTMLElement>
     for (const icon of folderIcons) {
-      window.addCleanup(() => icon.removeEventListener("click", toggleFolder))
       icon.addEventListener("click", toggleFolder)
+      window.addCleanup(() => icon.removeEventListener("click", toggleFolder))
     }
   }
 }
 
-document.addEventListener("prenav", async (e: CustomEventMap["prenav"]) => {
+document.addEventListener("prenav", async () => {
   // save explorer scrollTop position
-  const explorer = document.getElementById("explorer-ul")
+  const explorer = document.querySelector(".explorer-ul")
   if (!explorer) return
   sessionStorage.setItem("explorerScrollTop", explorer.scrollTop.toString())
 })
@@ -262,15 +259,14 @@
   await setupExplorer(currentSlug)
 
   // if mobile hamburger is visible, collapse by default
-  const mobileExplorer = document.getElementById("mobile-explorer")
-  if (mobileExplorer && mobileExplorer.checkVisibility()) {
-    for (const explorer of document.querySelectorAll(".explorer")) {
+  for (const explorer of document.getElementsByClassName("mobile-explorer")) {
+    if (explorer.checkVisibility()) {
       explorer.classList.add("collapsed")
       explorer.setAttribute("aria-expanded", "false")
     }
   }
 
-  const hiddenUntilDoneLoading = document.querySelector("#mobile-explorer")
+  const hiddenUntilDoneLoading = document.querySelector(".mobile-explorer")
   hiddenUntilDoneLoading?.classList.remove("hide-until-loaded")
 })
 

--
Gitblit v1.10.0