keb/jpg-quartz
1
0
Fork 0
mirror of https://github.com/ZetaKebab/quartz.git synced 2025-06-22 00:34:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: support non-singleton explorer

Browse Source
This commit is contained in:
Jacky Zhao
2025-03-10 15:13:04 -07:00
parent dd940a007c
commit a8001e9554
15 changed files with 168 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
quartz/components/scripts/explorer.inline.ts
View File

@ -21,14 +21,13 @@ type FolderState = {
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 @@ function createFolderNode(
}
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 @@ async function setupExplorer(currentSlug: FullSlug) {
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 @@ async function setupExplorer(currentSlug: FullSlug) {
}
// 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 @@ async function setupExplorer(currentSlug: FullSlug) {
"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 @@ async function setupExplorer(currentSlug: FullSlug) {
"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,9 +259,8 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
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")
}