From fa6c02d3213dfd4e6da8e78bd3a2e7004555fd01 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Wed, 24 Jan 2024 01:08:56 +0000
Subject: [PATCH] fix: make search result card block
---
quartz/components/scripts/popover.inline.ts | 51 +++++++++++++++++++++------------------------------
1 files changed, 21 insertions(+), 30 deletions(-)
diff --git a/quartz/components/scripts/popover.inline.ts b/quartz/components/scripts/popover.inline.ts
index 666371b..4d51e2a 100644
--- a/quartz/components/scripts/popover.inline.ts
+++ b/quartz/components/scripts/popover.inline.ts
@@ -1,34 +1,19 @@
import { computePosition, flip, inline, shift } from "@floating-ui/dom"
-
-// from micromorph/src/utils.ts
-// https://github.com/natemoo-re/micromorph/blob/main/src/utils.ts#L5
-export function normalizeRelativeURLs(
- el: Element | Document,
- base: string | URL
-) {
- const update = (el: Element, attr: string, base: string | URL) => {
- el.setAttribute(attr, new URL(el.getAttribute(attr)!, base).pathname)
- }
-
- el.querySelectorAll('[href^="./"], [href^="../"]').forEach((item) =>
- update(item, 'href', base)
- )
-
- el.querySelectorAll('[src^="./"], [src^="../"]').forEach((item) =>
- update(item, 'src', base)
- )
-}
+import { normalizeRelativeURLs } from "../../util/path"
const p = new DOMParser()
-async function mouseEnterHandler(this: HTMLLinkElement, { clientX, clientY }: { clientX: number, clientY: number }) {
+async function mouseEnterHandler(
+ this: HTMLLinkElement,
+ { clientX, clientY }: { clientX: number; clientY: number },
+) {
const link = this
+ if (link.dataset.noPopover === "true") {
+ return
+ }
+
async function setPosition(popoverElement: HTMLElement) {
const { x, y } = await computePosition(link, popoverElement, {
- middleware: [
- inline({ x: clientX, y: clientY }),
- shift(),
- flip()
- ]
+ middleware: [inline({ x: clientX, y: clientY }), shift(), flip()],
})
Object.assign(popoverElement.style, {
left: `${x}px`,
@@ -36,8 +21,11 @@
})
}
+ const hasAlreadyBeenFetched = () =>
+ [...link.children].some((child) => child.classList.contains("popover"))
+
// dont refetch if there's already a popover
- if ([...link.children].some(child => child.classList.contains("popover"))) {
+ if (hasAlreadyBeenFetched()) {
return setPosition(link.lastChild as HTMLElement)
}
@@ -48,8 +36,6 @@
const hash = targetUrl.hash
targetUrl.hash = ""
targetUrl.search = ""
- // prevent hover of the same page
- if (thisUrl.toString() === targetUrl.toString()) return
const contents = await fetch(`${targetUrl}`)
.then((res) => res.text())
@@ -57,6 +43,11 @@
console.error(err)
})
+ // bailout if another popover exists
+ if (hasAlreadyBeenFetched()) {
+ return
+ }
+
if (!contents) return
const html = p.parseFromString(contents, "text/html")
normalizeRelativeURLs(html, targetUrl)
@@ -68,7 +59,7 @@
const popoverInner = document.createElement("div")
popoverInner.classList.add("popover-inner")
popoverElement.appendChild(popoverInner)
- elts.forEach(elt => popoverInner.appendChild(elt))
+ elts.forEach((elt) => popoverInner.appendChild(elt))
setPosition(popoverElement)
link.appendChild(popoverElement)
@@ -77,7 +68,7 @@
const heading = popoverInner.querySelector(hash) as HTMLElement | null
if (heading) {
// leave ~12px of buffer when scrolling to a heading
- popoverInner.scroll({ top: heading.offsetTop - 12, behavior: 'instant' })
+ popoverInner.scroll({ top: heading.offsetTop - 12, behavior: "instant" })
}
}
}
--
Gitblit v1.10.0