Jacky Zhao
2024-01-01 b33f13ccaf4ec14a94ee0ee467dda04cf4981d00
quartz/components/scripts/explorer.inline.ts
@@ -3,6 +3,18 @@
// 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")
@@ -47,8 +59,7 @@
  // Save folder state to localStorage
  const clickFolderPath = currentFolderParent.dataset.folderpath as string
  // Remove leading "/"
  const fullFolderPath = clickFolderPath.substring(1)
  const fullFolderPath = clickFolderPath
  toggleCollapsedByPath(explorerState, fullFolderPath)
  const stringifiedFileTree = JSON.stringify(explorerState)
@@ -96,23 +107,33 @@
    explorerState = JSON.parse(storageTree)
    explorerState.map((folderUl) => {
      // grab <li> element for matching folder path
      const folderLi = document.querySelector(
        `[data-folderpath='/${folderUl.path}']`,
      ) as HTMLElement
      const folderLi = document.querySelector(`[data-folderpath='${folderUl.path}']`) as HTMLElement
      // Get corresponding content <ul> tag and set state
      const folderUL = folderLi.parentElement?.nextElementSibling as HTMLElement
      setFolderState(folderUL, folderUl.collapsed)
      if (folderLi) {
        const folderUL = folderLi.parentElement?.nextElementSibling
        if (folderUL) {
          setFolderState(folderUL as HTMLElement, folderUl.collapsed)
        }
      }
    })
  } else {
  } else if (explorer?.dataset.tree) {
    // If tree is not in localStorage or config is disabled, use tree passed from Explorer as dataset
    explorerState = JSON.parse(explorer?.dataset.tree as string)
    explorerState = JSON.parse(explorer.dataset.tree)
  }
}
window.addEventListener("resize", setupExplorer)
document.addEventListener("nav", () => {
  setupExplorer()
  observer.disconnect()
  // select pseudo element at end of list
  const lastItem = document.getElementById("explorer-end")
  if (lastItem) {
    observer.observe(lastItem)
  }
})
/**