Changeset a5a6249 in Klonkt for src/assets

Timestamp:

08/12/2026 07:52:13 PM (3 months ago)

Author:

Robin <roboburr@…>

Children:

084b046

Parents:

303bfc4

Message:

De Ward PWA: de feed en de reddingsboei

Plak 2. Nu valt er iets te doen op /ward in plaats van alleen te kijken.

DE FEED. Dezelfde bron als de Krant (getTimeline) en dezelfde partial
voor de body (renderNoteBody), zodat een post er overal hetzelfde uitziet:
opmaak, media, quote-kaart, embed. Alleen kale content doorgeven zou een
lege regel opleveren waar een foto hoort, precies de fout die het
guardian-dashboard ooit had.

DE BOEI, en die is hier BETER dan in de app. Shaer maakt een
schermafdruk van de kaart, met al het gedoe van buiten beeld renderen.
Op de server weten we wélke note het is, dus de hulpvraag draagt de note
zelf mee. Een guardian ziet daardoor de echte post en niet een plaatje
dat er ooit op leek.

Slepen met pointer-events, want dat is het enige dat op een telefoon en
met een muis hetzelfde doet. touch-action: none op de boei houdt de
pagina stil tijdens het slepen; zonder dat vecht het met scrollen en
verlies je hem halverwege. De kaart eronder licht op, want mikken met een
vinger zonder terugkoppeling is gokken. Een tik zonder slepen vraagt hulp
zonder dat er een post bij hoort, en de grote knop bovenaan doet
hetzelfde.

Changed files:
src/routes/ward.js

• /api/feed met afgemaakte body per kaart
• /api/help: direct bericht aan ALLE guardians, met de note erbij; 409 als er geen guardians zijn, want dan is er niets te vragen

src/views/pages/ward.ejs

• feed-sectie, zwevende boei, hulpdialoog

src/assets/js/ward.js

• kaarten tekenen, slepen, mikken, versturen

src/assets/css/ward.css

• kaarten, boei, dialoog, sr-only

src/services/i18n.js

• acht nieuwe sleutels in nl, en, de

test/ward-pwa.test.js

• de feed levert een gerenderde body; de boei weigert zonder guardians; een vreemde kan hem niet afvuren

remarks: 889 tests groen. Slepen is alleen in code getest, niet met een
echte vinger op een echt scherm; dat is aan Robin op dev.

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

Location:

src/assets

Files:

• css/ward.css (modified) (1 diff)
• js/ward.js (modified) (2 diffs)

src/assets/css/ward.css

@@ -43 +43 @@
 .note.alarm { background: rgba(239,159,39,.16); color: var(--alarm); }
 .note.unknown { background: rgba(154,167,187,.14); color: var(--dim); }
+
+/* ── De feed ──────────────────────────────────────────────────────────── */
+.cards { display: grid; gap: 12px; }
+.post { background: var(--card); border-radius: 12px; padding: 12px 14px; border: 2px solid transparent; }
+.post .avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
+.post .when { margin-left: auto; color: var(--dim); font-size: .8rem; }
+.post .cw { color: var(--alarm); font-size: .85rem; margin: 6px 0 0; }
+.post .body { margin-top: 8px; overflow-wrap: anywhere; }
+.post .body img, .post .body video { max-width: 100%; height: auto; border-radius: 8px; }
+/* Waar de boei zou landen. Zichtbaar oplichten, want mikken met een vinger
+   zonder terugkoppeling is gokken. */
+.post.hover { border-color: var(--accent); }
+
+/* ── De reddingsboei ──────────────────────────────────────────────────── */
+#buoy {
+  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom));
+  width: 76px; height: 76px; border: 0; border-radius: 50%;
+  background: transparent; font-size: 52px; line-height: 1;
+  /* Zonder dit vecht slepen met scrollen en verlies je hem halverwege. */
+  touch-action: none; cursor: grab; z-index: 50;
+}
+#buoy.dragging { cursor: grabbing; transform: scale(1.1); }
+
+dialog#help-dialog {
+  border: 0; border-radius: 16px; padding: 18px; max-width: 420px; width: calc(100% - 32px);
+  background: var(--card); color: var(--ink);
+}
+dialog#help-dialog::backdrop { background: rgba(0,0,0,.5); }
+dialog#help-dialog h2 { margin: 0 0 10px; font-size: 1.05rem; color: var(--ink); }
+dialog#help-dialog label { display: block; color: var(--dim); font-size: .85rem; margin-bottom: 4px; }
+dialog#help-dialog textarea {
+  width: 100%; border-radius: 10px; border: 1px solid #2a3342;
+  background: #131a25; color: var(--ink); padding: 8px; font: inherit;
+}
+dialog#help-dialog menu { display: flex; gap: 8px; justify-content: flex-end; margin: 14px 0 0; padding: 0; }
+dialog#help-dialog button { border: 0; border-radius: 10px; padding: 10px 14px; background: #2a3342; color: var(--ink); font: inherit; }
+dialog#help-dialog button.primary { background: var(--accent); color: #fff; font-weight: 600; }
+
+/* Voor schermlezers, niet voor het oog. */
+.sr-only {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}

src/assets/js/ward.js

@@ -98 +98 @@
 }
 
