fix: bad visibility for last explorer item (#478)

Ben Schlegel

2023-09-17 6a2e0b3ad3a928247a03a76817d239e61cce0fe0

fix: bad visibility for last explorer item (#478)

* fix: bad visibility for last explorer item

* feat(explorer): add pseudo element for observer

 quartz/components/Explorer.tsx

@@ -95,8 +95,9 @@
          </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>

 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")
@@ -101,8 +113,10 @@
      ) 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 @@
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)
})

/**

 quartz/components/styles/explorer.scss

@@ -131,3 +131,12 @@
.folder-icon:hover {
  color: var(--tertiary);
}

.no-background::after {
  background: none !important;
}

#explorer-end {
  // needs height so IntersectionObserver gets triggered
  height: 1px;
}