Changeset b12e20d in Klonkt

Timestamp:

06/19/2026 10:37:36 PM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

9163b15

Parents:

c1a4147

Message:

feat(editor): edit content as a fullscreen "page" with back button + Done

On touch: content inline = post-like preview (not typeable). Tap →
fullscreen writing page that pushes a history state, so browser back and
a clear "✓ Done" button close it and return to the form (same DOM → all
fields intact). Saving still uses the regular Save button. popstate closes
fullscreen; URL unchanged → the global nav popstate ignores it.

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

Files:

• CHANGELOG.md (modified) (1 diff)
• src/views/pages/post-edit.ejs (modified) (6 diffs)

CHANGELOG.md

@@ -56 +56 @@
   te scrollen (scroll-binnen-scroll was verwarrend). Het inline schrijfveld groeit
   ook gewoon mee; typen op mobiel/tablet gaat sowieso fullscreen.
-- Op **mobiel & tablet** (touch) is het content-veld inline **niet meer typbaar** —
-  het is geen tekstveld maar een tap-vlak met een "✎ Tik om te bewerken"-pill. Eén
-  tik opent **volledig scherm**, waar het wél bewerkbaar is. Eruit met de knop (⤡)
-  of Escape. Zo kun je nooit per ongeluk inline typen.
+- Op **mobiel & tablet** (touch) gedraagt de inhoud zich als een post: inline is het
+  **niet typbaar** (tap-vlak met "✎ Tik om te bewerken"-pill). Eén tik opent een
+  **fullscreen schrijf-"pagina"** — met echte back-knop-ondersteuning, dus de
+  browser-back of de **"✓ Klaar"-knop** sluit 'm en je staat terug in het formulier
+  (alle velden intact), waarna je alles samen opslaat met de gewone Opslaan-knop.
 - Schrijfvenster kan op **volledig scherm** (knop in de editor-toolbar, of Escape om
   terug te gaan) — fijn voor afleidingsvrij schrijven op mobiel. De opmaak-toolbar

src/views/pages/post-edit.ejs

@@ -77 +77 @@
       <div class="pe-editor-frame">
         <div class="pe-toolbar" id="pe-toolbar" role="toolbar" aria-label="Format">
+          <button type="button" id="pe-fs-done" class="pe-fs-done" title="Klaar met bewerken">✓ Klaar</button>
           <button type="button" data-cmd="bold" title="Vet (Ctrl+B)" aria-label="Vet">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 4h8a4 4 0 0 1 0 8H6z"/><path d="M6 12h9a4 4 0 0 1 0 8H6z"/></svg>
@@ -461 +462 @@
    af, en op touch zijn de scrollbalken verborgen → geen dubbele balk nodig. */
 
+/* "Klaar"-knop: alleen in fullscreen zichtbaar (links in de toolbar), duidelijke
+   accent-pill i.p.v. een vierkant icoontje. */
+.pe-fs-done { display: none; }
+.pe-editor-frame.pe-fs .pe-fs-done {
+  display: inline-flex; align-items: center;
+  width: auto !important; height: auto !important;
+  padding: .4rem .9rem !important; margin-right: .35rem;
+  background: var(--accent); color: #fff;
+  font-weight: 700; font-size: .9rem; border-radius: 999px;
+}
+.pe-editor-frame.pe-fs .pe-fs-done:hover { background: var(--accent); color: #fff; }
+
 /* Editor body — looks like prose, behaves like a textarea */
 .pe-editor {
@@ -1257 +1270 @@
     editorFrame.style.height = '';
   }
-  function toggleFullscreen() {
+  function isFs() { return !!(editorFrame && editorFrame.classList.contains('pe-fs')); }
+  function applyFs(on) {
     if (!editorFrame) return;
-    const on = editorFrame.classList.toggle('pe-fs');
+    editorFrame.classList.toggle('pe-fs', on);
     document.body.classList.toggle('pe-fs-open', on);
     document.documentElement.classList.toggle('pe-fs-open', on);
     if (fsBtn) {
       fsBtn.setAttribute('aria-pressed', on ? 'true' : 'false');
-      fsBtn.title = on ? 'Verklein' : 'Volledig scherm';
+      fsBtn.title = on ? 'Klaar' : 'Volledig scherm';
     }
     if (window.visualViewport) {
@@ -1283 +1297 @@
     } else {
       if (isTouch) editor.blur();
-      // Bij verkleinen: naar de TOP van de content scrollen i.p.v. ergens onderaan
+      // Bij sluiten: naar de TOP van de content scrollen i.p.v. ergens onderaan
       // (footer) te blijven hangen.
       requestAnimationFrame(function () {
@@ -1290 +1304 @@
     }
   }
+  // De fullscreen schrijf-"pagina": openen pusht een history-state zodat de browser-
+  // back-knop (en de Klaar-knop) 'm sluit en je terug bent in het formulier — voelt
+  // als een aparte pagina, maar álle formuliervelden blijven intact (zelfde DOM).
+  function openFs() {
+    if (isFs()) return;
+    try { history.pushState({ peFs: true }, ''); } catch (_) {}
+    applyFs(true);
+  }
+  function closeFs() {
+    if (!isFs()) return;
+    if (history.state && history.state.peFs) history.back(); // → popstate sluit af
+    else applyFs(false);
+  }
+  function toggleFullscreen() { if (isFs()) closeFs(); else openFs(); }
+  window.addEventListener('popstate', function () { if (isFs()) applyFs(false); });
   if (fsBtn) fsBtn.addEventListener('click', toggleFullscreen);
+  var fsDoneBtn = document.getElementById('pe-fs-done');
+  if (fsDoneBtn) fsDoneBtn.addEventListener('click', closeFs);
   document.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape' && editorFrame && editorFrame.classList.contains('pe-fs')) {
-      e.preventDefault();
-      toggleFullscreen();
-    }
+    if (e.key === 'Escape' && isFs()) { e.preventDefault(); closeFs(); }
   });
 
@@ -1306 +1334 @@
     editor.setAttribute('data-placeholder', 'Tik om te schrijven…');
     editor.addEventListener('click', function () {
-      if (editorFrame && !editorFrame.classList.contains('pe-fs')) toggleFullscreen();
+      if (!isFs()) openFs();
     });
   }