Fix website listings stacking update handlers on hash change (#15214)

Register each listing's update handler once

Pages with several listings attached another list.on("updated")
handler to every listing on each URL hash change, so a single update
reran the same work several times. Each listing's inline script called
the handler on DOMContentLoaded and again from its own hashchange
listener. Wiring now runs once per listing id, and one hashchange
listener in quarto-listing.js only applies the hash.

- Wire each listing once, keyed by its id
- Move hash handling into applyListingHash()
- Replace the per-listing hashchange listeners with a single one
- Pin hash, pagination, and update-handler behavior with tests

The hashchange listener dates from #1139, and back/forward between
categories still depends on it. Found while reviewing #9469.

Fixes #15206

Author: cderv

news/changelog-1.11.md

@@ -142,6 +142,7 @@ All changes included in 1.11:
 - ([#15091](https://github.com/quarto-dev/quarto-cli/pull/15091)): Fix page-level `bread-crumbs`, `back-to-top-navigation`, `page-navigation`, `margin-header` and `margin-footer` options not being validated or offered for completion in editors. A page value of the wrong type now fails to render with an error instead of being accepted silently.
 - ([#15091](https://github.com/quarto-dev/quarto-cli/pull/15091)): Fix `open-graph: false` or `twitter-card: false` in page front matter or `_metadata.yml` not disabling Open Graph or Twitter Card metadata for that page when the website enables it.
 - ([#15114](https://github.com/quarto-dev/quarto-cli/pull/15114)): Fix a website category containing backticks showing broken text in the page title block, and a category containing a backslash, such as a Windows path, failing the render or losing its backslashes.
+- ([#15206](https://github.com/quarto-dev/quarto-cli/issues/15206)): Fix website listings attaching another update handler on every URL hash change, and an extra one per additional listing on the same page.
 
 ## Lua API
 

src/project/types/website/listing/website-listing-template.ts

@@ -575,12 +575,6 @@ export function templateJsScript(
       window['quarto-listing-loaded']();
     }
   });
-
-  window.addEventListener('hashchange',() => {
-    if (window['quarto-listing-loaded']) {
-      window['quarto-listing-loaded']();
-    }
-  })
   `;
   return jsScript;
 }

src/resources/projects/website/listing/quarto-listing.js

@@ -10,29 +10,41 @@ window.quartoListingCategory = (category) => {
   }
 };
 
-window["quarto-listing-loaded"] = () => {
-  // Process any existing hash
+const wiredListings = new Set();
+
+// Apply the category and per-listing page stored in the URL hash
+function applyListingHash() {
   const hash = getHash();
+  if (!hash || !window["quarto-listings"]) {
+    return;
+  }
 
-  if (hash) {
-    // If there is a category, switch to that
-    if (hash.category) {
-      // category hash are URI encoded so we need to decode it before processing
-      // so that we can match it with the category element processed in JS
-      activateCategory(decodeURIComponent(hash.category));
-    }
-    // Paginate a specific listing
-    const listingIds = Object.keys(window["quarto-listings"]);
-    for (const listingId of listingIds) {
-      const page = hash[getListingPageKey(listingId)];
-      if (page) {
-        showPage(listingId, page);
-      }
+  // If there is a category, switch to that
+  if (hash.category) {
+    // category hash are URI encoded so we need to decode it before processing
+    // so that we can match it with the category element processed in JS
+    activateCategory(decodeURIComponent(hash.category));
+  }
+  // Paginate a specific listing
+  for (const listingId of Object.keys(window["quarto-listings"])) {
+    const page = hash[getListingPageKey(listingId)];
+    if (page) {
+      showPage(listingId, page);
     }
   }
+}
+
+window["quarto-listing-loaded"] = () => {
+  // Process any existing hash
+  applyListingHash();
+
+  // Each listing calls this once its List is created, so wire each one once
+  for (const listingId of Object.keys(window["quarto-listings"])) {
+    if (wiredListings.has(listingId)) {
+      continue;
+    }
+    wiredListings.add(listingId);
 
-  const listingIds = Object.keys(window["quarto-listings"]);
-  for (const listingId of listingIds) {
     // The actual list
     const list = window["quarto-listings"][listingId];
 
@@ -56,6 +68,8 @@ window["quarto-listing-loaded"] = () => {
   }
 };
 
+window.addEventListener("hashchange", applyListingHash);
+
 window.document.addEventListener("DOMContentLoaded", function (_event) {
   // Attach click handlers to categories
   const categoryEls = window.document.querySelectorAll(

tests/docs/playwright/listings/interactions/.gitignore

@@ -0,0 +1,3 @@
+/.quarto/
+**/*.quarto_ipynb
+/_site/

tests/docs/playwright/listings/interactions/_quarto.yml

@@ -0,0 +1,7 @@
+project:
+  type: website
+
+website:
+  title: "Listing update handlers"
+
+format: html

tests/docs/playwright/listings/interactions/index.qmd

@@ -0,0 +1,22 @@
+---
+title: "Two paginated listings"
+listing:
+  - id: first-listing
+    contents: posts
+    type: default
+    sort: "title asc"
+    page-size: 1
+    categories: true
+    filter-ui: true
+  - id: second-listing
+    contents: posts
+    type: default
+    sort: "title asc"
+    page-size: 1
+---
+
+::: {#first-listing}
+:::
+
+::: {#second-listing}
+:::

tests/docs/playwright/listings/interactions/posts/post-1.qmd

@@ -0,0 +1,7 @@
+---
+title: "Post 1"
+categories: [cat1]
+image: thumb.png
+---
+
+Post 1 content.

tests/docs/playwright/listings/interactions/posts/post-2.qmd

@@ -0,0 +1,7 @@
+---
+title: "Post 2"
+categories: [cat2]
+image: thumb.png
+---
+
+Post 2 content.

tests/docs/playwright/listings/interactions/posts/post-3.qmd

@@ -0,0 +1,7 @@
+---
+title: "Post 3"
+categories: [cat3]
+image: thumb.png
+---
+
+Post 3 content.