| | |
|---|
| | | import { computePosition, flip, inline, shift } from "@floating-ui/dom" |
|---|
| | | import { normalizeRelativeURLs } from "../../util/path" |
|---|
| | | import { fetchCanonical } from "./util" |
|---|
| | | import { randomIdNonSecure } from "../../util/random" |
|---|
| | | |
|---|
| | | const p = new DOMParser() |
|---|
| | | |
|---|
| | | async function mouseEnterHandler( |
|---|
| | | this: HTMLAnchorElement, |
|---|
| | | { clientX, clientY }: { clientX: number; clientY: number }, |
|---|
| | | ) { |
|---|
| | | clearActivePopover() |
|---|
| | | |
|---|
| | | const link = this |
|---|
| | | link.id = `backlink-${randomIdNonSecure()}` |
|---|
| | | if (link.dataset.noPopover === "true") { |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | async function setPosition(popoverElement: HTMLElement) { |
|---|
| | | const { x, y } = await computePosition(link, popoverElement, { |
|---|
| | | strategy: "fixed", |
|---|
| | | middleware: [inline({ x: clientX, y: clientY }), shift(), flip()], |
|---|
| | | }) |
|---|
| | | Object.assign(popoverElement.style, { |
|---|
| | | left: `${x}px`, |
|---|
| | | top: `${y}px`, |
|---|
| | | transform: `translate(${x}px, ${y}px)`, |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | const hasAlreadyBeenFetched = () => |
|---|
| | | [...link.children].some((child) => child.classList.contains("popover")) |
|---|
| | | const prevPopoverElement = document.getElementById(`popover-${link.id.split("-")[1]}`) |
|---|
| | | const hasAlreadyBeenFetched = () => !!prevPopoverElement |
|---|
| | | |
|---|
| | | // dont refetch if there's already a popover |
|---|
| | | if (hasAlreadyBeenFetched()) { |
|---|
| | | return setPosition(link.lastChild as HTMLElement) |
|---|
| | | setPosition(prevPopoverElement as HTMLElement) |
|---|
| | | prevPopoverElement?.classList.add("active-popover") |
|---|
| | | return |
|---|
| | | } |
|---|
| | | |
|---|
| | | const thisUrl = new URL(document.location.href) |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | setPosition(popoverElement) |
|---|
| | | link.appendChild(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)}` |
|---|
| | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | function clearActivePopover() { |
|---|
| | | const allPopoverElements = document.querySelectorAll(".popover") |
|---|
| | | if (allPopoverElements) { |
|---|
| | | allPopoverElements.forEach((popoverElement) => |
|---|
| | | popoverElement.classList.remove("active-popover"), |
|---|
| | | ) |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | document.addEventListener("nav", () => { |
|---|
| | | const links = [...document.getElementsByClassName("internal")] as HTMLAnchorElement[] |
|---|
| | | for (const link of links) { |
|---|
| | | link.addEventListener("mouseleave", clearActivePopover) |
|---|
| | | link.addEventListener("mouseenter", mouseEnterHandler) |
|---|
| | | window.addCleanup(() => link.removeEventListener("mouseenter", mouseEnterHandler)) |
|---|
| | | window.addCleanup(() => { |
|---|
| | | link.removeEventListener("mouseenter", mouseEnterHandler) |
|---|
| | | link.removeEventListener("mouseleave", clearActivePopover) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }) |
|---|
