Changeset 9eb6e1b in Klonkt for src/assets/js/mod

Timestamp:

09/30/2026 06:41:45 AM (4 hours ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

86cfa1a

Parents:

3ceaef6

Message:

Een fediverse-post ziet eruit als een post, ook in de zoekbalk

Plak je een link in de zoekbalk, dan laadt de uitklaplijst nu de post zelf
in plaats van te zoeken naar de tekst van de link. Dezelfde kaart staat op de
zoekpagina en op /authorize_interaction, dus één render op drie plekken.

DE KAART. Wat eromheen stond is teruggebracht tot een kop met gezicht, de
inhoud, en één rij knoppen: Reageer, Like, Boost en het origineel. Weg zijn de
zin "je reageert op", de aparte knop naar het origineel, de twee grote pillen,
"of reageer:" en het antwoordvenster dat altijd openstond. Antwoorden klapt
open als je erom vraagt; melden staat onderaan en niet in de weg.

Foto's staan in een raster met vaste rijhoogtes. Met verhoudingen groeide het
mee met de breedte, en werd op een desktop de eerste van drie foto's zo hoog
dat de knoppen onder de vouw van de uitklaplijst verdwenen.

EEN INHOUDSWAARSCHUWING WORDT GERESPECTEERD. De oude render toonde alles open,
ook wat de schrijver achter een waarschuwing had gezet.

MOBIEL. Elke knop minstens 44 punten. Op een smal scherm vallen de woorden weg
en blijven de tekens staan, gelijk verdeeld; de woorden blijven bestaan voor
wie het scherm voorgelezen krijgt. Nagemeten op 375 pixels: geen horizontale
overloop, kleinste tikdoel 44, de knoppen in beeld zonder te scrollen.

DE PREVIEW IS COMPACT. Waarderen en boosten kan ter plekke; antwoorden en
melden gaan naar de volle pagina, met ?reply=1 of ?report=1 zodat dat deel
daar al openstaat. Een editor in een uitklaplijst is op een telefoon geen plek
om te schrijven. Zonder JS doet dezelfde link hetzelfde.

/search/remote levert het fragment, achter dezelfde grens als de volle
pagina: alleen wie de site beheert laat ophalen. Die grens weegt hier zwaarder,
want deze route wordt bij elke toetsaanslag geraakt; zonder hem is hij een
haalservice die iedereen deze server op adressen naar keuze laat afsturen.
Voor een bezoeker 204, en dan valt de zoekbalk terug op de gewone suggesties.
Elke toetsaanslag krijgt een volgnummer, zodat een traag antwoord op een oude
vraag niet overschrijft wat je inmiddels hebt getypt.

Waarderen en boosten ter plekke verhuisde van authorize-interaction.js naar
chrome.js: de kaart staat nu op elke pagina, via de zoekbalk. De zoekpagina
stuurde je bij een like eerder weg naar /authorize_interaction.

Onderweg: /authorize_interaction haalt nu ook ondertekend op, net als de
zoekbalk. Anders zegt die pagina "niet gevonden" over een post voor volgers die
de preview wel liet zien.

Getoetst: de preview met de post, ondertekend; wat er in de compacte kaart wel
en niet staat; dat een bezoeker via de preview niets laat ophalen; dat een
zoekterm niets ophaalt; de waarschuwing; het venster op verzoek. Tegenproef:
rechtencheck eruit, waarschuwing genegeerd, compact genegeerd en anoniem
ophalen laten elk hun eigen toets omvallen. Volledige suite 1283 groen.

Het gedrag in chrome.js is in de browser nagelopen met een nagebootste
server: herkennen, laden, invoegen, de volgorde bij een traag antwoord, de
terugval bij 204, waarderen en boosten heen en terug, en het antwoordvenster
open en dicht met de focus op de goede plek.

shaer-utpi

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

Location:

src/assets/js/mod

Files:

• authorize-interaction.js (modified) (1 diff)
• chrome.js (modified) (2 diffs)

src/assets/js/mod/authorize-interaction.js

@@ -41 +41 @@
 // ── volgend blok ──
 
-/* Like/Boost toggle in place — POST via fetch, flip the button, stay on the page. */
-(function(){
-  if (window.__fediReactWired) return; window.__fediReactWired = true;
-  document.addEventListener('submit', function(e){
-    var f = e.target.closest && e.target.closest('.fedi-react-form');
-    if (!f) return;
-    e.preventDefault();
-    var btn = f.querySelector('button'); if (!btn || btn.disabled) return;
-    btn.disabled = true;
-    var body = new URLSearchParams();
-    new FormData(f).forEach(function(v, k){ body.append(k, v); });
-    fetch(f.action, { method: 'POST', body: body, headers: { 'X-Requested-With': 'fetch' }, credentials: 'same-origin' })
-      .then(function(r){ return r.ok ? r.json() : null; })
-      .then(function(j){
-        if (j) {
-          var on = !!j.on;
-          btn.classList.toggle('is-on', on);
-          var lbl = btn.querySelector('.fedi-bigact-label');
-          if (lbl) lbl.textContent = on ? (btn.getAttribute('data-on') || lbl.textContent) : (btn.getAttribute('data-off') || lbl.textContent);
-        }
-      })
-      .catch(function(){})
-      .then(function(){ btn.disabled = false; });
-  });
-})();
+/* Waarderen en boosten ter plekke staat sinds de herbouw van de kaart in
+   chrome.js: de kaart staat nu ook in de zoekbalk, op elke pagina. */
 }

