Changeset 2bd31d6 in Klonkt

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@…>

Files:

• src/assets/js/mod/messages.js (modified) (1 diff)
• src/routes/posts.js (modified) (1 diff)
• src/views/pages/messages.ejs (modified) (1 diff)
• src/views/partials/msg-item.ejs (modified) (2 diffs)
• test/messages-wave.test.js (added)

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();

src/routes/posts.js

@@ -973 +973 @@
   const to = String(req.body.to || '').trim();
   const text = String(req.body.text || '').trim().slice(0, 200);
-  if (!site || !/^https?:\/\//i.test(to) || !text) return res.redirect(back + '?error=quickreply');
+  // Zwaaien is een seintje, en een seintje hoort de pagina niet te herladen.
+  // De module stuurt hem met X-Requested-With: fetch en krijgt JSON terug;
+  // zonder JS blijft het formulier gewoon posten en omleiden.
+  const viaFetch = req.get('X-Requested-With') === 'fetch';
+  const mis = (reden) => (viaFetch ? res.status(400).json({ ok: false, error: reden }) : res.redirect(back + '?error=' + reden));
+  if (!site || !/^https?:\/\//i.test(to) || !text) return mis('quickreply');
   try {
     const r = await ActivityPubService.deliverDirectNote(site, { recipients: [to], text, wave: true });
-    if (r) return res.redirect(back + '?success=wave_sent');
+    if (r) return viaFetch ? res.json({ ok: true }) : res.redirect(back + '?success=wave_sent');
   } catch { /* fall through */ }
-  res.redirect(back + '?error=quickreply');
+  return mis('quickreply');
 });
 

src/views/pages/messages.ejs

@@ -162 +162 @@
   .msg-wave button { line-height: 1.2; }
 
+  /* Zwaaien gebeurt ter plekke (mod/messages.js). Twee toestanden na de klik:
+     gelukt, dan vervangt de bevestiging de knoppen -- en mislukt, dan komen de
+     knoppen terug met een schud, zodat een tweede poging voor de hand ligt.
+     De bestaande klasse `nudge` kon hier niet voor dienen: die heeft alleen
+     CSS op authorize-interaction, dus op deze pagina zou hij niets doen. */
+  .msg-wave-done { font-size: .82rem; color: var(--ink-soft, #888); white-space: nowrap; }
+  .msg-wave.is-failed, .msg-quickreply.is-failed { animation: msg-wave-shake .4s ease; }
+  @keyframes msg-wave-shake {
+    0%, 100% { transform: translateX(0); }
+    25% { transform: translateX(-4px); }
+    75% { transform: translateX(4px); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .msg-wave.is-failed, .msg-quickreply.is-failed { animation: none; outline: 2px solid var(--accent); }
+  }
+
   @media (max-width: 560px) {
     /* Op een telefoon is 40px avatar per bubbel puur verlies: de naam staat er

src/views/partials/msg-item.ejs

@@ -70 +70 @@
                   seintje (FEP-633c), en die twee horen niet op een hoop. %>
               <% if (_rt.actorUri) { %>
-                <form method="post" action="<%= (typeof siteUrlBase !== 'undefined' ? siteUrlBase : '') %>/messages/quick-reply" class="msg-wave">
+                <form method="post" action="<%= (typeof siteUrlBase !== 'undefined' ? siteUrlBase : '') %>/messages/quick-reply" class="msg-wave" data-sent="<%= t('msg.wave_sent') %>">
                   <input type="hidden" name="to" value="<%= _rt.actorUri %>">
                   <button class="btn small" name="text" value="&#128075;" title="<%= t('msg.wave_back') %>">&#128075;</button>
@@ -167 +167 @@
             <% } else if ((_t === 'reply' || _t === 'mention' || _t === 'sent') && n.content) { %><div class="msg-content msg-note"><%- include('../partials/note-body', { nb: n }) %></div>
               <% if (_t === 'mention' && n.wave && n.actorUri && canMutate) { %>
-                <form class="msg-quickreply" method="post" action="<%= (typeof siteUrlBase !== 'undefined' ? siteUrlBase : '') %>/messages/quick-reply" style="display:flex;gap:6px;flex-wrap:wrap;margin-top:6px">
+                <form class="msg-quickreply" method="post" action="<%= (typeof siteUrlBase !== 'undefined' ? siteUrlBase : '') %>/messages/quick-reply" data-sent="<%= t('msg.wave_sent') %>" style="display:flex;gap:6px;flex-wrap:wrap;margin-top:6px">
                   <input type="hidden" name="to" value="<%= n.actorUri %>">
                   <button class="btn small" name="text" value="<%= t('msg.wave_r1') %>"><%= t('msg.wave_r1') %></button>