byte/speisekarten-quartz
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(popover): clear popovers more aggressively, use href as id

Browse source
This commit is contained in:
Jacky Zhao 2025-04-11 08:18:28 -07:00
parent 091cc1b05e
commit bfd72347cf
1 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
quartz/components/scripts/popover.inline.ts
View file

@ -1,7 +1,6 @@
import { computePosition, flip, inline, shift } from "@floating-ui/dom" import { computePosition, flip, inline, shift } from "@floating-ui/dom"
import { normalizeRelativeURLs } from "../../util/path" import { normalizeRelativeURLs } from "../../util/path"
import { fetchCanonical } from "./util" import { fetchCanonical } from "./util"
import { randomIdNonSecure } from "../../util/random"
const p = new DOMParser() const p = new DOMParser()
@ -25,6 +24,7 @@ async function mouseEnterHandler(
} }
function showPopover(popoverElement: HTMLElement) { function showPopover(popoverElement: HTMLElement) {
clearActivePopover()
popoverElement.classList.add("active-popover") popoverElement.classList.add("active-popover")
setPosition(popoverElement as HTMLElement) setPosition(popoverElement as HTMLElement)
@ -42,7 +42,7 @@ async function mouseEnterHandler(
const hash = decodeURIComponent(targetUrl.hash) const hash = decodeURIComponent(targetUrl.hash)
targetUrl.hash = "" targetUrl.hash = ""
targetUrl.search = "" targetUrl.search = ""
const popoverId = `popover-${link.dataset.slug ?? randomIdNonSecure()}` const popoverId = `popover-${link.pathname}`
const prevPopoverElement = document.getElementById(popoverId) const prevPopoverElement = document.getElementById(popoverId)
const hasAlreadyBeenFetched = () => !!document.getElementById(popoverId) const hasAlreadyBeenFetched = () => !!document.getElementById(popoverId)
@ -117,10 +117,10 @@ function clearActivePopover() {
} }
document.addEventListener("nav", () => { document.addEventListener("nav", () => {
const links = [...document.getElementsByClassName("internal")] as HTMLAnchorElement[] const links = [...document.querySelectorAll("a.internal")] as HTMLAnchorElement[]
for (const link of links) { for (const link of links) {
link.addEventListener("mouseleave", clearActivePopover)
link.addEventListener("mouseenter", mouseEnterHandler) link.addEventListener("mouseenter", mouseEnterHandler)
link.addEventListener("mouseleave", clearActivePopover)
window.addCleanup(() => { window.addCleanup(() => {
link.removeEventListener("mouseenter", mouseEnterHandler) link.removeEventListener("mouseenter", mouseEnterHandler)
link.removeEventListener("mouseleave", clearActivePopover) link.removeEventListener("mouseleave", clearActivePopover)