Changeset 54ee51c in Klonkt for src/assets/js/mod/chrome.js

Timestamp:

08/07/2026 01:38:51 PM (5 weeks ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

52fc278

Parents:

0475b13

git-author:

Robin <roboburr@…> (08/07/2026 01:07:55 PM)

git-committer:

roboburr <roboburr@…> (08/07/2026 01:38:51 PM)

Message:

De profielkop, de track-editor en het data-kanaal (shaer-bqr, stap 3c)

PROFIELKOP naar mod/chrome.js: chrome.ejs neemt die partial op, dus hij zit in
de OOB-swap en kwam bij elke navigatie opnieuw binnen. Hoort bij de chrome, niet
bij een pagina.

TRACK-EDITOR (475 regels, geen interpolatie) naar een eigen module. admin-audio
neemt hem op, dus die route vraagt om 'admin-audio track-editor' -- een pagina
mag meer dan een module willen.

HET DATA-KANAAL, want de rest heeft het nodig. Een module is een statisch
bestand, dus er kan geen EJS in; alles wat een script van de server nodig heeft
gaat via partials/page-data.ejs en wordt gelezen met pageData() uit mod/lib.js.

Dat is een script-element en toch geen CSP-probleem: een script met een ander
type dan JavaScript wordt niet uitgevoerd en niet opgehaald, dus script-src heeft
er niets over te zeggen. Het werkt daarmee ook in inhoud die via htmx binnenkomt.

Twee dingen die daar misgaan als je ze niet doet, en allebei nagemeten:

De kleiner-dan wordt ontsnapt. Zonder dat sluit een sluitende script-tag IN de
gegevens het blok voortijdig af en staat de rest als HTML op de pagina.
Getoetst met precies zo'n waarde.

pageData() leest ELKE KEER opnieuw en onthoudt niets. Bij een htmx-navigatie
wisselt de inhoud terwijl de module blijft leven, dus een blok dat je bij het
laden vasthoudt is een pagina later verouderd.

Alle templates compileren.

File:

• src/assets/js/mod/chrome.js (modified) (1 diff)

src/assets/js/mod/chrome.js

@@ -41 +41 @@
   });
 })();
+
+// ── de profielkop ──────────────────────────────────────────────
+// Zat inline in partials/profile-header.ejs, en die partial zit IN de
+// OOB-chrome -- dus hij kwam bij elke navigatie opnieuw binnen.
+(function () {
+  if (window.__pcmsFediFollowWired) return;
+  window.__pcmsFediFollowWired = true;
+  function modal() { return document.querySelector('.pf-follow'); }
+  function closeM() { var m = modal(); if (m) m.classList.remove('is-open'); }
+  function go() {
+    var m = modal(); if (!m) return;
+    var inp = m.querySelector('.pf-follow-input'), raw = inp ? inp.value : '';
+    // Strip a full @user@host handle (and any scheme/path) down to the server host.
+    var server = String(raw || '').trim().replace(/^@?[^@\s]*@/, '').replace(/^https?:\/\//i, '').replace(/\/.*$/, '').trim();
+    if (!server) { if (inp) inp.focus(); return; }
+    try { localStorage.setItem('pcmsFediServer', server); } catch (e) {}
+    var actor = location.origin + '/ap/users/' + encodeURIComponent(m.getAttribute('data-actor-slug') || '');
+    location.href = 'https://' + server + '/authorize_interaction?uri=' + encodeURIComponent(actor);
+  }
+  document.addEventListener('click', function (e) {
+    var b = e.target.closest && e.target.closest('.profile-fedi-link');
+    if (b) { e.preventDefault();
+      var m = modal(); if (!m) return;
+      m.setAttribute('data-actor-slug', b.getAttribute('data-fedi-actor-slug') || '');
+      var inp = m.querySelector('.pf-follow-input');
+      try { if (inp && !inp.value) inp.value = localStorage.getItem('pcmsFediServer') || ''; } catch (e2) {}
+      m.classList.add('is-open');
+      setTimeout(function () { if (inp) inp.focus(); }, 30);
+      return;
+    }
+    if (e.target.closest && e.target.closest('.pf-follow-go')) { e.preventDefault(); go(); return; }
+    if (e.target.closest && e.target.closest('.pf-follow-cancel')) { e.preventDefault(); closeM(); return; }
+    var open = document.querySelector('.pf-follow.is-open');
+    if (open && e.target === open) closeM(); /* click on backdrop */
+  });
+  document.addEventListener('keydown', function (e) {
+    var m = document.querySelector('.pf-follow.is-open'); if (!m) return;
+    if (e.key === 'Escape') { closeM(); }
+    else if (e.key === 'Enter' && e.target.closest && e.target.closest('.pf-follow')) { e.preventDefault(); go(); }
+  });
+})();
+
+/* Profile summary: click the avatar to open a modal with photo + details. */
+(function () {
+  if (window.__pcmsLightboxWired) return; window.__pcmsLightboxWired = true;
+  function close() { var m = document.querySelector('.pf-summary.is-open'); if (m) m.classList.remove('is-open'); }
+  document.addEventListener('click', function (e) {
+    if (e.target.closest && e.target.closest('.pf-summary-close')) { e.preventDefault(); close(); return; }
+    var open = document.querySelector('.pf-summary.is-open');
+    if (open && e.target === open) { close(); return; } /* click on backdrop */
+    var t = e.target.closest && e.target.closest('.profile-photo[data-pf-summary]');
+    if (!t) return;
+    e.preventDefault();
+    var root = (t.closest && t.closest('#pcms-chrome')) || document;
+    var modal = root.querySelector('.pf-summary') || document.querySelector('.pf-summary');
+    if (modal) modal.classList.add('is-open');
+  });
+  document.addEventListener('keydown', function (e) { if (e.key === 'Escape') close(); });
+})();