testimonials 0.5.2 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a660a9eadbc3bfa58f9fe6bfc2d9f4feebe867fe536fe0755a156c9b931aca49
-  data.tar.gz: 73c439422ee9c88ee56836338dc8be3b9e41063cec3009bad76025673ca675d6
+  metadata.gz: 789b6567b59d690a280075cd7cf5f0ba49ca6db9463e383fcdc8d655caf5e742
+  data.tar.gz: c846b3cf72bcae677ab487276c9436d0a22125887ebe41462c474179a263dcc1
 SHA512:
-  metadata.gz: 1198770a514947ebc0a23a78a19f29a690c906c03c12e2135b8aa7a4538d4a6f3b406ae0822123ff4b3763e8502111298f1d9b37791dba9254305fc3634fb426
-  data.tar.gz: 6b5585808618f90d8826fdd4f49a142442ac230417e1a2d0272b755b8b497c4fb31f05fef262c02650715b68af94c6f1b36b1ee7d07830a51a82e4f114a65b58
+  metadata.gz: 7f155c2fe3927e8c31fd747ef63f641e20315407ae9e12f5f26e67786522c13daa3184364d5792ec87d69590bfc3abe95029ffade71a8be71d5a8c19eb2bcf00
+  data.tar.gz: 1b43087d51e2dd5c1c94228bd39335a5f4f7d5605e9e5c96d3ef586bf8951d9e56deabc4e3c45f149613599813a0dfa7bc1f80735e44a4208d7fe73701f1a7db

data/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 0.6.0
+
+- **The full-screen mobile dialog now survives the on-screen keyboard.** On
+  phones the dialog is a fixed, full-height (`100dvh`) element, but iOS Safari
+  raises the keyboard without resizing it — so the composer and Submit/Cancel
+  row slid behind the keyboard. While the dialog is open the widget now tracks
+  `window.visualViewport` and pins the overlay (and the dialog filling it) to
+  the visible viewport, so the action row sits just above the keyboard. Gated on
+  the `max-width:480px` mobile media query, so desktop is untouched; browsers
+  without `visualViewport` no-op and keep the previous behavior. Shared change
+  across the gem family.
+- The "🎥 Video attached | Remove" row under a video preview is replaced with a
+  discreet round ✕ button in the top-right corner of the preview (the standard
+  "remove attachment" affordance) — clearly a delete control, but no longer a
+  full-width, easy-to-mis-tap target. Applies to both a just-recorded/uploaded
+  clip and an existing video being edited; remove behavior is unchanged.
+
 ## 0.5.2
 
 - A just-recorded or just-uploaded video now shows a playable preview on the

data/lib/testimonials/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Testimonials
-  VERSION = '0.5.2'
+  VERSION = '0.6.0'
 end

data/lib/testimonials/widget.js

@@ -32,6 +32,7 @@
   var savedOverflow = null; // documentElement overflow to restore when the modal closes
   var state = null; // one open session: { kind, auto, stage, rating, videoBlob, ... }
   var media = { stream: null, recorder: null, chunks: [], timer: null };
