From f346a01296e5bdbd19de38fa69968b42629b883d Mon Sep 17 00:00:00 2001
From: Emile Bangma <github@emilebangma.com>
Date: Thu, 08 Jan 2026 01:54:41 +0000
Subject: [PATCH] feat(explorer): Add active class to current folder in explorer (#2196)
---
quartz/components/scripts/explorer.inline.ts | 370 ++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 270 insertions(+), 100 deletions(-)
diff --git a/quartz/components/scripts/explorer.inline.ts b/quartz/components/scripts/explorer.inline.ts
index 33d328a..3c6851c 100644
--- a/quartz/components/scripts/explorer.inline.ts
+++ b/quartz/components/scripts/explorer.inline.ts
@@ -1,30 +1,40 @@
-import { FolderState } from "../ExplorerNode"
+import { FileTrieNode } from "../../util/fileTrie"
+import { FullSlug, resolveRelative, simplifySlug } from "../../util/path"
+import { ContentDetails } from "../../plugins/emitters/contentIndex"
type MaybeHTMLElement = HTMLElement | undefined
-let currentExplorerState: FolderState[]
-const observer = new IntersectionObserver((entries) => {
- // If last element is observed, remove gradient of "overflow" class so element is visible
- const explorerUl = document.getElementById("explorer-ul")
- if (!explorerUl) return
- for (const entry of entries) {
- if (entry.isIntersecting) {
- explorerUl.classList.add("no-background")
- } else {
- explorerUl.classList.remove("no-background")
- }
- }
-})
+interface ParsedOptions {
+ folderClickBehavior: "collapse" | "link"
+ folderDefaultState: "collapsed" | "open"
+ useSavedState: boolean
+ sortFn: (a: FileTrieNode, b: FileTrieNode) => number
+ filterFn: (node: FileTrieNode) => boolean
+ mapFn: (node: FileTrieNode) => void
+ order: "sort" | "filter" | "map"[]
+}
+
+type FolderState = {
+ path: string
+ collapsed: boolean
+}
+
+let currentExplorerState: Array<FolderState>
function toggleExplorer(this: HTMLElement) {
- this.classList.toggle("collapsed")
- this.setAttribute(
+ const nearestExplorer = this.closest(".explorer") as HTMLElement
+ if (!nearestExplorer) return
+ const explorerCollapsed = nearestExplorer.classList.toggle("collapsed")
+ nearestExplorer.setAttribute(
"aria-expanded",
- this.getAttribute("aria-expanded") === "true" ? "false" : "true",
+ nearestExplorer.getAttribute("aria-expanded") === "true" ? "false" : "true",
)
- const content = this.nextElementSibling as MaybeHTMLElement
- if (!content) return
- content.classList.toggle("collapsed")
+ if (!explorerCollapsed) {
+ // Stop <html> from being scrollable when mobile explorer is open
+ document.documentElement.classList.add("mobile-no-scroll")
+ } else {
+ document.documentElement.classList.remove("mobile-no-scroll")
+ }
}
function toggleFolder(evt: MouseEvent) {
@@ -32,104 +42,264 @@
const target = evt.target as MaybeHTMLElement
if (!target) return
+ // Check if target was svg icon or button
const isSvg = target.nodeName === "svg"
- const childFolderContainer = (
+
+ // corresponding <ul> element relative to clicked button/folder
+ const folderContainer = (
isSvg
- ? target.parentElement?.nextSibling
- : target.parentElement?.parentElement?.nextElementSibling
+ ? // svg -> div.folder-container
+ target.parentElement
+ : // button.folder-button -> div -> div.folder-container
+ target.parentElement?.parentElement
) as MaybeHTMLElement
- const currentFolderParent = (
- isSvg ? target.nextElementSibling : target.parentElement
- ) as MaybeHTMLElement
- if (!(childFolderContainer && currentFolderParent)) return
+ if (!folderContainer) return
+ const childFolderContainer = folderContainer.nextElementSibling as MaybeHTMLElement
+ if (!childFolderContainer) return
childFolderContainer.classList.toggle("open")
- const isCollapsed = childFolderContainer.classList.contains("open")
- setFolderState(childFolderContainer, !isCollapsed)
- const fullFolderPath = currentFolderParent.dataset.folderpath as string
- toggleCollapsedByPath(currentExplorerState, fullFolderPath)
+
+ // Collapse folder container
+ const isCollapsed = !childFolderContainer.classList.contains("open")
+ setFolderState(childFolderContainer, isCollapsed)
+
+ const currentFolderState = currentExplorerState.find(
+ (item) => item.path === folderContainer.dataset.folderpath,
+ )
+ if (currentFolderState) {
+ currentFolderState.collapsed = isCollapsed
+ } else {
+ currentExplorerState.push({
+ path: folderContainer.dataset.folderpath as FullSlug,
+ collapsed: isCollapsed,
+ })
+ }
+
const stringifiedFileTree = JSON.stringify(currentExplorerState)
localStorage.setItem("fileTree", stringifiedFileTree)
}
-function setupExplorer() {
- const explorer = document.getElementById("explorer")
- if (!explorer) return
+function createFileNode(currentSlug: FullSlug, node: FileTrieNode): HTMLLIElement {
+ const template = document.getElementById("template-file") as HTMLTemplateElement
+ const clone = template.content.cloneNode(true) as DocumentFragment
+ const li = clone.querySelector("li") as HTMLLIElement
+ const a = li.querySelector("a") as HTMLAnchorElement
+ a.href = resolveRelative(currentSlug, node.slug)
+ a.dataset.for = node.slug
+ a.textContent = node.displayName
- if (explorer.dataset.behavior === "collapse") {
- for (const item of document.getElementsByClassName(
- "folder-button",
- ) as HTMLCollectionOf<HTMLElement>) {
- item.addEventListener("click", toggleFolder)
- window.addCleanup(() => item.removeEventListener("click", toggleFolder))
- }
+ if (currentSlug === node.slug) {
+ a.classList.add("active")
}
- explorer.addEventListener("click", toggleExplorer)
- window.addCleanup(() => explorer.removeEventListener("click", toggleExplorer))
-
- // Set up click handlers for each folder (click handler on folder "icon")
- for (const item of document.getElementsByClassName(
- "folder-icon",
- ) as HTMLCollectionOf<HTMLElement>) {
- item.addEventListener("click", toggleFolder)
- window.addCleanup(() => item.removeEventListener("click", toggleFolder))
- }
-
- // Get folder state from local storage
- const storageTree = localStorage.getItem("fileTree")
- const useSavedFolderState = explorer?.dataset.savestate === "true"
- const oldExplorerState: FolderState[] =
- storageTree && useSavedFolderState ? JSON.parse(storageTree) : []
- const oldIndex = new Map(oldExplorerState.map((entry) => [entry.path, entry.collapsed]))
- const newExplorerState: FolderState[] = explorer.dataset.tree
- ? JSON.parse(explorer.dataset.tree)
- : []
- currentExplorerState = []
- for (const { path, collapsed } of newExplorerState) {
- currentExplorerState.push({ path, collapsed: oldIndex.get(path) ?? collapsed })
- }
-
- currentExplorerState.map((folderState) => {
- const folderLi = document.querySelector(
- `[data-folderpath='${folderState.path}']`,
- ) as MaybeHTMLElement
- const folderUl = folderLi?.parentElement?.nextElementSibling as MaybeHTMLElement
- if (folderUl) {
- setFolderState(folderUl, folderState.collapsed)
- }
- })
+ return li
}
-window.addEventListener("resize", setupExplorer)
-document.addEventListener("nav", () => {
- setupExplorer()
- observer.disconnect()
+function createFolderNode(
+ currentSlug: FullSlug,
+ node: FileTrieNode,
+ opts: ParsedOptions,
+): HTMLLIElement {
+ const template = document.getElementById("template-folder") as HTMLTemplateElement
+ const clone = template.content.cloneNode(true) as DocumentFragment
+ const li = clone.querySelector("li") as HTMLLIElement
+ const folderContainer = li.querySelector(".folder-container") as HTMLElement
+ const titleContainer = folderContainer.querySelector("div") as HTMLElement
+ const folderOuter = li.querySelector(".folder-outer") as HTMLElement
+ const ul = folderOuter.querySelector("ul") as HTMLUListElement
- // select pseudo element at end of list
- const lastItem = document.getElementById("explorer-end")
- if (lastItem) {
- observer.observe(lastItem)
+ const folderPath = node.slug
+ folderContainer.dataset.folderpath = folderPath
+
+ if (currentSlug === folderPath) {
+ folderContainer.classList.add("active")
+ }
+
+ if (opts.folderClickBehavior === "link") {
+ // Replace button with link for link behavior
+ const button = titleContainer.querySelector(".folder-button") as HTMLElement
+ const a = document.createElement("a")
+ a.href = resolveRelative(currentSlug, folderPath)
+ a.dataset.for = folderPath
+ a.className = "folder-title"
+ a.textContent = node.displayName
+ button.replaceWith(a)
+ } else {
+ const span = titleContainer.querySelector(".folder-title") as HTMLElement
+ span.textContent = node.displayName
+ }
+
+ // if the saved state is collapsed or the default state is collapsed
+ const isCollapsed =
+ currentExplorerState.find((item) => item.path === folderPath)?.collapsed ??
+ opts.folderDefaultState === "collapsed"
+
+ // if this folder is a prefix of the current path we
+ // want to open it anyways
+ const simpleFolderPath = simplifySlug(folderPath)
+ const folderIsPrefixOfCurrentSlug =
+ simpleFolderPath === currentSlug.slice(0, simpleFolderPath.length)
+
+ if (!isCollapsed || folderIsPrefixOfCurrentSlug) {
+ folderOuter.classList.add("open")
+ }
+
+ for (const child of node.children) {
+ const childNode = child.isFolder
+ ? createFolderNode(currentSlug, child, opts)
+ : createFileNode(currentSlug, child)
+ ul.appendChild(childNode)
+ }
+
+ return li
+}
+
+async function setupExplorer(currentSlug: FullSlug) {
+ const allExplorers = document.querySelectorAll("div.explorer") as NodeListOf<HTMLElement>
+
+ for (const explorer of allExplorers) {
+ const dataFns = JSON.parse(explorer.dataset.dataFns || "{}")
+ const opts: ParsedOptions = {
+ folderClickBehavior: (explorer.dataset.behavior || "collapse") as "collapse" | "link",
+ folderDefaultState: (explorer.dataset.collapsed || "collapsed") as "collapsed" | "open",
+ useSavedState: explorer.dataset.savestate === "true",
+ order: dataFns.order || ["filter", "map", "sort"],
+ sortFn: new Function("return " + (dataFns.sortFn || "undefined"))(),
+ filterFn: new Function("return " + (dataFns.filterFn || "undefined"))(),
+ mapFn: new Function("return " + (dataFns.mapFn || "undefined"))(),
+ }
+
+ // Get folder state from local storage
+ const storageTree = localStorage.getItem("fileTree")
+ const serializedExplorerState = storageTree && opts.useSavedState ? JSON.parse(storageTree) : []
+ const oldIndex = new Map<string, boolean>(
+ serializedExplorerState.map((entry: FolderState) => [entry.path, entry.collapsed]),
+ )
+
+ const data = await fetchData
+ const entries = [...Object.entries(data)] as [FullSlug, ContentDetails][]
+ const trie = FileTrieNode.fromEntries(entries)
+
+ // Apply functions in order
+ for (const fn of opts.order) {
+ switch (fn) {
+ case "filter":
+ if (opts.filterFn) trie.filter(opts.filterFn)
+ break
+ case "map":
+ if (opts.mapFn) trie.map(opts.mapFn)
+ break
+ case "sort":
+ if (opts.sortFn) trie.sort(opts.sortFn)
+ break
+ }
+ }
+
+ // Get folder paths for state management
+ const folderPaths = trie.getFolderPaths()
+ currentExplorerState = folderPaths.map((path) => {
+ const previousState = oldIndex.get(path)
+ return {
+ path,
+ collapsed:
+ previousState === undefined ? opts.folderDefaultState === "collapsed" : previousState,
+ }
+ })
+
+ const explorerUl = explorer.querySelector(".explorer-ul")
+ if (!explorerUl) continue
+
+ // Create and insert new content
+ const fragment = document.createDocumentFragment()
+ for (const child of trie.children) {
+ const node = child.isFolder
+ ? createFolderNode(currentSlug, child, opts)
+ : createFileNode(currentSlug, child)
+
+ fragment.appendChild(node)
+ }
+ explorerUl.insertBefore(fragment, explorerUl.firstChild)
+
+ // restore explorer scrollTop position if it exists
+ const scrollTop = sessionStorage.getItem("explorerScrollTop")
+ if (scrollTop) {
+ explorerUl.scrollTop = parseInt(scrollTop)
+ } else {
+ // try to scroll to the active element if it exists
+ const activeElement = explorerUl.querySelector(".active")
+ if (activeElement) {
+ activeElement.scrollIntoView({ behavior: "smooth" })
+ }
+ }
+
+ // Set up event handlers
+ 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
+ if (opts.folderClickBehavior === "collapse") {
+ const folderButtons = explorer.getElementsByClassName(
+ "folder-button",
+ ) as HTMLCollectionOf<HTMLElement>
+ for (const button of folderButtons) {
+ button.addEventListener("click", toggleFolder)
+ window.addCleanup(() => button.removeEventListener("click", toggleFolder))
+ }
+ }
+
+ const folderIcons = explorer.getElementsByClassName(
+ "folder-icon",
+ ) as HTMLCollectionOf<HTMLElement>
+ for (const icon of folderIcons) {
+ icon.addEventListener("click", toggleFolder)
+ window.addCleanup(() => icon.removeEventListener("click", toggleFolder))
+ }
+ }
+}
+
+document.addEventListener("prenav", async () => {
+ // save explorer scrollTop position
+ const explorer = document.querySelector(".explorer-ul")
+ if (!explorer) return
+ sessionStorage.setItem("explorerScrollTop", explorer.scrollTop.toString())
+})
+
+document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
+ const currentSlug = e.detail.url
+ await setupExplorer(currentSlug)
+
+ // if mobile hamburger is visible, collapse by default
+ for (const explorer of document.getElementsByClassName("explorer")) {
+ const mobileExplorer = explorer.querySelector(".mobile-explorer")
+ if (!mobileExplorer) return
+
+ if (mobileExplorer.checkVisibility()) {
+ explorer.classList.add("collapsed")
+ explorer.setAttribute("aria-expanded", "false")
+
+ // Allow <html> to be scrollable when mobile explorer is collapsed
+ document.documentElement.classList.remove("mobile-no-scroll")
+ }
+
+ mobileExplorer.classList.remove("hide-until-loaded")
}
})
-/**
- * Toggles the state of a given folder
- * @param folderElement <div class="folder-outer"> Element of folder (parent)
- * @param collapsed if folder should be set to collapsed or not
- */
+window.addEventListener("resize", function () {
+ // Desktop explorer opens by default, and it stays open when the window is resized
+ // to mobile screen size. Applies `no-scroll` to <html> in this edge case.
+ const explorer = document.querySelector(".explorer")
+ if (explorer && !explorer.classList.contains("collapsed")) {
+ document.documentElement.classList.add("mobile-no-scroll")
+ return
+ }
+})
+
function setFolderState(folderElement: HTMLElement, collapsed: boolean) {
return collapsed ? folderElement.classList.remove("open") : folderElement.classList.add("open")
}
-
-/**
- * Toggles visibility of a folder
- * @param array array of FolderState (`fileTree`, either get from local storage or data attribute)
- * @param path path to folder (e.g. 'advanced/more/more2')
- */
-function toggleCollapsedByPath(array: FolderState[], path: string) {
- const entry = array.find((item) => item.path === path)
- if (entry) {
- entry.collapsed = !entry.collapsed
- }
-}
--
Gitblit v1.10.0