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:
parent
a9cdd5ff27
commit
f030418822
@ -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>
|
||||
|
@ -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)
|
||||
})
|
||||
|
||||
/**
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user