src/assets/js/mod/chrome.js

@@ -161 +161 @@
     box.innerHTML = html;
   }
-  var _sTimer;
+  // Een ADRES is geen zoekterm (shaer-utpi). Dezelfde regel als lookupUri in
+  // routes/search.js: een schema is verplicht, anders wordt zoeken naar
+  // "soundfabrics.nl" een netwerkverzoek. De server beslist daarna nog eens,
+  // met de rechten erbij; dit scheelt alleen een vraag die toch nee oplevert.
+  function lookupUri(q) {
+    if (!/^https?:\/\//i.test(q) || /\s/.test(q)) return null;
+    try { var u = new URL(q); return u.hostname.indexOf('.') < 0 ? null : u.href; } catch (e) { return null; }
+  }
+  function allLink(ov, q) {
+    var action = (ov && ov.getAttribute('data-action')) || '/search';
+    return '<a class="ss-all" href="' + esc(action) + '?q=' + encodeURIComponent(q) + '">' + esc(_st().all) + '</a>';
+  }
+  function fetchSuggest(box, q, ov, seq) {
+    var url = (ov && ov.getAttribute('data-suggest')) || '/search/suggest';
+    fetch(url + '?q=' + encodeURIComponent(q))
+      .then(function(r){ return r.ok ? r.json() : null; })
+      .then(function(d){ if (d && seq === _sSeq) renderSuggest(box, d, q, ov); })
+      .catch(function(){});
+  }
+  // Elke toetsaanslag krijgt een volgnummer. Een ophaling van een andere
+  // server duurt soms seconden; zonder nummer overschrijft een traag antwoord
+  // op een oude vraag wat je inmiddels hebt getypt.
+  var _sTimer, _sSeq = 0;
   document.addEventListener('input', function(e) {
     var inp = e.target.closest && e.target.closest('#search-overlay input[name="q"]');
@@ -168 +190 @@
     if (!box) return;
     var q = inp.value.trim();
+    var seq = ++_sSeq;
     clearTimeout(_sTimer);
     if (q.length < 2) { box.innerHTML = ''; return; }
+    var ov = document.getElementById('search-overlay');
+    var address = lookupUri(q);
+    if (!address) { _sTimer = setTimeout(function() { fetchSuggest(box, q, ov, seq); }, 200); return; }
+    // Een geplakt adres: de post zelf, niet de tekst van de link doorzocht.
+    box.innerHTML = '<div class="ss-remote-loading">' + esc(_st().looking) + '</div>';
     _sTimer = setTimeout(function() {
-      var ov = document.getElementById('search-overlay');
-      var url = (ov && ov.getAttribute('data-suggest')) || '/search/suggest';
-      fetch(url + '?q=' + encodeURIComponent(q))
-        .then(function(r){ return r.ok ? r.json() : null; })
-        .then(function(d){ if (d) renderSuggest(box, d, q, ov); })
-        .catch(function(){});
-    }, 200);
-  });
-  // Click on a suggestion → close the overlay (the link/boost handles navigation).
+      var url = (ov && ov.getAttribute('data-remote')) || '/search/remote';
+      fetch(url + '?q=' + encodeURIComponent(address), { credentials: 'same-origin', headers: { 'X-Requested-With': 'fetch' } })
+        .then(function(r) {
+          if (seq !== _sSeq) return;
+          // 204: geen recht om op te halen (of toch geen adres). Dan is het
+          // gewoon een zoekterm en krijg je de gewone suggesties.
+          if (r.status === 204 || !r.ok) { fetchSuggest(box, q, ov, seq); return; }
+          return r.text().then(function(html) { if (seq === _sSeq) box.innerHTML = html + allLink(ov, q); });
+        })
+        .catch(function() { if (seq === _sSeq) fetchSuggest(box, q, ov, seq); });
+    }, 300);
+  });
+  // Een klik op een suggestie sluit de overlay, want de link gaat ergens heen.
+  // Behalve wat in een nieuw tabblad opent (het origineel, een profiel): dan
+  // blijf je hier, en hoort de kaart er nog te staan als je terugkomt.
   document.addEventListener('click', function(e) {
-    if (e.target.closest && e.target.closest('#search-suggest a')) { var o = overlay(); if (o) o.hidden = true; }
+    var a = e.target.closest && e.target.closest('#search-suggest a');
+    if (a && a.getAttribute('target') !== '_blank') { var o = overlay(); if (o) o.hidden = true; }
+  });
+})();
+
+// ── De kaart van een post van een andere server ─────────────────────────
+// Staat hier en niet in authorize-interaction.js, want de kaart staat nu op
+// drie plekken: de live-preview (elke pagina, via de zoekbalk), de zoekpagina
+// en /authorize_interaction. Alles luistert op document, dus een kaart die
+// later binnenkomt (de preview, een htmx-wissel) doet vanzelf mee.
+(function() {
+  if (window.__remoteCardWired) return; window.__remoteCardWired = true;
+
+  // Waarderen en boosten ter plekke: POST via fetch, de knop omzetten, blijven
+  // waar je bent. Zonder JS doet het formulier hetzelfde met een omweg.
+  document.addEventListener('submit', function(e) {
+    var f = e.target.closest && e.target.closest('.fedi-react-form');
+    if (!f) return;
+    e.preventDefault();
+    var btn = f.querySelector('button'); if (!btn || btn.disabled) return;
+    btn.disabled = true;
+    var body = new URLSearchParams();
+    new FormData(f).forEach(function(v, k) { body.append(k, v); });
+    fetch(f.action, { method: 'POST', body: body, headers: { 'X-Requested-With': 'fetch' }, credentials: 'same-origin' })
+      .then(function(r) { return r.ok ? r.json() : null; })
+      .then(function(j) {
+        if (!j) return;
+        var on = !!j.on;
+        btn.classList.toggle('is-on', on);
+        btn.setAttribute('aria-pressed', on ? 'true' : 'false');
+        var lbl = btn.querySelector('.rp-act-label');
+        if (lbl) lbl.textContent = on ? (btn.getAttribute('data-on') || lbl.textContent) : (btn.getAttribute('data-off') || lbl.textContent);
+      })
+      .catch(function() {})
+      .then(function() { btn.disabled = false; });
+  });
+
+  // Antwoorden klapt open waar de kaart staat. Staat er geen venster (de
+  // preview), dan volgt de knop gewoon zijn link naar de volle pagina, met het
+  // venster daar al open.
+  document.addEventListener('click', function(e) {
+    var open = e.target.closest && e.target.closest('[data-rp-reply]');
+    var close = !open && e.target.closest && e.target.closest('[data-rp-reply-close]');
+    if (!open && !close) return;
+    var panel = document.getElementById('rp-reply');
+    if (!panel) return;
+    e.preventDefault();
+    var btn = document.querySelector('[data-rp-reply][aria-controls="rp-reply"]');
+    var show = !!open && panel.hidden;
+    panel.hidden = !show;
+    if (btn) btn.setAttribute('aria-expanded', show ? 'true' : 'false');
+    if (show) {
+      var ed = panel.querySelector('.re-editor, textarea');
+      if (ed) ed.focus();
+      // Op een telefoon staat het venster vaak onder de vouw.
+      if (panel.scrollIntoView) panel.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    } else if (btn) {
+      btn.focus();
+    }
   });
 })();