Changeset 2bd31d6 in Klonkt for src/assets/js/mod/messages.js

Timestamp:

08/08/2026 01:48:05 AM (5 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

50e80ac

Parents:

02c6231

git-author:

Robin <roboburr@…> (08/08/2026 01:47:50 AM)

git-committer:

Robin <roboburr@…> (08/08/2026 01:48:05 AM)

Message:

Zwaaien is een klik, geen paginawissel

Een zwaai is een seintje. Dat de hele pagina ervoor herlaadde -- met een
groene balk bovenaan en je scrollpositie kwijt -- gaf het meer gewicht dan
het heeft.

Nu onderschept mod/messages.js de verzending en stuurt hem met fetch, zoals
like/boost in de Krant al deden. De knoppen maken plaats voor een korte
bevestiging; mislukt het, dan komen ze terug met een schud.

DE VAL HIER, en hij verschilt van like/boost: deze formulieren hebben MEERDERE
verzendknoppen ("Wat leuk!", "Hoe gaat het?", "Terug"), elk met een eigen
name="text". FormData(f) neemt de aangeklikte knop NIET mee -- dat doet de
browser alleen bij een echte verzending. Zonder e.submitter vertrekt er dus
een zwaai zonder tekst. Er is een test die precies dat vastlegt: een verzoek
zonder text moet 400 geven en NIETS versturen.

Het formulier blijft een formulier: zonder JS post het en leidt de route om,
ongewijzigd. De route kiest op X-Requested-With welke van de twee.

Geen aan/uit-knop zoals bij een like: zwaaien valt niet terug te draaien, dus
een toggle zou liegen over wat er kan.

Eigen CSS voor de twee toestanden, want de bestaande klasse nudge bleek
alleen op authorize-interaction opmaak te hebben -- op Berichten deed hij niets
(en doet dat nog steeds niet voor de bookmarklet-knop daar).

5 tests erbij.

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

File:

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

src/assets/js/mod/messages.js

@@ -126 +126 @@
   }
 
+  // Zwaaien ter plekke: een seintje is geen paginawissel.
+  //
+  // Het formulier blijft een echt formulier -- zonder JS post het en leidt de
+  // route om, precies als vroeger. Hier onderscheppen we het en sturen het met
+  // fetch, zoals like/boost in de Krant het al deden.
+  //
+  // LET OP DE VERZENDKNOP. Deze formulieren hebben er MEERDERE ("Wat leuk!",
+  // "Hoe gaat het?", "Terug"), elk met een eigen name="text". FormData(f) neemt
+  // de aangeklikte knop NIET mee -- dat doet de browser alleen bij een echte
+  // verzending. Zonder submitter vertrekt er dus een zwaai zonder tekst, en die
+  // weigert de route. Vandaar submitter, met een terugval op de eerste knop.
+  document.addEventListener('submit', function (e) {
+    var f = e.target.closest && e.target.closest('.msg-wave, .msg-quickreply');
+    if (!f || f.dataset.sending) return;
+    e.preventDefault();
+    var knoppen = [].slice.call(f.querySelectorAll('button'));
+    var knop = e.submitter || knoppen[0];
+    if (!knop) return;
+    f.dataset.sending = '1';
+    knoppen.forEach(function (b) { b.disabled = true; });
+    var body = new URLSearchParams();
+    new FormData(f).forEach(function (v, k) { body.append(k, v); });
+    if (knop.name) body.set(knop.name, knop.value);
+    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 || !j.ok) throw new Error('geweigerd');
+        // Gelukt: de knoppen maken plaats voor de bevestiging. Zwaaien is
+        // eenmalig -- anders dan een like valt het niet terug te draaien, dus
+        // een aan/uit-knop zou liegen over wat er kan.
+        var klaar = document.createElement('span');
+        klaar.className = 'msg-wave-done';
+        klaar.textContent = '👋 ' + (f.dataset.sent || '');
+        f.replaceChildren(klaar);
+      })
+      .catch(function () {
+        // Mislukt: alles terug zoals het was, zodat een tweede poging kan.
+        delete f.dataset.sending;
+        knoppen.forEach(function (b) { b.disabled = false; });
+        f.classList.add('is-failed');
+        setTimeout(function () { f.classList.remove('is-failed'); }, 600);
+      });
+  });
+
   function start() { reindex(); apply(); wireBookmarklet(); }
   start();