Changeset 8f6a61d in Klonkt

Timestamp:

06/17/2026 01:52:53 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

d5b9d2a

Parents:

9611f31

Message:

Prutter composer: clear after send + Enter behaviour + auto-grow

• Text is now cleared after a successful send (inline hx-on wasn't reliable → done in JS via htmx:afterRequest).
• Desktop: Enter = send, Shift+Enter = new line.
• Touch (mobile/tablet, pointer:coarse): Enter = new line; send via the Send button.
• Textarea grows automatically (up to 40vh, then internal scroll).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@…>

File:

• src/views/pages/prutter-conversation.ejs (modified) (3 diffs)

src/views/pages/prutter-conversation.ejs

@@ -28 +28 @@
   </ol>
 
-  <form class="prutter-composer"
+  <form class="prutter-composer" id="prutter-composer"
         method="post"
         action="<%= siteUrlBase %>/prutter/<%= conversation.id %>/send"
         hx-post="<%= siteUrlBase %>/prutter/<%= conversation.id %>/send"
         hx-target="#prutter-thread"
-        hx-swap="beforeend"
-        hx-on::after-request="this.querySelector('textarea').value=''; window.__prutterScroll && window.__prutterScroll();">
+        hx-swap="beforeend">
     <textarea name="content" rows="1" maxlength="2000" placeholder="Bericht…" required></textarea>
     <button type="submit" class="btn btn-primary">Stuur</button>
@@ -83 +82 @@
     console.warn('Prutter WS unavailable:', e);
   }
+
+  // ── Composer: invoer-gedrag + auto-groei + wissen na versturen ──────────
+  var form = document.getElementById('prutter-composer');
+  var ta = form ? form.querySelector('textarea') : null;
+  if (form && ta) {
+    var MAXH = function () { return Math.round(window.innerHeight * 0.4); };
+    function autoGrow() {
+      ta.style.height = 'auto';
+      ta.style.height = Math.min(ta.scrollHeight, MAXH()) + 'px';
+    }
+    function isTouch() {
+      return window.matchMedia && window.matchMedia('(pointer: coarse)').matches;
+    }
+    function submit() {
+      if (!ta.value.trim()) return;
+      if (form.requestSubmit) form.requestSubmit();
+      else form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
+    }
+
+    ta.addEventListener('input', autoGrow);
+    ta.addEventListener('keydown', function (e) {
+      if (e.key !== 'Enter' || e.isComposing) return;   // IME-invoer met rust laten
+      // Touch (mobiel/tablet): Enter = nieuwe regel, versturen via de Stuur-knop.
+      if (isTouch()) return;
+      // Desktop: Shift+Enter = nieuwe regel, gewone Enter = versturen.
+      if (e.shiftKey) return;
+      e.preventDefault();
+      submit();
+    });
+
+    // Wissen + terug naar één regel ná een geslaagde verzending.
+    form.addEventListener('htmx:afterRequest', function (e) {
+      if (e.detail && e.detail.successful) {
+        ta.value = '';
+        autoGrow();
+        scrollToBottom();
+        ta.focus();
+      }
+    });
+
+    autoGrow();
+  }
 })();
 </script>
@@ -211 +252 @@
   resize: none;
   min-height: 44px; max-height: 40vh;
+  overflow-y: auto;   /* scrollt intern zodra de auto-groei de max raakt */
 }
 .prutter-composer .btn { flex: 0 0 auto; min-height: 44px; }