GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2026-03-24 15:05:42 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix selectors for explorer

Browse Source
This commit is contained in:
Tejas Sanap 2024-08-11 20:49:20 +01:00
parent 195fc5134c
commit bb6ccfeba8
No known key found for this signature in database
GPG Key ID: DD8C7759CA107D93
2 changed files with 39 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
quartz/components/scripts/explorer.inline.ts
View File

@ -54,52 +54,52 @@ function toggleFolder(evt: MouseEvent) {
} }
function setupExplorer() { function setupExplorer() {
const explorer = document.getElementById("explorer") const buttons = document.querySelectorAll("button#explorer") as NodeListOf<HTMLButtonElement>
if (!explorer) return for (const explorer of buttons) {
if (explorer.dataset.behavior === "collapse") {
for (const item of document.getElementsByClassName(
"folder-button",
) as HTMLCollectionOf<HTMLElement>) {
item.addEventListener("click", toggleFolder)
window.addCleanup(() => item.removeEventListener("click", toggleFolder))
}
}
if (explorer.dataset.behavior === "collapse") { explorer.addEventListener("click", toggleExplorer)
window.addCleanup(() => explorer.removeEventListener("click", toggleExplorer))
// Set up click handlers for each folder (click handler on folder "icon")
for (const item of document.getElementsByClassName( for (const item of document.getElementsByClassName(
"folder-button", "folder-icon",
) as HTMLCollectionOf<HTMLElement>) { ) as HTMLCollectionOf<HTMLElement>) {
item.addEventListener("click", toggleFolder) item.addEventListener("click", toggleFolder)
window.addCleanup(() => item.removeEventListener("click", toggleFolder)) window.addCleanup(() => item.removeEventListener("click", toggleFolder))
} }
}
explorer.addEventListener("click", toggleExplorer) // Get folder state from local storage
window.addCleanup(() => explorer.removeEventListener("click", toggleExplorer)) const storageTree = localStorage.getItem("fileTree")
const useSavedFolderState = explorer?.dataset.savestate === "true"
// Set up click handlers for each folder (click handler on folder "icon") const oldExplorerState: FolderState[] =
for (const item of document.getElementsByClassName( storageTree && useSavedFolderState ? JSON.parse(storageTree) : []
"folder-icon", const oldIndex = new Map(oldExplorerState.map((entry) => [entry.path, entry.collapsed]))
) as HTMLCollectionOf<HTMLElement>) { const newExplorerState: FolderState[] = explorer.dataset.tree
item.addEventListener("click", toggleFolder) ? JSON.parse(explorer.dataset.tree)
window.addCleanup(() => item.removeEventListener("click", toggleFolder)) : []
} currentExplorerState = []
for (const { path, collapsed } of newExplorerState) {
// Get folder state from local storage currentExplorerState.push({ path, collapsed: oldIndex.get(path) ?? collapsed })
const storageTree = localStorage.getItem("fileTree")
const useSavedFolderState = explorer?.dataset.savestate === "true"
const oldExplorerState: FolderState[] =
storageTree && useSavedFolderState ? JSON.parse(storageTree) : []
const oldIndex = new Map(oldExplorerState.map((entry) => [entry.path, entry.collapsed]))
const newExplorerState: FolderState[] = explorer.dataset.tree
? JSON.parse(explorer.dataset.tree)
: []
currentExplorerState = []
for (const { path, collapsed } of newExplorerState) {
currentExplorerState.push({ path, collapsed: oldIndex.get(path) ?? collapsed })
}
currentExplorerState.map((folderState) => {
const folderLi = document.querySelector(
`[data-folderpath='${folderState.path}']`,
) as MaybeHTMLElement
const folderUl = folderLi?.parentElement?.nextElementSibling as MaybeHTMLElement
if (folderUl) {
setFolderState(folderUl, folderState.collapsed)
} }
})
currentExplorerState.map((folderState) => {
const folderLi = document.querySelector(
`[data-folderpath='${folderState.path}']`,
) as MaybeHTMLElement
const folderUl = folderLi?.parentElement?.nextElementSibling as MaybeHTMLElement
if (folderUl) {
setFolderState(folderUl, folderState.collapsed)
}
})
}
} }
window.addEventListener("resize", setupExplorer) window.addEventListener("resize", setupExplorer)

1
quartz/styles/base.scss
View File

@ -192,6 +192,7 @@ a {
& .sidebar.right { & .sidebar.right {
right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth); right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: column;
& > * { & > * {
@media all and (max-width: $fullPageWidth) { @media all and (max-width: $fullPageWidth) {
flex: 1; flex: 1;