diff --git a/quartz/components/scripts/popover.inline.ts b/quartz/components/scripts/popover.inline.ts index 2efd22138..7f1a6aeb0 100644 --- a/quartz/components/scripts/popover.inline.ts +++ b/quartz/components/scripts/popover.inline.ts @@ -130,7 +130,7 @@ async function mouseEnterHandler( const targetID = `popover-internal-${el.id}` el.id = targetID }) - const elts = Array.from(html.getElementsByClassName("popover-hint")) + const elts = [...html.getElementsByClassName("popover-hint")] if (elts.length === 0) return elts.forEach((elt) => popoverInner.appendChild(elt)) @@ -167,9 +167,8 @@ document.addEventListener("nav", () => { for (const link of links) { link.addEventListener("mouseenter", mouseEnterHandler) link.addEventListener("mouseleave", clearActivePopoverAndHighlights) - // Use type assertion to avoid TypeScript error when checking individual files - if (typeof (window as any).addCleanup === "function") { - ;(window as any).addCleanup(() => { + if (typeof window.addCleanup === "function") { + window.addCleanup(() => { link.removeEventListener("mouseenter", mouseEnterHandler) link.removeEventListener("mouseleave", clearActivePopoverAndHighlights) }) diff --git a/quartz/components/scripts/util.ts b/quartz/components/scripts/util.ts index 11598cea0..66fe60c4e 100644 --- a/quartz/components/scripts/util.ts +++ b/quartz/components/scripts/util.ts @@ -14,13 +14,12 @@ export function registerEscapeHandler(outsideContainer: HTMLElement | null, cb: } outsideContainer?.addEventListener("click", click) - // Use type assertion to avoid TypeScript error when checking individual files - if (typeof (window as any).addCleanup === "function") { - ;(window as any).addCleanup(() => outsideContainer?.removeEventListener("click", click)) + if (typeof window.addCleanup === "function") { + window.addCleanup(() => outsideContainer?.removeEventListener("click", click)) } document.addEventListener("keydown", esc) - if (typeof (window as any).addCleanup === "function") { - ;(window as any).addCleanup(() => document.removeEventListener("keydown", esc)) + if (typeof window.addCleanup === "function") { + window.addCleanup(() => document.removeEventListener("keydown", esc)) } } @@ -69,20 +68,6 @@ export function clearAllHighlights() { element.style.transition = originalTransition }) activeHighlights.clear() - - // Also clear any highlights that might not be tracked (backup cleanup) - // This catches highlights in popovers or other edge cases - const allHighlightedElements = document.querySelectorAll('[style*="background-color"]') - allHighlightedElements.forEach((el) => { - const element = el as HTMLElement - if ( - element.style.backgroundColor.includes("var(--highlight") || - element.style.backgroundColor.includes("#ffeb3b") - ) { - element.style.backgroundColor = "" - element.style.transition = "" - } - }) } /** @@ -97,12 +82,11 @@ export function highlightElement( color: string = "var(--highlight, #ffeb3b40)", ) { // Clear any existing highlight on this element - activeHighlights.forEach((highlight) => { - if (highlight.element === el) { - clearTimeout(highlight.timeoutId) - activeHighlights.delete(highlight) - } - }) + const existingHighlight = Array.from(activeHighlights).find(h => h.element === el) + if (existingHighlight) { + clearTimeout(existingHighlight.timeoutId) + activeHighlights.delete(existingHighlight) + } // Store original styles const originalBackground = el.style.backgroundColor @@ -113,27 +97,21 @@ export function highlightElement( el.style.backgroundColor = color // Set up cleanup - const timeoutId = window.setTimeout(() => { - el.style.backgroundColor = originalBackground - // Remove transition after background fades back - setTimeout(() => { - el.style.transition = originalTransition - // Remove from active highlights - activeHighlights.forEach((highlight) => { - if (highlight.element === el) { - activeHighlights.delete(highlight) - } - }) - }, 300) - }, duration) - - // Track this highlight - activeHighlights.add({ + const highlight = { element: el, originalBackground, originalTransition, - timeoutId, - }) + timeoutId: 0, + } + + highlight.timeoutId = window.setTimeout(() => { + el.style.backgroundColor = originalBackground + el.style.transition = originalTransition + activeHighlights.delete(highlight) + }, duration) + + // Track this highlight + activeHighlights.add(highlight) } /** @@ -183,20 +161,15 @@ export function scrollInContainerToElement( highlight: boolean = true, behavior: ScrollBehavior = "instant", ) { - // Use requestAnimationFrame to ensure content is rendered before scrolling - requestAnimationFrame(() => { - const targetPosition = target.offsetTop - buffer - container.scroll({ - top: Math.max(0, targetPosition), - behavior, - }) - - // Add highlight effect if requested - if (highlight) { - // Small delay to ensure scroll completes before highlighting - setTimeout(() => { - highlightElement(target) - }, 50) - } + // Scroll immediately, since content should already be rendered in a static site + const targetPosition = target.offsetTop - buffer + container.scroll({ + top: Math.max(0, targetPosition), + behavior, }) + + // Add highlight effect if requested + if (highlight) { + highlightElement(target) + } }