Changeset 2bd31d6 in Klonkt for src/views/pages/messages.ejs

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/views/pages/messages.ejs (modified) (1 diff)

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