GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2025-12-24 21:34:06 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(popover): make the backlink's id unique & use translate() instead of translateY()

Browse Source
This commit is contained in:
tuscan-blue 2025-04-05 13:39:06 +08:00
parent 9ac43636e1
commit ca1fd0fb6b
2 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
quartz/components/scripts/popover.inline.ts
View File

@ -1,8 +1,10 @@
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()
async function mouseEnterHandler( async function mouseEnterHandler(
this: HTMLAnchorElement, this: HTMLAnchorElement,
{ clientX, clientY }: { clientX: number; clientY: number }, { clientX, clientY }: { clientX: number; clientY: number },
@ -10,7 +12,7 @@ async function mouseEnterHandler(
clearActivePopover() clearActivePopover()
const link = this const link = this
link.id = link.innerText link.id = `backlink-${randomIdNonSecure()}`
if (link.dataset.noPopover === "true") { if (link.dataset.noPopover === "true") {
return return
} }
@ -21,12 +23,11 @@ async function mouseEnterHandler(
middleware: [inline({ x: clientX, y: clientY }), shift(), flip()], middleware: [inline({ x: clientX, y: clientY }), shift(), flip()],
}) })
Object.assign(popoverElement.style, { Object.assign(popoverElement.style, {
left: `${x}px`, transform: `translate(${x}px, ${y}px)`,
transform: `translateY(${y}px)`,
}) })
} }
const prevPopoverElement = document.getElementById(`popover-${link.id}`) const prevPopoverElement = document.getElementById(`popover-${link.id.split("-")[1]}`)
const hasAlreadyBeenFetched = () => !!prevPopoverElement const hasAlreadyBeenFetched = () => !!prevPopoverElement
// dont refetch if there's already a popover // dont refetch if there's already a popover
@ -97,7 +98,7 @@ async function mouseEnterHandler(
} }
setPosition(popoverElement) setPosition(popoverElement)
popoverElement.id = `popover-${link.id}` popoverElement.id = `popover-${link.id.split("-")[1]}`
popoverElement?.classList.add("active-popover") popoverElement?.classList.add("active-popover")
document.body.appendChild(popoverElement) document.body.appendChild(popoverElement)

1
quartz/components/styles/popover.scss
View File

@ -19,6 +19,7 @@
position: fixed; position: fixed;
overflow: visible; overflow: visible;
padding: 1rem; padding: 1rem;
left: 0;
top: 0; top: 0;
will-change: transform; will-change: transform;