fix: bad visibility for last explorer item (#478)

* fix: bad visibility for last explorer item

* feat(explorer): add pseudo element for observer
This commit is contained in:
Ben Schlegel 2023-09-17 22:04:44 +02:00 committed by GitHub
parent e67f409ec1
commit 6a2e0b3ad3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 3 deletions

View file

@ -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>

View file

@ -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)
})
/**

View file

@ -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;
}