Changeset 2b52bfb in Klonkt

Timestamp:

06/14/2026 04:07:28 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

89d6536

Parents:

942028f

Message:

audio: mobile — back button closes the now-playing sheet (history pushState/popstate)

On mobile, openSheet pushes a history entry; the phone's back button (popstate)
then closes the sheet first instead of navigating away. UI close (X/swipe/backdrop/
Esc) pops the entry itself via history.back() so the balance stays correct. Gated
on isMobileView() (desktop unchanged). audio-player.js ?v=7 -> ?v=8.

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

@@ -496 +496 @@
   // 7. Sheet expand/close + drag-down-to-close
   // ============================================================
+  // Back-knop sluit de sheet op mobiel: bij openen pushen we een history-entry,
+  // zodat de telefoon-terugknop (popstate) eerst de sheet sluit i.p.v. de pagina
+  // te verlaten. We balanceren 'm bij een UI-sluiting via history.back().
+  let sheetHistoryPushed = false;
+
   function openSheet() {
+    if (sheet.classList.contains('is-open')) return;
     sheet.classList.add('is-open');
     sheet.setAttribute('aria-hidden', 'false');
     document.body.classList.add('audio-sheet-locked');
-  }
-  function closeSheet() {
+    if (isMobileView()) {
+      try { history.pushState({ pcmsSheet: true }, ''); sheetHistoryPushed = true; } catch (e) {}
+    }
+  }
+  function closeSheet(fromPopstate) {
+    if (!sheet.classList.contains('is-open')) return;
     sheet.classList.remove('is-open');
     sheet.setAttribute('aria-hidden', 'true');
@@ -507 +517 @@
     sheetPanel.style.removeProperty('--pcms-drag-y');
     sheetBackdrop.style.removeProperty('--pcms-sheet-progress');
-  }
+    // UI-sluiting (X / swipe / backdrop / Esc): pop onze eigen history-entry zodat
+    // de volgende terug-knop weer normaal navigeert. Bij een popstate-sluiting
+    // (de terug-knop zelf) is de entry al gepopt.
+    const wasPushed = sheetHistoryPushed;
+    sheetHistoryPushed = false;
+    if (wasPushed && !fromPopstate) { try { history.back(); } catch (e) {} }
+  }
+  window.addEventListener('popstate', () => {
+    if (sheet.classList.contains('is-open')) closeSheet(true);
+  });
   expandTrigger.addEventListener('click', openSheet);
-  sheetClose.addEventListener('click', closeSheet);
-  sheetBackdrop.addEventListener('click', closeSheet);
+  sheetClose.addEventListener('click', () => closeSheet());
+  sheetBackdrop.addEventListener('click', () => closeSheet());
   document.addEventListener('keydown', (e) => {
     if (e.key === 'Escape' && sheet.classList.contains('is-open')) closeSheet();

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=7"></script>
+<script src="/assets/js/audio-player.js?v=8"></script>
 <% if (site && site.enable_audio_player && audioTracks && audioTracks.length > 0) { %>
   <script>window.PCMS_SITE_TRACKS = <%- JSON.stringify(audioTracks) %>;</script>