Tightly integrate WhatsApp selectors into existing UIs

core/templates/base.html

@@ -576,6 +576,67 @@
         window.giaWindowAnchor = null;
       };
 
+      window.giaEnableFloatingWindowInteractions = function (windowEl) {
+        if (!windowEl || windowEl.dataset.giaWindowInteractive === "1") {
+          return;
+        }
+        windowEl.dataset.giaWindowInteractive = "1";
+
+        // Disable magnet-block global drag so text inputs remain editable.
+        windowEl.setAttribute("unmovable", "");
+
+        const heading = windowEl.querySelector(".panel-heading");
+        if (!heading) {
+          return;
+        }
+
+        let dragging = false;
+        let startX = 0;
+        let startY = 0;
+        let startLeft = 0;
+        let startTop = 0;
+
+        const onMove = function (event) {
+          if (!dragging) {
+            return;
+          }
+          const deltaX = event.clientX - startX;
+          const deltaY = event.clientY - startY;
+          windowEl.style.left = (startLeft + deltaX) + "px";
+          windowEl.style.top = (startTop + deltaY) + "px";
+          windowEl.style.right = "auto";
+          windowEl.style.bottom = "auto";
+        };
+
+        const stopDrag = function () {
+          dragging = false;
+          document.removeEventListener("pointermove", onMove);
+          document.removeEventListener("pointerup", stopDrag);
+        };
+
+        heading.addEventListener("pointerdown", function (event) {
+          if (event.button !== 0) {
+            return;
+          }
+          const interactive = event.target.closest(
+            "button, a, input, textarea, select, label, .delete, .icon"
+          );
+          if (interactive) {
+            return;
+          }
+          const rect = windowEl.getBoundingClientRect();
+          windowEl.style.position = "fixed";
+          startLeft = rect.left;
+          startTop = rect.top;
+          startX = event.clientX;
+          startY = event.clientY;
+          dragging = true;
+          document.addEventListener("pointermove", onMove);
+          document.addEventListener("pointerup", stopDrag);
+          event.preventDefault();
+        });
+      };
+
       document.addEventListener("click", function (event) {
         const trigger = event.target.closest(".js-widget-spawn-trigger");
         if (!trigger) {
@@ -593,12 +654,13 @@
         window.giaEnableWidgetSpawnButtons(target);
         const targetId = (target && target.id) || "";
         if (targetId === "windows-here") {
-          const floatingWindow = target.querySelector(".floating-window");
-          if (floatingWindow) {
+          const floatingWindows = target.querySelectorAll(".floating-window");
+          floatingWindows.forEach(function (floatingWindow) {
             window.setTimeout(function () {
               window.giaPositionFloatingWindow(floatingWindow);
+              window.giaEnableFloatingWindowInteractions(floatingWindow);
             }, 0);
-          }
+          });
         }
       });
     </script>