quartz-research-note/quartz/components/scripts/popover.inline.ts

53 lines
1.7 KiB
TypeScript
Raw Normal View History

2023-06-18 17:47:07 +00:00
import { computePosition, flip, inline, shift } from "@floating-ui/dom"
2023-06-17 23:05:46 +00:00
document.addEventListener("nav", () => {
const links = [...document.getElementsByClassName("internal")] as HTMLLinkElement[]
const p = new DOMParser()
for (const link of links) {
link.addEventListener("mouseenter", async ({ clientX, clientY }) => {
2023-06-18 17:47:07 +00:00
async function setPosition(popoverElement: HTMLElement) {
const { x, y } = await computePosition(link, popoverElement, {
middleware: [inline({
x: clientX,
y: clientY
}), shift(), flip()]
})
Object.assign(popoverElement.style, {
left: `${x}px`,
top: `${y}px`,
})
}
if (link.dataset.fetchedPopover === "true") {
return setPosition(link.lastChild as HTMLElement)
}
2023-06-17 23:05:46 +00:00
const url = link.href
2023-06-18 17:47:07 +00:00
const anchor = new URL(url).hash
if (anchor.startsWith("#")) return
2023-06-17 23:05:46 +00:00
const contents = await fetch(`${url}`)
.then((res) => res.text())
.catch((err) => {
console.error(err)
})
2023-06-18 17:47:07 +00:00
2023-06-17 23:05:46 +00:00
if (!contents) return
const html = p.parseFromString(contents, "text/html")
const elts = [...html.getElementsByClassName("popover-hint")]
if (elts.length === 0) return
const popoverElement = document.createElement("div")
popoverElement.classList.add("popover")
2023-06-18 17:47:07 +00:00
const popoverInner = document.createElement("div")
popoverInner.classList.add("popover-inner")
popoverElement.appendChild(popoverInner)
elts.forEach(elt => popoverInner.appendChild(elt))
2023-06-17 23:05:46 +00:00
2023-06-18 17:47:07 +00:00
setPosition(popoverElement)
2023-06-17 23:05:46 +00:00
link.appendChild(popoverElement)
link.dataset.fetchedPopover = "true"
})
}
})