fix(popover): popover id calculation + scroll consistency

Jacky Zhao

2025-04-10 e9b60c728595e84b935d8af59a7efcac52ef5ab1

 quartz/components/scripts/popover.inline.ts

@@ -9,10 +9,7 @@
  this: HTMLAnchorElement,
  { clientX, clientY }: { clientX: number; clientY: number },
) {
  clearActivePopover()

  const link = this
  link.id = `backlink-${randomIdNonSecure()}`
  if (link.dataset.noPopover === "true") {
    return
  }
@@ -23,27 +20,37 @@
      middleware: [inline({ x: clientX, y: clientY }), shift(), flip()],
    })
    Object.assign(popoverElement.style, {
      transform: `translate(${x}px, ${y}px)`,
      transform: `translate(${x.toFixed()}px, ${y.toFixed()}px)`,
    })
  }

  const prevPopoverElement = document.getElementById(`popover-${link.id.split("-")[1]}`)
  const hasAlreadyBeenFetched = () => !!prevPopoverElement
  function showPopover(popoverElement: HTMLElement) {
    popoverElement.classList.add("active-popover")
    setPosition(popoverElement as HTMLElement)

  // dont refetch if there's already a popover
  if (hasAlreadyBeenFetched()) {
    setPosition(prevPopoverElement as HTMLElement)
    prevPopoverElement?.classList.add("active-popover")
    return
    if (hash !== "") {
      const targetAnchor = `#popover-internal-${hash.slice(1)}`
      const heading = popoverInner.querySelector(targetAnchor) as HTMLElement | null
      if (heading) {
        // leave ~12px of buffer when scrolling to a heading
        popoverInner.scroll({ top: heading.offsetTop - 12, behavior: "instant" })
      }
    }
  }

  const thisUrl = new URL(document.location.href)
  thisUrl.hash = ""
  thisUrl.search = ""
  const targetUrl = new URL(link.href)
  const hash = decodeURIComponent(targetUrl.hash)
  targetUrl.hash = ""
  targetUrl.search = ""
  const popoverId = `popover-${link.dataset.slug ?? randomIdNonSecure()}`
  const prevPopoverElement = document.getElementById(popoverId)
  const hasAlreadyBeenFetched = () => !!document.getElementById(popoverId)

  // dont refetch if there's already a popover
  if (hasAlreadyBeenFetched()) {
    showPopover(prevPopoverElement as HTMLElement)
    return
  }

  const response = await fetchCanonical(targetUrl).catch((err) => {
    console.error(err)
@@ -59,12 +66,12 @@
  const [contentTypeCategory, typeInfo] = contentType.split("/")

  const popoverElement = document.createElement("div")
  popoverElement.id = popoverId
  popoverElement.classList.add("popover")
  const popoverInner = document.createElement("div")
  popoverInner.classList.add("popover-inner")
  popoverElement.appendChild(popoverInner)

  popoverInner.dataset.contentType = contentType ?? undefined
  popoverElement.appendChild(popoverInner)

  switch (contentTypeCategory) {
    case "image":
@@ -91,7 +98,7 @@
      normalizeRelativeURLs(html, targetUrl)
      // prepend all IDs inside popovers to prevent duplicates
      html.querySelectorAll("[id]").forEach((el) => {
        const targetID = `popover-${el.id}`
        const targetID = `popover-internal-${el.id}`
        el.id = targetID
      })
      const elts = [...html.getElementsByClassName("popover-hint")]
@@ -100,28 +107,13 @@
      elts.forEach((elt) => popoverInner.appendChild(elt))
  }

  setPosition(popoverElement)
  popoverElement.id = `popover-${link.id.split("-")[1]}`
  popoverElement?.classList.add("active-popover")
  document.body.appendChild(popoverElement)

  if (hash !== "") {
    const targetAnchor = hash.startsWith("#popover") ? hash : `#popover-${hash.slice(1)}`
    const heading = popoverInner.querySelector(targetAnchor) as HTMLElement | null
    if (heading) {
      // leave ~12px of buffer when scrolling to a heading
      popoverInner.scroll({ top: heading.offsetTop - 12, behavior: "instant" })
    }
  }
  showPopover(popoverElement)
}

function clearActivePopover() {
  const allPopoverElements = document.querySelectorAll(".popover")
  if (allPopoverElements) {
    allPopoverElements.forEach((popoverElement) =>
      popoverElement.classList.remove("active-popover"),
    )
  }
  allPopoverElements.forEach((popoverElement) => popoverElement.classList.remove("active-popover"))
}

document.addEventListener("nav", () => {