Improve insights and continue WhatsApp implementation

core/templates/base.html

@@ -500,6 +500,82 @@
         });
       };
 
+      window.giaPrepareWindowAnchor = function (trigger) {
+        if (!trigger || !trigger.getBoundingClientRect) {
+          window.giaWindowAnchor = null;
+          return;
+        }
+        const rect = trigger.getBoundingClientRect();
+        window.giaWindowAnchor = {
+          left: rect.left,
+          right: rect.right,
+          top: rect.top,
+          bottom: rect.bottom,
+          width: rect.width,
+          height: rect.height,
+          ts: Date.now(),
+        };
+      };
+
+      window.giaPositionFloatingWindow = function (windowEl) {
+        if (!windowEl) {
+          return;
+        }
+        const isMobile = window.matchMedia("(max-width: 768px)").matches;
+        const margin = 12;
+        const rect = windowEl.getBoundingClientRect();
+        const anchor = window.giaWindowAnchor || null;
+        windowEl.style.position = "fixed";
+
+        if (isMobile) {
+          const centeredLeftViewport = Math.max(
+            margin,
+            Math.round((window.innerWidth - rect.width) / 2)
+          );
+          const centeredTopViewport = Math.max(
+            margin,
+            Math.round((window.innerHeight - rect.height) / 2)
+          );
+          windowEl.style.left = centeredLeftViewport + "px";
+          windowEl.style.top = centeredTopViewport + "px";
+          windowEl.style.right = "auto";
+          windowEl.style.bottom = "auto";
+          windowEl.style.transform = "none";
+          windowEl.setAttribute("tabindex", "-1");
+          if (typeof windowEl.focus === "function") {
+            windowEl.focus({preventScroll: true});
+          }
+          if (typeof windowEl.scrollIntoView === "function") {
+            windowEl.scrollIntoView({block: "center", inline: "center", behavior: "smooth"});
+          }
+          window.giaWindowAnchor = null;
+          return;
+        }
+
+        if (!anchor || (Date.now() - anchor.ts) > 10000) {
+          return;
+        }
+
+        const desiredLeftViewport = anchor.left;
+        const desiredTopViewport = anchor.bottom + 6;
+        const maxLeftViewport = window.innerWidth - rect.width - margin;
+        const maxTopViewport = window.innerHeight - rect.height - margin;
+        const boundedLeftViewport = Math.max(
+          margin,
+          Math.min(desiredLeftViewport, maxLeftViewport)
+        );
+        const boundedTopViewport = Math.max(
+          margin,
+          Math.min(desiredTopViewport, maxTopViewport)
+        );
+        windowEl.style.left = boundedLeftViewport + "px";
+        windowEl.style.top = boundedTopViewport + "px";
+        windowEl.style.right = "auto";
+        windowEl.style.bottom = "auto";
+        windowEl.style.transform = "none";
+        window.giaWindowAnchor = null;
+      };
+
       document.addEventListener("click", function (event) {
         const trigger = event.target.closest(".js-widget-spawn-trigger");
         if (!trigger) {
@@ -515,6 +591,15 @@
       document.body.addEventListener("htmx:afterSwap", function (event) {
         const target = (event && event.target) || document;
         window.giaEnableWidgetSpawnButtons(target);
+        const targetId = (target && target.id) || "";
+        if (targetId === "windows-here") {
+          const floatingWindow = target.querySelector(".floating-window");
+          if (floatingWindow) {
+            window.setTimeout(function () {
+              window.giaPositionFloatingWindow(floatingWindow);
+            }, 0);
+          }
+        }
       });
     </script>
     {% block outer_content %}
@@ -527,7 +612,7 @@
         {% endblock %}
         <div id="modals-here">
         </div>
-        <div id="windows-here">
+        <div id="windows-here" style="z-index: 120;">
         </div>
         <div id="widgets-here" style="display: none;">
         </div>