From 5ccc48a1728d68ceb53aeea45a451ecfc4142d52 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Thu, 04 Jan 2024 19:05:05 +0000
Subject: [PATCH] style: div -> li for explorer
---
quartz/components/scripts/explorer.inline.ts | 39 ++++++++++++++++++++++++++++++---------
1 files changed, 30 insertions(+), 9 deletions(-)
diff --git a/quartz/components/scripts/explorer.inline.ts b/quartz/components/scripts/explorer.inline.ts
index 8073979..8e79d20 100644
--- a/quartz/components/scripts/explorer.inline.ts
+++ b/quartz/components/scripts/explorer.inline.ts
@@ -3,6 +3,18 @@
// Current state of folders
let explorerState: FolderState[]
+const observer = new IntersectionObserver((entries) => {
+ // If last element is observed, remove gradient of "overflow" class so element is visible
+ const explorer = document.getElementById("explorer-ul")
+ for (const entry of entries) {
+ if (entry.isIntersecting) {
+ explorer?.classList.add("no-background")
+ } else {
+ explorer?.classList.remove("no-background")
+ }
+ }
+})
+
function toggleExplorer(this: HTMLElement) {
// Toggle collapsed state of entire explorer
this.classList.toggle("collapsed")
@@ -47,8 +59,7 @@
// Save folder state to localStorage
const clickFolderPath = currentFolderParent.dataset.folderpath as string
- // Remove leading "/"
- const fullFolderPath = clickFolderPath.substring(1)
+ const fullFolderPath = clickFolderPath
toggleCollapsedByPath(explorerState, fullFolderPath)
const stringifiedFileTree = JSON.stringify(explorerState)
@@ -96,23 +107,33 @@
explorerState = JSON.parse(storageTree)
explorerState.map((folderUl) => {
// grab <li> element for matching folder path
- const folderLi = document.querySelector(
- `[data-folderpath='/${folderUl.path}']`,
- ) as HTMLElement
+ const folderLi = document.querySelector(`[data-folderpath='${folderUl.path}']`) as HTMLElement
// Get corresponding content <ul> tag and set state
- const folderUL = folderLi.parentElement?.nextElementSibling as HTMLElement
- setFolderState(folderUL, folderUl.collapsed)
+ if (folderLi) {
+ const folderUL = folderLi.parentElement?.nextElementSibling
+ if (folderUL) {
+ setFolderState(folderUL as HTMLElement, folderUl.collapsed)
+ }
+ }
})
- } else {
+ } else if (explorer?.dataset.tree) {
// If tree is not in localStorage or config is disabled, use tree passed from Explorer as dataset
- explorerState = JSON.parse(explorer?.dataset.tree as string)
+ explorerState = JSON.parse(explorer.dataset.tree)
}
}
window.addEventListener("resize", setupExplorer)
document.addEventListener("nav", () => {
setupExplorer()
+
+ observer.disconnect()
+
+ // select pseudo element at end of list
+ const lastItem = document.getElementById("explorer-end")
+ if (lastItem) {
+ observer.observe(lastItem)
+ }
})
/**
--
Gitblit v1.10.0