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 a9cdd5ff27
commit f030418822
3 changed files with 34 additions and 3 deletions

View File

@ -95,8 +95,9 @@ export default ((userOpts?: Partial<Options>) => {
</svg> </svg>
</button> </button>
<div id="explorer-content"> <div id="explorer-content">
<ul class="overflow"> <ul class="overflow" id="explorer-ul">
<ExplorerNode node={fileTree} opts={opts} fileData={fileData} /> <ExplorerNode node={fileTree} opts={opts} fileData={fileData} />
<div id="explorer-end" />
</ul> </ul>
</div> </div>
</div> </div>

View File

@ -3,6 +3,18 @@ import { FolderState } from "../ExplorerNode"
// Current state of folders // Current state of folders
let explorerState: FolderState[] 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) { function toggleExplorer(this: HTMLElement) {
// Toggle collapsed state of entire explorer // Toggle collapsed state of entire explorer
this.classList.toggle("collapsed") this.classList.toggle("collapsed")
@ -101,8 +113,10 @@ function setupExplorer() {
) as HTMLElement ) as HTMLElement
// Get corresponding content <ul> tag and set state // Get corresponding content <ul> tag and set state
const folderUL = folderLi.parentElement?.nextElementSibling as HTMLElement const folderUL = folderLi.parentElement?.nextElementSibling
setFolderState(folderUL, folderUl.collapsed) if (folderUL) {
setFolderState(folderUL as HTMLElement, folderUl.collapsed)
}
}) })
} else { } else {
// If tree is not in localStorage or config is disabled, use tree passed from Explorer as dataset // 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) window.addEventListener("resize", setupExplorer)
document.addEventListener("nav", () => { document.addEventListener("nav", () => {
setupExplorer() 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 { .folder-icon:hover {
color: var(--tertiary); color: var(--tertiary);
} }
.no-background::after {
background: none !important;
}
#explorer-end {
// needs height so IntersectionObserver gets triggered
height: 1px;
}