Changeset 4b5db37 in Klonkt

Timestamp:

08/07/2026 06:33:54 PM (5 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

da84110

Parents:

c1df3e9

git-author:

Robin <roboburr@…> (08/07/2026 06:33:41 PM)

git-committer:

Robin <roboburr@…> (08/07/2026 06:33:54 PM)

Message:

Modules herstarten per paginawissel: de editor leeft weer na een terugkeer (shaer-5s1)

Drie klachten, een wortel. De oude inline scripts draaiden bij ELKE render;
een ES-module draait zijn top-level EEN keer per sessie, en de bootstrap
importeert een geladen module nooit opnieuw. Dus:

• /posts/new na een htmx-terugkeer: geen toolbar, geen serialisatie -- het verborgen veld kreeg de chips nooit terug (shortcodes 'opgegeten')
• /admin/audio na een terugkeer: de eigen kopieerhandler dood, en de klik viel door naar de GEDELEGEERDE handler van admin-media, die voor mediapaden terecht location.origin voorplakt -- vandaar ​https://site[[track:uuid]] op het klembord

De afspraak is nu: een module die per render moet draaien exporteert init(),
en de bootstrap roept die aan bij elke wissel waarop de module actief is.
Modules zonder init houden hun oude gedrag. Listeners op document/window
overleven de swap met closures naar dode elementen; makeSweeper in lib.js
veegt bij elke init de vorige lichting weg. Gedelegeerde handlers die
bewust blijven leven (media/videos) krijgen een paginawacht, want data-copy
betekent daar een PAD en elders een shortcode.

Omgezet: post-edit, admin-audio, admin-playlists. Bewaakt: admin-media,
admin-videos. playlist-editor en track-editor waren al swap-bestendig
(globale functie, gedelegeerd met eigen guards).

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

Location:

src

Files:

• assets/js/mod/admin-audio.js (modified) (3 diffs)
• assets/js/mod/admin-media.js (modified) (1 diff)
• assets/js/mod/admin-playlists.js (modified) (2 diffs)
• assets/js/mod/admin-videos.js (modified) (1 diff)
• assets/js/mod/lib.js (modified) (1 diff)
• assets/js/mod/post-edit.js (modified) (5 diffs)
• views/shell.ejs (modified) (2 diffs)

src/assets/js/mod/admin-audio.js

@@ -5 +5 @@
 // link BINNEN de site binnenkomt (shaer-0i6).
 
-import { pageData } from './lib.js';
-
-  const T = pageData();
+import { pageData, makeSweeper } from './lib.js';
+
+// Zie post-edit.js: init() per paginawissel, de veger haalt de window-
+// listeners van de vorige lichting weg (shaer-5s1).
+const doc = makeSweeper();
+let T = {};
+
+export function init() {
+  doc.sweep();
+  T = pageData();
+  run();
+}
+
+function run() {
 
 (function() {
@@ -197 +208 @@
   // explicitly handles them.
   ['dragover', 'drop'].forEach(ev => {
-    window.addEventListener(ev, e => {
+    doc.on(window, ev, e => {
       // Allow drops INSIDE the dropzone — its own listener handles those.
       if (dropzone.contains(e.target)) return;
@@ -441 +452 @@
   });
 })();
+}

src/assets/js/mod/admin-media.js

@@ -9 +9 @@
 (function () {
   if (window.__mediaWired) return; window.__mediaWired = true;
-  var T = pageData();
+  // Gedelegeerd op document, dus dit overleeft elke paginawissel -- ook op
+  // pagina's waar [data-copy] iets ANDERS betekent (audio en playlists: een
+  // shortcode, geen pad). Zonder deze wacht kaapt dit daar de kopieerklik en
+  // plakt er een origin voor (shaer-5s1). T per klik gelezen, want pageData
+  // wisselt mee met de pagina.
+  function active() { return (document.body.getAttribute('data-js') || '').split(/\s+/).indexOf('admin-media') !== -1; }
   document.addEventListener('click', function (e) {
+    if (!active()) return;
+    var T = pageData();
     var c = e.target.closest('[data-copy]');
     if (c) {

src/assets/js/mod/admin-playlists.js

@@ -6 +6 @@
 import { pageData } from './lib.js';
 
+// Element-bedrading per render, dus init() per paginawissel (shaer-5s1).
+export function init() { run(); }
+
+function run() {
 (function() {
   const _d = pageData();
@@ -74 +78 @@
   })();
 })();
+}

src/assets/js/mod/admin-videos.js

@@ -9 +9 @@
 (function () {
   if (window.__videosWired) return; window.__videosWired = true;
-  var T = pageData();
+  // Gedelegeerd op document, dus dit overleeft elke paginawissel -- ook op
+  // pagina's waar [data-copy] iets ANDERS betekent (audio en playlists: een
+  // shortcode, geen pad). Zonder deze wacht kaapt dit daar de kopieerklik en
+  // plakt er een origin voor (shaer-5s1). T per klik gelezen, want pageData
+  // wisselt mee met de pagina.
+  function active() { return (document.body.getAttribute('data-js') || '').split(/\s+/).indexOf('admin-videos') !== -1; }
   document.addEventListener('click', function (e) {
+    if (!active()) return;
+    var T = pageData();
     var c = e.target.closest('[data-copy]');
     if (c) {

src/assets/js/mod/lib.js

@@ -35 +35 @@
 
 /**
+ * Listeners op document en window overleven een paginawissel; de pagina zelf
+ * niet. Een module die per navigatie opnieuw start (export init) registreert
+ * zulke listeners hier, en veegt bij elke start de vorige lichting weg --
+ * anders stapelen ze, elk met een closure naar elementen die al weg zijn.
+ *
+ * Listeners op ELEMENTEN hoeven hier niet doorheen: die sterven met hun
+ * element bij de swap. Alleen wat het document overleeft, moet geveegd.
+ */
+export function makeSweeper() {
+  let list = [];
+  return {
+    on(target, ev, fn, opts) { target.addEventListener(ev, fn, opts); list.push([target, ev, fn, opts]); },
+    sweep() { for (const [t, ev, fn, opts] of list) t.removeEventListener(ev, fn, opts); list = []; },
+  };
+}
+
+/**
  * Een tekst veilig in HTML zetten.
  *

src/assets/js/mod/post-edit.js

@@ -5 +5 @@
 // het houdt een apostrof in een vertaling uit de HTML die hier geplakt wordt.
 
-import { pageData, esc } from './lib.js';
-
-const T = pageData();
+import { pageData, esc, makeSweeper } from './lib.js';
+
+// De oude inline scripts draaiden bij ELKE render; een module draait zijn
+// top-level een keer per sessie. Vandaar init(): de bootstrap roept hem aan
+// bij elke paginawissel waarop deze module actief is, en de veger haalt eerst
+// de document/window-listeners van de vorige pagina weg -- die overleven de
+// swap, met closures naar elementen die al verdwenen zijn (shaer-5s1).
+const doc = makeSweeper();
+let T = {};
+let _barObserver = null;
+
+export function init() {
+  doc.sweep();
+  if (_barObserver) { _barObserver.disconnect(); _barObserver = null; }
+  T = pageData();
+  run();
+}
+
+function run() {
 
           (function () {
@@ -631 +647 @@
   }
   function toggleFullscreen() { if (isFs()) closeFs(); else openFs(); }
-  window.addEventListener('popstate', function () { if (isFs()) applyFs(false); });
+  doc.on(window, 'popstate', function () { if (isFs()) applyFs(false); });
   if (fsBtn) fsBtn.addEventListener('click', toggleFullscreen);
   var fsDoneBtn = document.getElementById('pe-fs-done');
   if (fsDoneBtn) fsDoneBtn.addEventListener('click', closeFs);
-  document.addEventListener('keydown', (e) => {
+  doc.on(document, 'keydown', (e) => {
     if (e.key === 'Escape' && isFs()) { e.preventDefault(); closeFs(); }
   });
@@ -663 +679 @@
     if (bqBtn) bqBtn.classList.toggle('is-active', !!blockquoteAncestor());
   }
-  document.addEventListener('selectionchange', () => {
+  doc.on(document, 'selectionchange', () => {
     if (document.activeElement === editor) updateToolbarState();
   });
@@ -884 +900 @@
       }
     });
-    document.addEventListener('keydown', (e) => {
+    doc.on(document, 'keydown', (e) => {
       if (!trackPicker.hidden && e.key === 'Escape') {
         e.preventDefault();
@@ -1092 +1108 @@
   }
   position();
-  window.addEventListener('resize', position);
-  if (vv) { vv.addEventListener('resize', position); vv.addEventListener('scroll', position); }
-  // has-audio-player is toggled via a body class → observe it.
-  try { new MutationObserver(position).observe(document.body, { attributes: true, attributeFilter: ['class'] }); } catch (_) {}
+  doc.on(window, 'resize', position);
+  if (vv) { doc.on(vv, 'resize', position); doc.on(vv, 'scroll', position); }
+  // has-audio-player is toggled via a body class → observe it. De observer
+  // overleeft de swap net als de listeners; init() disconnect de vorige.
+  try { _barObserver = new MutationObserver(position); _barObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] }); } catch (_) {}
 })();
+}

src/views/shell.ejs

@@ -490 +490 @@
   window.__modBoot = true;
 
+  // name -> 1 (aan het laden) of de module-namespace (geladen). Een module
+  // die `init` exporteert draait die bij ELKE paginawissel waarop hij actief
+  // is -- dat is het gedrag van de oude inline scripts, die per render
+  // draaiden. Een module zonder init draait alleen zijn top-level, een keer.
   var loaded = {};
+  function start(name, m) {
+    if (!m || typeof m.init !== 'function') return;
+    try { m.init(); } catch (e) { console.warn('[mod] ' + name + ' init:', e && e.message); }
+  }
   function load() {
     var names = (document.body.getAttribute('data-js') || '').trim().split(/\s+/);
@@ -497 +505 @@
       // kleine letters, cijfers en streepjes; nooit een punt of een schuine
       // streep.
-      if (!name || loaded[name] || !/^[a-z0-9-]+$/.test(name)) return;
+      if (!name || !/^[a-z0-9-]+$/.test(name)) return;
+      if (loaded[name]) { start(name, loaded[name]); return; }
       loaded[name] = 1;
-      import('/assets/js/mod/' + name + '.js').catch(function (e) {
+      import('/assets/js/mod/' + name + '.js').then(function (m) {
+        loaded[name] = m;
+        start(name, m);
+      }).catch(function (e) {
         console.warn('[mod] ' + name + ' laadde niet:', e && e.message);
       });