+/**
+ * De kaarten. De body komt AF van de server (dezelfde partial als de Krant),
+ * dus hier alleen invoegen; zelf HTML samenstellen zou opmaak, media en
+ * quote-kaarten opnieuw moeten uitvinden en er anders uit laten zien.
+ */
+function renderFeed(items) {
+  const box = document.getElementById('card-list');
+  box.replaceChildren();
+  document.getElementById('feed-empty').hidden = items.length > 0;
+
+  items.forEach((it) => {
+    const card = el('article', 'post');
+    card.dataset.note = it.id;              // waar de boei op mikt
+    const head = el('div', 'row');
+    if (it.authorIcon) {
+      const img = el('img', 'avatar');
+      img.src = it.authorIcon; img.alt = ''; img.loading = 'lazy';
+      head.append(img);
+    }
+    head.append(el('span', 'name', it.authorName || it.author));
+    head.append(el('span', 'when', it.whenText || ''));
+    card.append(head);
+
+    if (it.cw) card.append(el('p', 'cw', it.cw));
+    const body = el('div', 'body');
+    body.innerHTML = it.bodyHtml || '';     // server-gerenderd en gesaniteerd
+    card.append(body);
+    box.append(card);
+  });
+}
+
+async function loadFeed() {
+  try {
+    const r = await fetch('/ward/api/feed', { headers: { Accept: 'application/json' } });
+    if (!r.ok) return;
+    renderFeed((await r.json()).items || []);
+  } catch { /* de pagina blijft staan met wat er al is */ }
+}
+
+/**
+ * De reddingsboei: sleep hem op een kaart en je guardians krijgen die post.
+ *
+ * Pointer-events in plaats van muis- of touch-events apart, want dat is het
+ * enige dat op een telefoon en met een muis hetzelfde doet. `setPointerCapture`
+ * zorgt dat de sleep van jou blijft, en `touch-action: none` op de boei houdt
+ * de pagina stil terwijl je hem verplaatst: zonder dat vecht het slepen met
+ * scrollen en verlies je hem halverwege.
+ */
+function wireBuoy() {
+  const buoy = document.getElementById('buoy');
+  const dlg = document.getElementById('help-dialog');
+  let dragging = false, dx = 0, dy = 0, target = null;
+
+  const cardUnder = (x, y) => document.elementFromPoint(x, y)?.closest('.post');
+
+  buoy.addEventListener('pointerdown', (e) => {
+    dragging = true;
+    buoy.setPointerCapture(e.pointerId);
+    const r = buoy.getBoundingClientRect();
+    dx = e.clientX - r.left; dy = e.clientY - r.top;
+    buoy.classList.add('dragging');
+  });
+
+  buoy.addEventListener('pointermove', (e) => {
+    if (!dragging) return;
+    buoy.style.left = `${e.clientX - dx}px`;
+    buoy.style.top = `${e.clientY - dy}px`;
+    buoy.style.right = 'auto'; buoy.style.bottom = 'auto';
+    // Onderweg oplichten waar hij zou landen, zodat je ziet wat je kiest.
+    document.querySelectorAll('.post.hover').forEach((n) => n.classList.remove('hover'));
+    cardUnder(e.clientX, e.clientY)?.classList.add('hover');
+  });
+
+  const drop = (e) => {
+    if (!dragging) return;
+    dragging = false;
+    buoy.classList.remove('dragging');
+    const card = cardUnder(e.clientX, e.clientY);
+    document.querySelectorAll('.post.hover').forEach((n) => n.classList.remove('hover'));
+    // Terug naar zijn hoek: de boei hoort altijd op dezelfde plek te liggen.
+    buoy.style.left = buoy.style.top = 'auto';
+    buoy.style.right = ''; buoy.style.bottom = '';
+    if (card) askHelp(card.dataset.note, card.querySelector('.name')?.textContent || '');
+  };
+  buoy.addEventListener('pointerup', drop);
+  buoy.addEventListener('pointercancel', drop);
+
+  // Een tik (zonder slepen) vraagt hulp zonder dat er een post bij hoort.
+  buoy.addEventListener('click', (e) => { if (!e.detail || !dragging) askHelp(null, null); });
+
+  function askHelp(noteId, who) {
+    document.getElementById('help-title').textContent = who
+      ? `Hulp vragen bij het bericht van ${who}?` : 'Hulp vragen aan je guardians?';
+    dlg.dataset.note = noteId || '';
+    document.getElementById('help-words').value = '';
+    dlg.showModal();
+  }
+
+  dlg.addEventListener('close', async () => {
+    if (dlg.returnValue !== 'send') return;
+    const body = { note: dlg.dataset.note || undefined, words: document.getElementById('help-words').value };
+    const hint = document.getElementById('help-hint');
+    try {
+      const r = await fetch('/ward/api/help', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+      const out = await r.json().catch(() => ({}));
+      hint.textContent = r.ok ? state.strings.helpSent
+        : (out.error === 'no_guardians' ? 'Je hebt nog geen guardians om te vragen.' : 'Dat lukte niet; probeer het nog eens.');
+    } catch {
+      hint.textContent = 'Dat lukte niet; probeer het nog eens.';
+    }
+  });
+}
+
 /** De controle kost per guardian een remote fetch, dus hij komt ná het tekenen. */
 async function loadChecks() {
@@ -118 +235 @@
   }
   hint.textContent = `Gaat naar ${state.guardians.length} guardian(s).`;
+  btn.addEventListener('click', () => document.getElementById('buoy').click());
 }
 
 renderGuardians(null);
+wireBuoy();
+loadFeed();
 renderOffers();
 renderWaiting();