Changeset 89d6536 in Klonkt

Timestamp:

06/14/2026 04:20:02 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

c80e78b

Parents:

2b52bfb

Message:

fix: track buttons via event delegation (survives HTMX history-restore after back button)

Regression from the back-button sheet: popstate let HTMX restore #pcms-main
(hx-history-elt) with data-pcms-attached baked in but listeners gone -> the
per-button attach skipped them -> dead buttons after "back". Now: one delegated
body listener (as playlist-delete already did). data-pcms-attached + htmx:afterSettle
rebinding removed. audio-player.js ?v=8 -> ?v=9.

Co-Authored-By: Claude <noreply@…>

Location:

src

Files:

• assets/js/audio-player.js (modified) (2 diffs)
• views/shell.ejs (modified) (1 diff)

src/assets/js/audio-player.js

@@ -13 +13 @@
  *  - body.has-audio-player adds bottom padding when player visible
  *  - body.audio-sheet-locked prevents body scroll when sheet open
- *  - Survives HTMX swaps via htmx:afterSettle re-attach
+ *  - Survives HTMX swaps + history-restores via event delegation on document.body
  *
  * Singleton — guards against double-init.
@@ -593 +593 @@
   // wrapper. For the other three the data is on the button itself. The
   // handler reads from button-first, falls back to wrapper.
-  function attachListeners() {
-    const playBtns = document.querySelectorAll(
-      '.post-audio-track .pat-play, ' +
-      '.post-album-tracks .pat-row, ' +
-      '.post-album-cover-btn, ' +
-      '.post-album-playall'
-    );
-    if (playBtns.length) console.log('[pcms-audio] attaching to', playBtns.length, 'play buttons');
-
-    playBtns.forEach((btn) => {
-      if (btn.dataset.pcmsAttached) return;
-      btn.dataset.pcmsAttached = '1';
-
-      btn.addEventListener('click', (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        // Resolve metadata: button-first, then closest .post-audio-track wrapper
-        // (only inline single-track widgets put the data on the wrapper).
-        const wrapper = btn.closest('.post-audio-track');
-        const albumId   = btn.dataset.pcmsAlbumId  || (wrapper && wrapper.dataset.pcmsAlbumId);
-        const trackData = btn.dataset.pcmsTrack    || (wrapper && wrapper.dataset.pcmsTrack);
-        const trackUrl  = btn.dataset.pcmsTrackUrl || (wrapper && wrapper.dataset.pcmsTrackUrl);
-        console.log('[pcms-audio] click', { btn: btn.className, albumId, trackUrl, hasTrackData: !!trackData });
-
-        if (albumId) {
-          const album = document.getElementById(albumId);
-          if (!album) { console.error('[pcms-audio] album not found:', albumId); return; }
-          try {
-            const tracks = JSON.parse(album.dataset.pcmsAlbum);
-            // Start at the clicked track if we know its URL, else start at 0
-            // (cover-btn and playall both want to start from the beginning).
-            const startIdx = trackUrl ? tracks.findIndex(t => t.url === trackUrl) : 0;
-            setQueue(tracks, startIdx >= 0 ? startIdx : 0, { albumName: album.dataset.pcmsAlbumTitle || '' });
-          } catch(err) { console.error('[pcms-audio] bad album JSON', err, album.dataset.pcmsAlbum); }
-        } else if (trackData) {
-          try {
-            const t = JSON.parse(trackData);
-            setQueue([t], 0);
-          } catch(err) { console.error('[pcms-audio] bad track JSON', err, trackData); }
-        } else if (trackUrl) {
-          // Fallback: at minimum we have the signed URL
-          setQueue([{ url: trackUrl, title: 'Track', artist: '', cover: '' }], 0);
-        } else {
-          console.error('[pcms-audio] no track data or url on button or wrapper', btn);
-        }
-      });
-    });
-  }
-
-  attachListeners();
-  document.body.addEventListener('htmx:afterSettle', attachListeners);
+  // Event-delegation op document.body i.p.v. per-knop listeners. Dit overleeft
+  // HTMX history-restores: de mobiele terug-knop (popstate) laat HTMX #pcms-main
+  // terugzetten uit z'n snapshot; een per-element `data-pcms-attached`-vlag zou
+  // dan dode knoppen geven (vlag ingebakken in de snapshot, listener weg). Eén
+  // gedelegeerde listener werkt ongeacht hoe vaak de DOM ge(her)swapt wordt.
+  const PLAY_SELECTOR =
+    '.post-audio-track .pat-play, .post-album-tracks .pat-row, .post-album-cover-btn, .post-album-playall';
+  document.body.addEventListener('click', (e) => {
+    const btn = e.target.closest(PLAY_SELECTOR);
+    if (!btn) return;
+    e.preventDefault();
+    e.stopPropagation();
+    // Resolve metadata: button-first, then closest .post-audio-track wrapper
+    // (only inline single-track widgets put the data on the wrapper).
+    const wrapper = btn.closest('.post-audio-track');
+    const albumId   = btn.dataset.pcmsAlbumId  || (wrapper && wrapper.dataset.pcmsAlbumId);
+    const trackData = btn.dataset.pcmsTrack    || (wrapper && wrapper.dataset.pcmsTrack);
+    const trackUrl  = btn.dataset.pcmsTrackUrl || (wrapper && wrapper.dataset.pcmsTrackUrl);
+    console.log('[pcms-audio] click', { btn: btn.className, albumId, trackUrl, hasTrackData: !!trackData });
+
+    if (albumId) {
+      const album = document.getElementById(albumId);
+      if (!album) { console.error('[pcms-audio] album not found:', albumId); return; }
+      try {
+        const tracks = JSON.parse(album.dataset.pcmsAlbum);
+        // Start at the clicked track if we know its URL, else start at 0
+        // (cover-btn and playall both want to start from the beginning).
+        const startIdx = trackUrl ? tracks.findIndex(t => t.url === trackUrl) : 0;
+        setQueue(tracks, startIdx >= 0 ? startIdx : 0, { albumName: album.dataset.pcmsAlbumTitle || '' });
+      } catch(err) { console.error('[pcms-audio] bad album JSON', err, album.dataset.pcmsAlbum); }
+    } else if (trackData) {
+      try {
+        const t = JSON.parse(trackData);
+        setQueue([t], 0);
+      } catch(err) { console.error('[pcms-audio] bad track JSON', err, trackData); }
+    } else if (trackUrl) {
+      // Fallback: at minimum we have the signed URL
+      setQueue([{ url: trackUrl, title: 'Track', artist: '', cover: '' }], 0);
+    } else {
+      console.error('[pcms-audio] no track data or url on button or wrapper', btn);
+    }
+  });
 
   // ============================================================

src/views/shell.ejs

@@ -277 +277 @@
      ?v=N — cache-buster: bump bij elke audio-player.js wijziging zodat
      Cloudflare (max-age=1y) niet de oude versie blijft serveren. -->
-<script src="/assets/js/audio-player.js?v=8"></script>
+<script src="/assets/js/audio-player.js?v=9"></script>
 <% if (site && site.enable_audio_player && audioTracks && audioTracks.length > 0) { %>
   <script>window.PCMS_SITE_TRACKS = <%- JSON.stringify(audioTracks) %>;</script>