Changeset a4b903a in Klonkt for src/assets/js/mod/post-edit.js

Timestamp:

08/08/2026 09:32:09 PM (4 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

7c38a09

Parents:

dc0da72

git-author:

Robin <roboburr@…> (08/08/2026 09:32:05 PM)

git-committer:

Robin <roboburr@…> (08/08/2026 09:32:09 PM)

Message:

De fullscreen-editor faalt niet langer zonder spoor (shaer-kd1)

Robins melding: op mobiel opent de fullscreen-editor niet. Ik kan het hier niet
reproduceren -- isTouch kijkt naar (pointer: coarse), niet naar breedte, dus
het venster verkleinen zet die tak niet aan, en een echt toestel met een login
heb ik niet. Dus geen fix op een vermoeden; wel de stilte weg waarin dit zich
verstopt.

WAAROM DIT OP TOUCH ZWAARDER WEEGT DAN HET KLINKT. Buiten fullscreen is de
toolbar daar VERBORGEN (@media (pointer: coarse) in pages/post-edit.ejs), en
het veld staat op contenteditable=false. De tik op het veld is dus de enige
ingang. Werkt die niet, dan is het niet "fullscreen doet het niet" maar "je
kunt op een telefoon niet typen". Op desktop valt hetzelfde defect niet op,
want daar typ je gewoon inline.

Drie dingen:

applyFs deed een KALE return als .pe-editor-frame ontbrak. Nu een

console.warn ernaast. Dat is het verschil tussen "er gebeurt
niets" en een aanwijzing.

vooraf op touch een waarschuwing als frame of veld ontbreekt, met de

gevolgtrekking erbij (niet kunnen typen), zodat wie het leest niet
hoeft te weten dat de toolbar daar verborgen is.

bedrading fsBtn, de Done-knop en de tik-handler gebruikten kaal

addEventListener, terwijl de rest van run() overal een
wired-vlag heeft. init() draait bij ELKE paginawissel, dus op
dezelfde DOM stapelden die drie zich op. Nu gelijkgetrokken.

Dat laatste is een echte fout, alleen niet degene die gemeld werd.

ONDERZOCHT EN AFGEVALLEN: editor kan daar niet null zijn -- run() breekt al
eerder af op if (!editor) return, en beide staan in dezelfde scope. Die
verdachte is dus weg.

Volgende stap ligt bij een echt toestel: opent de editor nu wel, dan was het
de stapelende bedrading; verschijnt de waarschuwing, dan ontbreekt het frame;
gebeurt er nog steeds niets zonder melding, dan zit het in de tik zelf en niet
in deze laag.

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

File:

• src/assets/js/mod/post-edit.js (modified) (4 diffs)

src/assets/js/mod/post-edit.js

@@ -582 +582 @@
   const editorFrame = document.querySelector('.pe-editor-frame');
   const isTouch = !!(window.matchMedia && window.matchMedia('(pointer: coarse)').matches);
+  // OP TOUCH IS DIT GEEN LUXE MAAR DE ENIGE INGANG (shaer-kd1). Buiten
+  // fullscreen is de toolbar daar verborgen (@media (pointer: coarse) in
+  // pages/post-edit.ejs), en het veld staat op contenteditable=false. Ontbreekt
+  // een van deze twee elementen, dan kun je op een telefoon NIET TYPEN -- en tot
+  // nu toe gebeurde dat zonder één spoor: applyFs deed een kale `return`.
+  if (isTouch && (!editorFrame || !editor)) {
+    console.warn('[post-edit] fullscreen onbereikbaar op touch:',
+      'frame=' + !!editorFrame, 'editor=' + !!editor,
+      '-- de toolbar is hier verborgen, dus dit betekent: niet kunnen typen');
+  }
 
   // On mobile the keyboard pushes the visible (visual) viewport up while
@@ -601 +611 @@
   function isFs() { return !!(editorFrame && editorFrame.classList.contains('pe-fs')); }
   function applyFs(on) {
-    if (!editorFrame) return;
+    if (!editorFrame) {
+      // Was een kale `return`. Op touch is dit het verschil tussen "fullscreen
+      // werkt niet" en "je kunt niet typen", en het gebeurde zonder spoor.
+      console.warn('[post-edit] fullscreen kan niet: .pe-editor-frame ontbreekt');
+      return;
+    }
     editorFrame.classList.toggle('pe-fs', on);
     document.body.classList.toggle('pe-fs-open', on);
@@ -648 +663 @@
   function toggleFullscreen() { if (isFs()) closeFs(); else openFs(); }
   doc.on(window, 'popstate', function () { if (isFs()) applyFs(false); });
-  if (fsBtn) fsBtn.addEventListener('click', toggleFullscreen);
+  // __wired zoals overal in run(): init() draait bij ELKE paginawissel, en op
+  // dezelfde DOM zou een kale addEventListener stapelen. Na een htmx-wissel is
+  // het element nieuw en dus de vlag weg -- precies de bedoeling.
+  if (fsBtn && !fsBtn.__fsWired) { fsBtn.__fsWired = true; fsBtn.addEventListener('click', toggleFullscreen); }
   var fsDoneBtn = document.getElementById('pe-fs-done');
-  if (fsDoneBtn) fsDoneBtn.addEventListener('click', closeFs);
+  if (fsDoneBtn && !fsDoneBtn.__fsWired) { fsDoneBtn.__fsWired = true; fsDoneBtn.addEventListener('click', closeFs); }
   doc.on(document, 'keydown', (e) => {
     if (e.key === 'Escape' && isFs()) { e.preventDefault(); closeFs(); }
@@ -658 +676 @@
   // not a text field there. One tap → fullscreen, where it becomes editable
   // (toggleFullscreen toggles contenteditable). This prevents inline typing.
-  if (isTouch) {
+  if (isTouch && editor && !editor.__fsTapWired) {
+    editor.__fsTapWired = true;
     editor.setAttribute('contenteditable', 'false');
     editor.classList.add('pe-tap-to-edit');