Skip to content

Commit

Permalink
fix: bad visibility for last explorer item
Browse files Browse the repository at this point in the history
  • Loading branch information
benschlegel committed Sep 16, 2023
1 parent 422ba5c commit 45a09c5
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 3 deletions.
2 changes: 1 addition & 1 deletion quartz/components/Explorer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ 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} />
</ul>
</div>
Expand Down
25 changes: 23 additions & 2 deletions quartz/components/scripts/explorer.inline.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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")
Expand Down Expand Up @@ -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
Expand All @@ -113,6 +127,13 @@ function setupExplorer() {
window.addEventListener("resize", setupExplorer)
document.addEventListener("nav", () => {
setupExplorer()

const explorerContent = document.getElementById("explorer-ul")
// select last item in explorer (folder or item)
const lastItem = explorerContent?.firstChild?.firstChild?.firstChild?.firstChild?.lastChild

observer.disconnect()
observer.observe(lastItem as Element)
})

/**
Expand Down
4 changes: 4 additions & 0 deletions quartz/components/styles/explorer.scss
Original file line number Diff line number Diff line change
Expand Up @@ -131,3 +131,7 @@ div:has(> .folder-outer:not(.open)) > .folder-container > svg {
.folder-icon:hover {
color: var(--tertiary);
}

.no-background::after {
background: none !important;
}

0 comments on commit 45a09c5

Please sign in to comment.