more passive event listeners

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})
 })
 ```
 

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})

quartz/components/scripts/clipboard.inline.ts

@@ -26,7 +26,7 @@ document.addEventListener("nav", () => {
           },
           (error) => console.error(error),
         )
-      })
+      }, {passive: true})
       els[i].prepend(button)
     }
   }

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})

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()
 

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})

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})

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) {

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 {

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()
 

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})
 }

quartz/plugins/transformers/ofm.ts

@@ -508,7 +508,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
             await mermaid.run({
               querySelector: '.mermaid'
             })
-          });
+          }, {passive: true});
           `,
           loadTime: "afterDOMReady",
           moduleType: "module",