+  var viewportHandler = null; // visualViewport listener while the dialog is open
 
   function ready(fn) {
     if (document.readyState === "loading") {
@@ -154,13 +155,69 @@
     document.body.appendChild(overlay);
     lockScroll();
     overlay.addEventListener("keydown", trapFocus);
+    startViewportTracking();
 
     if (auto) postEvent(kind, "shown");
     return true;
   }
 
+  // --- mobile keyboard --------------------------------------------------------
+  // On phones the dialog is full-screen at height:100dvh, but iOS Safari shows
+  // the on-screen keyboard WITHOUT resizing that fixed element — so the action
+  // row gets hidden behind the keyboard. While the dialog is open we track
+  // window.visualViewport and pin the full-screen overlay (and the dialog that
+  // fills it) to the currently-visible area, so Submit/Cancel sit just above the
+  // keyboard. The dialog itself is a static-positioned flex child, so `top` on
+  // it does nothing — we move the fixed overlay for position and size the dialog
+  // to match. Desktop is untouched: everything is gated on the mobile media
+  // query, and browsers without visualViewport no-op (today's behavior).
+
+  function applyViewport() {
+    if (!overlay) return;
+    var dialog = overlay.querySelector("#tml-dialog");
+    var vv = window.visualViewport;
+    if (vv && window.matchMedia("(max-width:480px)").matches) {
+      overlay.style.top = vv.offsetTop + "px";
+      overlay.style.height = vv.height + "px";
+      overlay.style.bottom = "auto"; // height + top win; drop the inset:0 bottom
+      if (dialog) dialog.style.height = vv.height + "px";
+    } else {
+      // Not the mobile full-screen layout: clear every override so the
+      // stylesheet's centered desktop rules apply cleanly.
+      overlay.style.top = "";
+      overlay.style.height = "";
+      overlay.style.bottom = "";
+      if (dialog) dialog.style.height = "";
+    }
+  }
+
+  function startViewportTracking() {
+    if (!window.visualViewport) return;
+    viewportHandler = function () { applyViewport(); };
+    window.visualViewport.addEventListener("resize", viewportHandler);
+    window.visualViewport.addEventListener("scroll", viewportHandler);
+    applyViewport(); // pin once on open
+  }
+
+  function stopViewportTracking() {
+    if (viewportHandler && window.visualViewport) {
+      window.visualViewport.removeEventListener("resize", viewportHandler);
+      window.visualViewport.removeEventListener("scroll", viewportHandler);
+    }
+    viewportHandler = null;
+    // Clear inline styles so a later desktop open starts from the stylesheet.
+    if (overlay) {
+      overlay.style.top = "";
+      overlay.style.height = "";
+      overlay.style.bottom = "";
+      var dialog = overlay.querySelector("#tml-dialog");
+      if (dialog) dialog.style.height = "";
+    }
+  }
+
   function close() {
     if (!overlay) return;
+    stopViewportTracking();
     stopMedia();
     if (state && state.playbackUrl) URL.revokeObjectURL(state.playbackUrl);
     if (state && state.posterUrl) URL.revokeObjectURL(state.posterUrl);
@@ -194,7 +251,12 @@
     dialog.textContent = "";
     dialog.appendChild(node);
     var focusable = dialog.querySelector("textarea, input, button");
-    if (focusable && overlay) focusable.focus();
+    if (focusable && overlay) {
+      focusable.focus();
+      // With the viewport pinned above the keyboard the shrink handles most of
+      // it; nudge the focused field fully into view for the rest.
+      if (focusable.scrollIntoView) focusable.scrollIntoView({ block: "nearest" });
+    }
   }
 
   function trapFocus(event) {
@@ -429,8 +491,7 @@
         state.posterUrl = URL.createObjectURL(state.posterBlob);
         recorded.poster = state.posterUrl;
       }
-      wrap.appendChild(recorded);
-      wrap.appendChild(attachedVideoChip(form, wrap, recorded, function () {
+      wrap.appendChild(videoPreview(form, wrap, recorded, function () {
         state.videoBlob = null;
       }));
       return wrap;
@@ -448,8 +509,7 @@
       // fix for Safari, which won't paint a fragmented-MP4 frame on its own.
       if (state.existingPosterUrl) playback.poster = state.existingPosterUrl;
       playback.src = state.existingVideoUrl;
-      wrap.appendChild(playback);
-      wrap.appendChild(attachedVideoChip(form, wrap, playback, function () {
+      wrap.appendChild(videoPreview(form, wrap, playback, function () {
         state.removeExistingVideo = true;
       }));
       return wrap;
@@ -475,18 +535,21 @@
     return wrap;
   }
 
-  function attachedVideoChip(form, wrap, playback, onRemove) {
-    var chip = el("div", "tml-chip");
-    chip.appendChild(el("span", "tml-chip-label", "🎥 " + config.labels.videoAttached));
-    var remove = el("button", "tml-chip-remove", config.labels.remove);
+  // A discreet "remove attachment" affordance: the video preview wrapped so a
+  // small round ✕ can sit in its top-right corner (overlaid on the clip, clear
+  // of the centered play button), instead of a full-width, easy-to-mis-tap row.
+  function videoPreview(form, wrap, playback, onRemove) {
+    var box = el("div", "tml-video-wrap");
+    box.appendChild(playback);
+    var remove = el("button", "tml-video-remove", "✕");
     remove.type = "button";
+    remove.setAttribute("aria-label", config.labels.remove);
     remove.addEventListener("click", function () {
       onRemove();
-      if (playback) playback.remove();
       wrap.replaceWith(videoControl(form));
     });
-    chip.appendChild(remove);
-    return chip;
+    box.appendChild(remove);
+    return box;
   }
 
   // Recording lives in its own stage: camera check -> 3-2-1 -> recording ->
@@ -1117,11 +1180,14 @@
       ".tml-record:hover{background:rgba(37,99,235,.12)}",
       ".tml-record-label{color:#2563eb;font-weight:600}",
       ".tml-record-hint{font-size:12px;color:#6b7280}",
-      ".tml-chip{display:flex;align-items:center;justify-content:space-between;gap:8px;",
-      "padding:10px 12px;border-radius:10px;background:rgba(37,99,235,.07)}",
-      ".tml-chip-label{font-weight:600}",
-      ".tml-chip-remove{border:0;background:none;color:#2563eb;cursor:pointer;font:inherit;padding:2px 6px}",
       ".tml-video{display:block;width:100%;border-radius:10px;background:#000;aspect-ratio:4/3;margin:0 0 12px}",
+      // A recorded/uploaded/existing clip with a discreet corner remove control.
+      ".tml-video-wrap{position:relative;margin:0 0 12px}",
+      ".tml-video-wrap .tml-video{margin:0}",
+      ".tml-video-remove{position:absolute;top:8px;inset-inline-end:8px;width:28px;height:28px;padding:0;",
+      "display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;",
+      "background:rgba(0,0,0,.6);color:#fff;font-size:15px;line-height:1;cursor:pointer}",
+      ".tml-video-remove:hover{background:rgba(0,0,0,.8)}",
       ".tml-preview{position:relative;margin-bottom:4px}",
       ".tml-preview .tml-video{margin-bottom:0}",
       ".tml-timer{position:absolute;top:8px;inset-inline-end:8px;background:rgba(0,0,0,.55);color:#fff;",
@@ -1151,8 +1217,7 @@
       ".tml-nps-score{border-color:#2a313a}",
       ".tml-record{border-color:#3b82f6;background:rgba(59,130,246,.1)}",
       ".tml-record:hover{background:rgba(59,130,246,.18)}",
-      ".tml-record-label,.tml-chip-remove{color:#3b82f6}",
-      ".tml-chip{background:rgba(59,130,246,.12)}",
+      ".tml-record-label{color:#3b82f6}",
       ".tml-hint,.tml-nps-legend,.tml-record-hint{color:#9aa2ab}",
       "}",
       // The dialog is the scrollable region; keep its scroll from chaining

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: testimonials
 version: !ruby/object:Gem::Version
-  version: 0.5.2
+  version: 0.6.0
 platform: ruby
 authors:
 - Yaroslav Shmarov