From 6a2e0b3ad3a928247a03a76817d239e61cce0fe0 Mon Sep 17 00:00:00 2001
From: Ben Schlegel <31989404+benschlegel@users.noreply.github.com>
Date: Sun, 17 Sep 2023 22:04:44 +0200
Subject: [PATCH] fix: bad visibility for last explorer item (#478)
* fix: bad visibility for last explorer item
* feat(explorer): add pseudo element for observer
---
quartz/components/Explorer.tsx | 3 ++-
quartz/components/scripts/explorer.inline.ts | 25 ++++++++++++++++++--
quartz/components/styles/explorer.scss | 9 +++++++
3 files changed, 34 insertions(+), 3 deletions(-)
diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx
index 346bd75..0bdb5a6 100644
--- a/quartz/components/Explorer.tsx
+++ b/quartz/components/Explorer.tsx
@@ -95,8 +95,9 @@ export default ((userOpts?: Partial<Options>) => {
</svg>
</button>
<div id="explorer-content">
- <ul class="overflow">
+ <ul class="overflow" id="explorer-ul">
<ExplorerNode node={fileTree} opts={opts} fileData={fileData} />
+ <div id="explorer-end" />
</ul>
</div>
</div>
diff --git a/quartz/components/scripts/explorer.inline.ts b/quartz/components/scripts/explorer.inline.ts
index 8073979..2b7df7d 100644
--- a/quartz/components/scripts/explorer.inline.ts
+++ b/quartz/components/scripts/explorer.inline.ts
@@ -3,6 +3,18 @@ import { FolderState } from "../ExplorerNode"
// 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")
@@ -101,8 +113,10 @@ function setupExplorer() {
) as HTMLElement
// Get corresponding content <ul> tag and set state
- const folderUL = folderLi.parentElement?.nextElementSibling as HTMLElement
- setFolderState(folderUL, folderUl.collapsed)
+ const folderUL = folderLi.parentElement?.nextElementSibling
+ if (folderUL) {
+ setFolderState(folderUL as HTMLElement, folderUl.collapsed)
+ }
})
} else {
// If tree is not in localStorage or config is disabled, use tree passed from Explorer as dataset
@@ -113,6 +127,13 @@ function setupExplorer() {
window.addEventListener("resize", setupExplorer)
document.addEventListener("nav", () => {
setupExplorer()
+
+ const explorerContent = document.getElementById("explorer-ul")
+ // select pseudo element at end of list
+ const lastItem = document.getElementById("explorer-end")
+
+ observer.disconnect()
+ observer.observe(lastItem as Element)
})
/**
diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
index 4b25a55..776a5ae 100644
--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@@ -131,3 +131,12 @@ div:has(> .folder-outer:not(.open)) > .folder-container > svg {
.folder-icon:hover {
color: var(--tertiary);
}
+
+.no-background::after {
+ background: none !important;
+}
+
+#explorer-end {
+ // needs height so IntersectionObserver gets triggered
+ height: 1px;
+}