From c00089bd5728188ce554303b5b18754467c97c85 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Fri, 02 Feb 2024 05:19:51 +0000
Subject: [PATCH] chore: add window.addCleanup() for cleaning up handlers
---
quartz/components/scripts/search.inline.ts | 220 +++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 167 insertions(+), 53 deletions(-)
diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts
index cbcc9ab..797685a 100644
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@@ -11,23 +11,28 @@
tags: string[]
}
-let index: FlexSearch.Document<Item> | undefined = undefined
-
// Can be expanded with things like "term" in the future
type SearchType = "basic" | "tags"
-
-// Current searchType
let searchType: SearchType = "basic"
+let currentSearchTerm: string = ""
+let index: FlexSearch.Document<Item> | undefined = undefined
+const p = new DOMParser()
+const encoder = (str: string) => str.toLowerCase().split(/([^a-z]|[^\x00-\x7F])/)
+const fetchContentCache: Map<FullSlug, Element[]> = new Map()
const contextWindowWords = 30
-const numSearchResults = 5
-const numTagResults = 3
-function highlight(searchTerm: string, text: string, trim?: boolean) {
- // try to highlight longest tokens first
- const tokenizedTerms = searchTerm
+const numSearchResults = 8
+const numTagResults = 5
+
+const tokenizeTerm = (term: string) =>
+ term
.split(/\s+/)
.filter((t) => t !== "")
.sort((a, b) => b.length - a.length)
+
+function highlight(searchTerm: string, text: string, trim?: boolean) {
+ // try to highlight longest tokens first
+ const tokenizedTerms = tokenizeTerm(searchTerm)
let tokenizedText = text.split(/\s+/).filter((t) => t !== "")
let startIndex = 0
@@ -64,6 +69,7 @@
}
return tok
})
+ .slice(startIndex, endIndex + 1)
.join(" ")
return `${startIndex === 0 ? "" : "..."}${slice}${
@@ -71,11 +77,43 @@
}`
}
-const p = new DOMParser()
-const encoder = (str: string) => str.toLowerCase().split(/([^a-z]|[^\x00-\x7F])/)
-let prevShortcutHandler: ((e: HTMLElementEventMap["keydown"]) => void) | undefined = undefined
+function highlightHTML(searchTerm: string, el: HTMLElement) {
+ const p = new DOMParser()
+ const tokenizedTerms = tokenizeTerm(searchTerm)
+ const html = p.parseFromString(el.innerHTML, "text/html")
-const fetchContentCache: Map<FullSlug, Element[]> = new Map()
+ const createHighlightSpan = (text: string) => {
+ const span = document.createElement("span")
+ span.className = "highlight"
+ span.textContent = text
+ return span
+ }
+
+ const highlightTextNodes = (node: Node) => {
+ if (node.nodeType === Node.TEXT_NODE) {
+ let nodeText = node.nodeValue || ""
+ tokenizedTerms.forEach((term) => {
+ const regex = new RegExp(term.toLowerCase(), "gi")
+ const matches = nodeText.match(regex)
+ const spanContainer = document.createElement("span")
+ let lastIndex = 0
+ matches?.forEach((match) => {
+ const matchIndex = nodeText.indexOf(match, lastIndex)
+ spanContainer.appendChild(document.createTextNode(nodeText.slice(lastIndex, matchIndex)))
+ spanContainer.appendChild(createHighlightSpan(match))
+ lastIndex = matchIndex + match.length
+ })
+ spanContainer.appendChild(document.createTextNode(nodeText.slice(lastIndex)))
+ node.parentNode?.replaceChild(spanContainer, node)
+ })
+ } else if (node.nodeType === Node.ELEMENT_NODE) {
+ Array.from(node.childNodes).forEach(highlightTextNodes)
+ }
+ }
+
+ highlightTextNodes(html.body)
+ return html.body
+}
document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
const currentSlug = e.detail.url
@@ -86,7 +124,6 @@
const searchIcon = document.getElementById("search-icon")
const searchBar = document.getElementById("search-bar") as HTMLInputElement | null
const searchLayout = document.getElementById("search-layout")
- const resultCards = document.getElementsByClassName("result-card")
const idDataMap = Object.keys(data) as FullSlug[]
const appendLayout = (el: HTMLElement) => {
@@ -97,6 +134,7 @@
const enablePreview = searchLayout?.dataset?.preview === "true"
let preview: HTMLDivElement | undefined = undefined
+ let previewInner: HTMLDivElement | undefined = undefined
const results = document.createElement("div")
results.id = "results-container"
results.style.flexBasis = enablePreview ? "30%" : "100%"
@@ -123,6 +161,9 @@
if (preview) {
removeAllChildren(preview)
}
+ if (searchLayout) {
+ searchLayout.style.opacity = "0"
+ }
searchType = "basic" // reset search type after closing
}
@@ -136,6 +177,8 @@
searchBar?.focus()
}
+ let currentHover: HTMLInputElement | null = null
+
async function shortcutHandler(e: HTMLElementEventMap["keydown"]) {
if (e.key === "k" && (e.ctrlKey || e.metaKey) && !e.shiftKey) {
e.preventDefault()
@@ -151,42 +194,61 @@
if (searchBar) searchBar.value = "#"
}
+ if (currentHover) {
+ currentHover.classList.remove("focus")
+ }
+
+ // If search is active, then we will render the first result and display accordingly
if (!container?.classList.contains("active")) return
else if (e.key === "Enter") {
// If result has focus, navigate to that one, otherwise pick first result
if (results?.contains(document.activeElement)) {
const active = document.activeElement as HTMLInputElement
+ if (active.classList.contains("no-match")) return
+ await displayPreview(active)
active.click()
} else {
const anchor = document.getElementsByClassName("result-card")[0] as HTMLInputElement | null
- anchor?.click()
+ if (!anchor || anchor?.classList.contains("no-match")) return
+ await displayPreview(anchor)
+ anchor.click()
}
} else if (e.key === "ArrowUp" || (e.shiftKey && e.key === "Tab")) {
e.preventDefault()
if (results?.contains(document.activeElement)) {
// If an element in results-container already has focus, focus previous one
- const prevResult = document.activeElement?.previousElementSibling as HTMLInputElement | null
- if (enablePreview && prevResult?.id) {
- await displayPreview(prevResult?.id as FullSlug)
- }
+ const currentResult = currentHover
+ ? currentHover
+ : (document.activeElement as HTMLInputElement | null)
+ const prevResult = currentResult?.previousElementSibling as HTMLInputElement | null
+ currentResult?.classList.remove("focus")
+ await displayPreview(prevResult)
prevResult?.focus()
+ currentHover = prevResult
}
} else if (e.key === "ArrowDown" || e.key === "Tab") {
e.preventDefault()
- // When first pressing ArrowDown, results wont contain the active element, so focus first element
- if (!results?.contains(document.activeElement)) {
- const firstResult = resultCards[0] as HTMLInputElement | null
- if (enablePreview && firstResult?.id) {
- await displayPreview(firstResult?.id as FullSlug)
- }
- firstResult?.focus()
+ // The results should already been focused, so we need to find the next one.
+ // The activeElement is the search bar, so we need to find the first result and focus it.
+ if (document.activeElement === searchBar || currentHover !== null) {
+ const firstResult = currentHover
+ ? currentHover
+ : (document.getElementsByClassName("result-card")[0] as HTMLInputElement | null)
+ const secondResult = firstResult?.nextElementSibling as HTMLInputElement | null
+ firstResult?.classList.remove("focus")
+ await displayPreview(secondResult)
+ secondResult?.focus()
+ currentHover = secondResult
} else {
// If an element in results-container already has focus, focus next one
- const nextResult = document.activeElement?.nextElementSibling as HTMLInputElement | null
- if (enablePreview && nextResult?.id) {
- await displayPreview(nextResult?.id as FullSlug)
- }
+ const active = currentHover
+ ? currentHover
+ : (document.activeElement as HTMLInputElement | null)
+ active?.classList.remove("focus")
+ const nextResult = active?.nextElementSibling as HTMLInputElement | null
+ await displayPreview(nextResult)
nextResult?.focus()
+ currentHover = nextResult
}
}
}
@@ -262,30 +324,76 @@
const resultToHTML = ({ slug, title, content, tags }: Item) => {
const htmlTags = tags.length > 0 ? `<ul>${tags.join("")}</ul>` : ``
+ const resultContent = enablePreview && window.innerWidth > 600 ? "" : `<p>${content}</p>`
+
const itemTile = document.createElement("a")
itemTile.classList.add("result-card")
- itemTile.id = slug
- itemTile.href = resolveUrl(slug).toString()
- itemTile.innerHTML = `<h3>${title}</h3>${htmlTags}${enablePreview && window.innerWidth > 600 ? "" : `<p>${content}</p>`}`
- itemTile.addEventListener("click", (event) => {
- if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
- hideSearch()
+ Object.assign(itemTile, {
+ id: slug,
+ href: resolveUrl(slug).toString(),
+ innerHTML: `<h3>${title}</h3>${htmlTags}${resultContent}`,
})
+
+ async function onMouseEnter(ev: MouseEvent) {
+ // Actually when we hover, we need to clean all highlights within the result childs
+ if (!ev.target) return
+ for (const el of document.getElementsByClassName(
+ "result-card",
+ ) as HTMLCollectionOf<HTMLElement>) {
+ el.classList.remove("focus")
+ el.blur()
+ }
+ const target = ev.target as HTMLInputElement
+ await displayPreview(target)
+ currentHover = target
+ currentHover.classList.remove("focus")
+ }
+
+ async function onMouseLeave(ev: MouseEvent) {
+ const target = ev.target as HTMLAnchorElement
+ target.classList.remove("focus")
+ }
+
+ const events = [
+ ["mouseenter", onMouseEnter],
+ ["mouseleave", onMouseLeave],
+ [
+ "click",
+ (event: MouseEvent) => {
+ if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
+ hideSearch()
+ },
+ ],
+ ] as [keyof HTMLElementEventMap, (this: HTMLElement) => void][]
+
+ events.forEach(([event, handler]) => itemTile.addEventListener(event, handler))
+
return itemTile
}
- function displayResults(finalResults: Item[]) {
+ async function displayResults(finalResults: Item[]) {
if (!results) return
removeAllChildren(results)
if (finalResults.length === 0) {
- results.innerHTML = `<a class="result-card">
+ results.innerHTML = `<a class="result-card no-match">
<h3>No results.</h3>
<p>Try another search term?</p>
</a>`
} else {
results.append(...finalResults.map(resultToHTML))
}
+ // focus on first result, then also dispatch preview immediately
+ if (results?.firstElementChild) {
+ const firstChild = results.firstElementChild as HTMLElement
+ if (firstChild.classList.contains("no-match")) {
+ removeAllChildren(preview as HTMLElement)
+ } else {
+ firstChild.classList.add("focus")
+ currentHover = firstChild as HTMLInputElement
+ await displayPreview(firstChild)
+ }
+ }
}
async function fetchContent(slug: FullSlug): Promise<Element[]> {
@@ -309,26 +417,37 @@
return contents
}
- async function displayPreview(slug: FullSlug) {
- if (!searchLayout || !enablePreview) return
+ async function displayPreview(el: HTMLElement | null) {
+ if (!searchLayout || !enablePreview || !el) return
+
+ const slug = el.id as FullSlug
+ el.classList.add("focus")
removeAllChildren(preview as HTMLElement)
- const contentDetails = await fetchContent(slug)
- const previewInner = document.createElement("div")
+ previewInner = document.createElement("div")
previewInner.classList.add("preview-inner")
preview?.appendChild(previewInner)
- contentDetails?.forEach((elt) => previewInner.appendChild(elt))
+
+ const innerDiv = await fetchContent(slug).then((contents) =>
+ contents.map((el) => highlightHTML(currentSearchTerm, el as HTMLElement)),
+ )
+ previewInner.append(...innerDiv)
}
async function onType(e: HTMLElementEventMap["input"]) {
let term = (e.target as HTMLInputElement).value
let searchResults: FlexSearch.SimpleDocumentSearchResultSetUnit[]
+ currentSearchTerm = (e.target as HTMLInputElement).value
if (searchLayout) {
searchLayout.style.opacity = "1"
}
+ if (term === "" && searchLayout) {
+ searchLayout.style.opacity = "0"
+ }
+
if (term.toLowerCase().startsWith("#")) {
searchType = "tags"
} else {
@@ -366,19 +485,15 @@
...getByField("tags"),
])
const finalResults = [...allIds].map((id) => formatForDisplay(term, id))
- displayResults(finalResults)
- }
-
- if (prevShortcutHandler) {
- document.removeEventListener("keydown", prevShortcutHandler)
+ await displayResults(finalResults)
}
document.addEventListener("keydown", shortcutHandler)
- prevShortcutHandler = shortcutHandler
- searchIcon?.removeEventListener("click", () => showSearch("basic"))
+ window.addCleanup(() => document.removeEventListener("keydown", shortcutHandler))
searchIcon?.addEventListener("click", () => showSearch("basic"))
- searchBar?.removeEventListener("input", onType)
+ window.addCleanup(() => searchIcon?.removeEventListener("click", () => showSearch("basic")))
searchBar?.addEventListener("input", onType)
+ window.addCleanup(() => searchBar?.removeEventListener("input", onType))
// setup index if it hasn't been already
if (!index) {
@@ -419,13 +534,12 @@
async function fillDocument(index: FlexSearch.Document<Item, false>, data: any) {
let id = 0
for (const [slug, fileData] of Object.entries<ContentDetails>(data)) {
- await index.addAsync(id, {
+ await index.addAsync(id++, {
id,
slug: slug as FullSlug,
title: fileData.title,
content: fileData.content,
tags: fileData.tags,
})
- id++
}
}
--
Gitblit v1.10.0