diff --git a/docs/advanced/creating components.md b/docs/advanced/creating components.md index 1496b15b2..ad3ada3c2 100644 --- a/docs/advanced/creating components.md +++ b/docs/advanced/creating components.md @@ -157,7 +157,7 @@ document.addEventListener("nav", () => { // e.g. attach event listeners const toggleSwitch = document.querySelector("#switch") as HTMLInputElement toggleSwitch.removeEventListener("change", switchTheme) - toggleSwitch.addEventListener("change", switchTheme) + toggleSwitch.addEventListener("change", switchTheme, {passive: true}) }) ``` diff --git a/quartz/components/scripts/callout.inline.ts b/quartz/components/scripts/callout.inline.ts index 570d36692..027e398d5 100644 --- a/quartz/components/scripts/callout.inline.ts +++ b/quartz/components/scripts/callout.inline.ts @@ -31,7 +31,7 @@ function setupCallout() { if (title) { title.removeEventListener(`click`, toggleCallout) - title.addEventListener(`click`, toggleCallout) + title.addEventListener(`click`, toggleCallout, {passive: true}) const collapsed = div.classList.contains(`is-collapsed`) const height = collapsed ? title.scrollHeight : div.scrollHeight @@ -41,4 +41,4 @@ function setupCallout() { } document.addEventListener(`nav`, setupCallout, {passive: true}) -window.addEventListener(`resize`, setupCallout) +window.addEventListener(`resize`, setupCallout, {passive: true}) diff --git a/quartz/components/scripts/clipboard.inline.ts b/quartz/components/scripts/clipboard.inline.ts index 29b373cb5..7eb3ff119 100644 --- a/quartz/components/scripts/clipboard.inline.ts +++ b/quartz/components/scripts/clipboard.inline.ts @@ -26,7 +26,7 @@ document.addEventListener("nav", () => { }, (error) => console.error(error), ) - }) + }, {passive: true}) els[i].prepend(button) } } diff --git a/quartz/components/scripts/darkmode.inline.ts b/quartz/components/scripts/darkmode.inline.ts index 8a7f3de46..825fe5967 100644 --- a/quartz/components/scripts/darkmode.inline.ts +++ b/quartz/components/scripts/darkmode.inline.ts @@ -16,7 +16,7 @@ document.addEventListener("nav", () => { // Darkmode toggle const toggleSwitch = document.querySelector("#darkmode-toggle") as HTMLInputElement toggleSwitch.removeEventListener("change", switchTheme) - toggleSwitch.addEventListener("change", switchTheme) + toggleSwitch.addEventListener("change", switchTheme, {passive: true}) if (currentTheme === "dark") { toggleSwitch.checked = true } @@ -28,5 +28,5 @@ document.addEventListener("nav", () => { document.documentElement.setAttribute("saved-theme", newTheme) localStorage.setItem("theme", newTheme) toggleSwitch.checked = e.matches - }) + }, {passive: true}) }, {passive: true}) diff --git a/quartz/components/scripts/explorer.inline.ts b/quartz/components/scripts/explorer.inline.ts index b2cc3749d..ca5f5a8dd 100644 --- a/quartz/components/scripts/explorer.inline.ts +++ b/quartz/components/scripts/explorer.inline.ts @@ -87,20 +87,20 @@ function setupExplorer() { document.getElementsByClassName("folder-button"), function (item) { item.removeEventListener("click", toggleFolder) - item.addEventListener("click", toggleFolder) + item.addEventListener("click", toggleFolder, {passive: true}) }, ) } // Add click handler to main explorer explorer.removeEventListener("click", toggleExplorer) - explorer.addEventListener("click", toggleExplorer) + explorer.addEventListener("click", toggleExplorer, {passive: true}) } // Set up click handlers for each folder (click handler on folder "icon") Array.prototype.forEach.call(document.getElementsByClassName("folder-icon"), function (item) { item.removeEventListener("click", toggleFolder) - item.addEventListener("click", toggleFolder) + item.addEventListener("click", toggleFolder, {passive: true}) }) if (storageTree && useSavedFolderState) { @@ -126,7 +126,7 @@ function setupExplorer() { } } -window.addEventListener("resize", setupExplorer) +window.addEventListener("resize", setupExplorer, {passive: true}) document.addEventListener("nav", () => { setupExplorer() diff --git a/quartz/components/scripts/graph.inline.ts b/quartz/components/scripts/graph.inline.ts index 587a39904..e611dc35b 100644 --- a/quartz/components/scripts/graph.inline.ts +++ b/quartz/components/scripts/graph.inline.ts @@ -324,5 +324,5 @@ document.addEventListener("nav", async (e: unknown) => { const containerIcon = document.getElementById("global-graph-icon") containerIcon?.removeEventListener("click", renderGlobalGraph) - containerIcon?.addEventListener("click", renderGlobalGraph) + containerIcon?.addEventListener("click", renderGlobalGraph, {passive: true}) }, {passive: true}) diff --git a/quartz/components/scripts/popover.inline.ts b/quartz/components/scripts/popover.inline.ts index 937536f28..4403719fa 100644 --- a/quartz/components/scripts/popover.inline.ts +++ b/quartz/components/scripts/popover.inline.ts @@ -78,6 +78,6 @@ document.addEventListener("nav", () => { const links = [...document.getElementsByClassName("internal")] as HTMLLinkElement[] for (const link of links) { link.removeEventListener("mouseenter", mouseEnterHandler) - link.addEventListener("mouseenter", mouseEnterHandler) + link.addEventListener("mouseenter", mouseEnterHandler, {passive: true}) } }, {passive: true}) diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts index 1938356ba..8829bd628 100644 --- a/quartz/components/scripts/search.inline.ts +++ b/quartz/components/scripts/search.inline.ts @@ -227,7 +227,7 @@ document.addEventListener("nav", async (e: unknown) => { const targ = resolveRelative(currentSlug, slug) window.spaNavigate(new URL(targ, window.location.toString())) hideSearch() - }) + }, {passive: true}) return button } @@ -296,9 +296,9 @@ document.addEventListener("nav", async (e: unknown) => { document.addEventListener("keydown", shortcutHandler, {passive: true}) prevShortcutHandler = shortcutHandler searchIcon?.removeEventListener("click", () => showSearch("basic")) - searchIcon?.addEventListener("click", () => showSearch("basic")) + searchIcon?.addEventListener("click", () => showSearch("basic"), {passive: true}) searchBar?.removeEventListener("input", onType) - searchBar?.addEventListener("input", onType) + searchBar?.addEventListener("input", onType, {passive: true}) // setup index if it hasn't been already if (!index) { diff --git a/quartz/components/scripts/spa.inline.ts b/quartz/components/scripts/spa.inline.ts index 31ae14fcb..d76e624b5 100644 --- a/quartz/components/scripts/spa.inline.ts +++ b/quartz/components/scripts/spa.inline.ts @@ -100,7 +100,7 @@ function createRouter() { } catch (e) { window.location.assign(url) } - }) + }, {passive: true}) window.addEventListener("popstate", (event) => { const { url } = getOpts(event) ?? {} @@ -111,7 +111,7 @@ function createRouter() { window.location.reload() } return - }) + }, {passive: true}) } return new (class Router { diff --git a/quartz/components/scripts/toc.inline.ts b/quartz/components/scripts/toc.inline.ts index 2b1a3f894..8766280a7 100644 --- a/quartz/components/scripts/toc.inline.ts +++ b/quartz/components/scripts/toc.inline.ts @@ -27,11 +27,11 @@ function setupToc() { const content = toc.nextElementSibling as HTMLElement content.style.maxHeight = content.scrollHeight + "px" toc.removeEventListener("click", toggleToc) - toc.addEventListener("click", toggleToc) + toc.addEventListener("click", toggleToc, {passive: true}) } } -window.addEventListener("resize", setupToc) +window.addEventListener("resize", setupToc, {passive: true}) document.addEventListener("nav", () => { setupToc() diff --git a/quartz/components/scripts/util.ts b/quartz/components/scripts/util.ts index 31a724b9a..b1157ae2b 100644 --- a/quartz/components/scripts/util.ts +++ b/quartz/components/scripts/util.ts @@ -13,7 +13,7 @@ export function registerEscapeHandler(outsideContainer: HTMLElement | null, cb: } outsideContainer?.removeEventListener("click", click) - outsideContainer?.addEventListener("click", click) + outsideContainer?.addEventListener("click", click, {passive: true}) document.removeEventListener("keydown", esc) document.addEventListener("keydown", esc, {passive: true}) } diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts index 226e9394e..36cf73bee 100644 --- a/quartz/plugins/transformers/ofm.ts +++ b/quartz/plugins/transformers/ofm.ts @@ -508,7 +508,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin await mermaid.run({ querySelector: '.mermaid' }) - }); + }, {passive: true}); `, loadTime: "afterDOMReady", moduleType: "module",