Combine into single explorer tree

This commit is contained in:
saberzero1 2024-10-02 00:53:24 +02:00
parent 526e50aff0
commit 7d404acedd
No known key found for this signature in database
GPG Key ID: 41AEE99107640F10
3 changed files with 74 additions and 74 deletions

View File

@ -88,7 +88,7 @@ export default ((userOpts?: Partial<Options>) => {
}
return (
<div class="explorer-container">
<div class={`mobile-explorer explorer ${displayClass ?? ""}`}>
<div class={`explorer ${displayClass ?? ""}`}>
<button
type="button"
id="mobile-explorer"
@ -115,14 +115,6 @@ export default ((userOpts?: Partial<Options>) => {
<line x1="4" x2="20" y1="18" y2="18" />
</svg>
</button>
<div id="explorer-content" class="collapsed">
<ul class="overflow" id="explorer-ul">
<ExplorerNode node={fileTree} opts={opts} fileData={fileData} />
<li id="explorer-end" />
</ul>
</div>
</div>
<div class={`desktop-explorer explorer ${displayClass ?? ""}`}>
<button
type="button"
id="desktop-explorer"

View File

@ -58,11 +58,15 @@ function toggleFolder(evt: MouseEvent) {
function toggleExplorer(this: HTMLElement) {
// Toggle collapsed state of entire explorer
this.classList.toggle("collapsed")
const content = this.nextElementSibling as MaybeHTMLElement
const content = (
this.nextElementSibling?.nextElementSibling
? this.nextElementSibling.nextElementSibling
: this.nextElementSibling
) as MaybeHTMLElement
if (!content) return
content.classList.toggle("collapsed")
//content.style.maxHeight = content.style.maxHeight === "0px" ? content.scrollHeight + "px" : "0px"
content.style.maxHeight = content.style.maxHeight === "0px" ? "100dvh" : "0px"
content.classList.toggle("explorer-viewmode")
//prevent scroll under
if (document.querySelector("#mobile-explorer")) {
@ -167,9 +171,9 @@ document.addEventListener("DOMContentLoaded", () => {
const explorer = document.querySelector("#mobile-explorer")
if (explorer) {
explorer.classList.add("collapsed")
const content = explorer.nextElementSibling as HTMLElement
const content = explorer.nextElementSibling?.nextElementSibling as HTMLElement
content.classList.add("collapsed")
content.style.maxHeight = "0px"
content.classList.toggle("explorer-viewmode")
}
toggleExplorerFolders()
})
@ -178,9 +182,9 @@ document.addEventListener("nav", () => {
const explorer = document.querySelector("#mobile-explorer")
if (explorer) {
explorer.classList.add("collapsed")
const content = explorer.nextElementSibling as HTMLElement
const content = explorer.nextElementSibling?.nextElementSibling as HTMLElement
content.classList.add("collapsed")
content.style.maxHeight = "0px"
content.classList.toggle("explorer-viewmode")
}
setupExplorer()
//add collapsed class to all folders

View File

@ -2,24 +2,24 @@
.explorer-container {
overflow-y: hidden;
.mobile-explorer {
display: none;
}
.desktop-explorer {
.explorer {
display: flex;
}
@media all and ($mobile) {
order: -1;
.mobile-explorer {
display: flex;
}
.desktop-explorer {
button#mobile-explorer {
display: none;
}
}
.mobile-explorer,
.desktop-explorer {
button#desktop-explorer {
display: flex;
}
@media all and ($mobile) {
order: -1;
button#mobile-explorer {
display: flex;
}
button#desktop-explorer {
display: none;
}
}
height: 100%;
flex-direction: column;
overflow-y: hidden;
@ -88,19 +88,19 @@
list-style: none;
overflow: hidden;
overflow-y: auto;
max-height: 100%;
max-height: 0px;
transition:
max-height 0.35s ease,
visibility 0s linear 0s;
visibility 0s linear 0.35s;
margin-top: 0.5rem;
visibility: visible;
visibility: hidden;
&.collapsed {
max-height: 0;
max-height: 100%;
transition:
max-height 0.35s ease,
visibility 0s linear 0.35s;
visibility: hidden;
visibility 0s linear 0s;
visibility: visible;
}
& ul {
@ -200,47 +200,51 @@
margin: 0;
}
.mobile-explorer {
#explorer-content {
overscroll-behavior: none;
z-index: 100;
position: absolute;
background-color: var(--light);
max-width: calc(100% - 4rem);
left: 0;
width: 100%;
transition: all 300ms ease-in-out;
overflow: hidden;
padding: 1rem 2rem 5rem;
height: 100%;
max-height: calc(100dvh - 8rem);
margin-top: 36px;
&:not(.collapsed) {
height: calc(100dvh - 8rem);
}
ul.overflow {
max-height: calc(100dvh - 8rem);
.explorer {
@media all and ($mobile) {
#explorer-content {
overscroll-behavior: none;
z-index: 100;
position: absolute;
background-color: var(--light);
max-width: calc(100% - 4rem);
left: 0;
width: 100%;
transition: all 300ms ease-in-out;
overflow: hidden;
padding: 1rem 2rem 5rem;
height: 100%;
max-height: calc(100dvh - 8rem);
margin-top: 2rem;
visibility: visible;
&:not(.collapsed) {
height: calc(100dvh - 8rem);
}
ul.overflow {
max-height: calc(100dvh - 8rem);
width: 100%;
}
&.collapsed {
height: 0;
visibility: hidden;
}
}
&.collapsed {
height: 0;
}
}
#mobile-explorer {
margin: 5px;
&:not(.collapsed) .lucide-menu {
transform: rotate(90deg);
transition: transform 200ms ease-in-out;
}
.lucide-menu {
stroke: var(--darkgray);
transition: transform 200ms ease;
&:hover {
stroke: var(--dark);
#mobile-explorer {
margin: 5px;
&:not(.collapsed) .lucide-menu {
transform: rotate(90deg);
transition: transform 200ms ease-in-out;
}
.lucide-menu {
stroke: var(--darkgray);
transition: transform 200ms ease;
&:hover {
stroke: var(--dark);
}
}
}
}