Changeset 0dba092 in Klonkt for src/views

Timestamp:

06/24/2026 03:09:22 PM (3 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

914eb9f

Parents:

749c183

Message:

style(activitypub): reply field as a floating popover (zero layout shift)

The address field now opens as an absolutely-positioned popover below the button
(appended to body) instead of inline — so neither the post CTA nor a comment row
reflows. Closes on outside-click, Escape, scroll, or cancel; toggles on re-click.

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

Location:

src/views

Files:

• pages/post.ejs (modified) (1 diff)
• shell.ejs (modified) (1 diff)

src/views/pages/post.ejs

@@ -102 +102 @@
   (function(){
     if (window.__fediRemoteWired) return; window.__fediRemoteWired = true;
+    var current = null, currentBtn = null;
+    function close(){ if (current) { current.remove(); current = null; currentBtn = null; } }
     function go(raw, uri){
       var d = (raw||'').trim().replace(/^@?[^@\s]*@/, '').replace(/^https?:\/\//i, '').replace(/\/.*$/, '').trim();
       if (d) location.href = 'https://' + d + '/authorize_interaction?uri=' + encodeURIComponent(uri||'');
     }
-    function closeForm(f){ if (!f) return; if (f._btn) f._btn.style.display = ''; f.remove(); }
+    function place(f, b){
+      var r = b.getBoundingClientRect();
+      f.style.top = (r.bottom + window.scrollY + 6) + 'px';
+      f.style.left = Math.max(8, Math.min(r.left + window.scrollX, window.scrollX + window.innerWidth - 340)) + 'px';
+    }
     document.addEventListener('click', function(e){
-      var cancel = e.target.closest && e.target.closest('.fedi-remote-cancel');
-      if (cancel) { closeForm(cancel.closest('.fedi-remote-form')); return; }
+      if (e.target.closest && e.target.closest('.fedi-remote-cancel')) { close(); return; }
+      if (current && e.target.closest && e.target.closest('.fedi-remote-form')) return; // click inside → keep
       var b = e.target.closest && e.target.closest('.fedi-remote-reply-btn');
-      if (!b) return;
-      e.preventDefault();
-      closeForm(document.querySelector('.fedi-remote-form')); // close any open one (restores its button)
-      var f = document.createElement('form');
-      f.className = 'fedi-remote-form';
-      f.dataset.uri = b.getAttribute('data-fedi-uri') || '';
-      f._btn = b;
-      f.innerHTML = '<input type="text" autocomplete="off" spellcheck="false">'
-        + '<button type="submit" class="btn btn-primary fedi-remote-go" aria-label="ok">&rarr;</button>'
-        + '<button type="button" class="fedi-remote-cancel" aria-label="x">&times;</button>';
-      var inp = f.querySelector('input');
-      inp.placeholder = b.getAttribute('data-fedi-ph') || '@name@server.social';
-      b.style.display = 'none';                  // replace the button in place → no layout jump
-      b.parentNode.insertBefore(f, b.nextSibling);
-      inp.focus();
+      if (b) {
+        e.preventDefault();
+        if (currentBtn === b) { close(); return; }   // toggle off
+        close();
+        var f = document.createElement('form');
+        f.className = 'fedi-remote-form';
+        f.dataset.uri = b.getAttribute('data-fedi-uri') || '';
+        f.innerHTML = '<input type="text" autocomplete="off" spellcheck="false">'
+          + '<button type="submit" class="btn btn-primary fedi-remote-go" aria-label="ok">&rarr;</button>'
+          + '<button type="button" class="fedi-remote-cancel" aria-label="x">&times;</button>';
+        f.querySelector('input').placeholder = b.getAttribute('data-fedi-ph') || '@name@server.social';
+        document.body.appendChild(f);            // floating popover → no layout reflow
+        place(f, b); current = f; currentBtn = b;
+        f.querySelector('input').focus();
+        return;
+      }
+      if (current) close(); // click anywhere else closes it
     });
     document.addEventListener('submit', function(e){
       var f = e.target.closest && e.target.closest('.fedi-remote-form');
-      if (!f) return;
-      e.preventDefault();
+      if (!f) return; e.preventDefault();
       go(f.querySelector('input').value, f.dataset.uri);
     });
+    document.addEventListener('keydown', function(e){ if (e.key === 'Escape') close(); });
+    window.addEventListener('scroll', close, true);
   })();
   </script>

src/views/shell.ejs

@@ -175 +175 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=43">
+<link rel="stylesheet" href="/assets/css/style.css?v=44">
 
 <!-- Audio player styles: loaded on every page so the mini-player works