aumera-on-screen-widget 0.0.8 → 0.0.9

package/df-btn.js

@@ -34,7 +34,10 @@ if (!config.orgId) {
         background-color: ${config.background || "#FEFFFF"};
         border-radius: 24px;
         cursor: pointer;
-        transition: all .45s cubic-bezier(.4, 0, .2, 1);
+        transition: none;
+        transform-origin: ${
+          config.position === "left" ? "bottom left" : "bottom right"
+        };
         position: fixed;
         bottom: 0px;
         ${config.position === "left" ? "left: 0px;" : "right: 0px;"}
@@ -130,7 +133,10 @@ if (!config.orgId) {
         max-height: 75vh;
         width: ${config.width || "414px"};
         max-width: 414px;
-        transition: all .45s cubic-bezier(.4, 0, .2, 1);
+        transition: none;
+        transform-origin: ${
+          config.position === "left" ? "bottom left" : "bottom right"
+        };
         ${config.position === "left" ? "float: left;" : "float: right;"}
         opacity: 1;
         border-radius: 0 0 16px 16px;
@@ -160,24 +166,27 @@ if (!config.orgId) {
     .df-btn.df-maximized {
       width: 100vw !important;
       height: 100vh !important;
+      height: 100dvh !important; /* Dynamic viewport height for mobile */
       top: 0 !important;
-      left: 0 !important;
-      right: 0 !important;
+      ${config.position === "left" ? "left: 0 !important;" : ""}
+      ${config.position === "right" ? "right: 0 !important;" : ""}
       bottom: 0 !important;
       margin: 0 !important;
       border-radius: 0 !important;
-      transition: all .45s cubic-bezier(.4, 0, .2, 1) !important;
+      /* Handle safe areas on mobile devices */
+      padding-bottom: env(safe-area-inset-bottom, 0);
     }
     .df-btn.df-maximized .df-btn-content {
       width: 100vw !important;
       max-width: 100vw !important;
       height: calc(100vh - 56px) !important;
+      height: calc(100dvh  - env(safe-area-inset-bottom, 0px)) !important; /* Account for safe area */
       max-height: calc(100vh - 56px) !important;
+      max-height: calc(100dvh  - env(safe-area-inset-bottom, 0px)) !important;
       opacity: 1 !important;
-
+      float: none !important;
       display: block !important;
       border-radius: 0 !important;
-      transition: all .45s cubic-bezier(.4, 0, .2, 1) !important;
     }
     .df-btn.df-closed .df-btn-content {
       width: 0 !important;
@@ -194,6 +203,17 @@ if (!config.orgId) {
       justify-content: center;
     }
 
+    /* Animation classes for FLIP */
+    .df-animating {
+      transition: transform .45s cubic-bezier(.4, 0, .2, 1);
+      will-change: transform;
+    }
+
+    .df-content-animating {
+      transition: opacity .45s cubic-bezier(.4, 0, .2, 1);
+      will-change: opacity;
+    }
+
     @media screen and (max-width: 720px){
         .df-btn {
             border-radius: 28px;
@@ -201,13 +221,16 @@ if (!config.orgId) {
 
         .df-btn:not(.df-closed) {
             margin: 0px;
-            border-radius: 0px
+            border-radius: 0px;
+            padding-bottom: env(safe-area-inset-bottom, 0);
         }
 
         .df-btn:not(.df-closed) > .df-btn-content {
             width: 100vw;
             max-height: 100vh;
+            max-height: 100dvh;
             height: calc(100vh - 56px);
+            height: calc(100dvh - 56px - env(safe-area-inset-bottom, 0px));
             padding-bottom: 0px
         }
 
@@ -276,8 +299,7 @@ if (!config.orgId) {
   // Get the detected language
   const detectedLang = getLanguage();
 
-  // Check if mobile device
-  const isMobileDevice = window.innerWidth <= 768;
+  // Check if mobile device - removed unused variable
 
   document.write(`
         <button class="df-btn df-closed" onclick="dfToggle()">
@@ -298,7 +320,6 @@ if (!config.orgId) {
   let dfToggled = false;
   let inactivityTimer = null;
   let shakeInterval = null;
-  let maximized = false;
 
   const startInactivityTimer = () => {
     // Only start inactivity timer if button is closed
@@ -361,7 +382,6 @@ if (!config.orgId) {
       btnText.style.paddingRight = "0";
 
       // Only add maximize/minimize button on desktop
-      const isMobile = window.innerWidth <= 768;
 
       // Add maximize/minimize button (right)
       const maxBtn = document.createElement("div");
@@ -405,8 +425,56 @@ if (!config.orgId) {
   function maximizeMinimize() {
     const btn = document.querySelector(".df-btn");
     if (!btn) return;
+    const content = btn.querySelector(".df-btn-content");
+    if (!content) return;
+
+    // FIRST: Capture current positions
+    const firstBtn = btn.getBoundingClientRect();
+
+    // Toggle the maximized state (instant layout change)
     btn.classList.toggle("df-maximized");
-    updateHeaderButtons();
+
+    // LAST: Capture new positions
+    const lastBtn = btn.getBoundingClientRect();
+
+    // INVERT: Calculate the delta and apply transform to invert to original position
+    const btnDeltaX = firstBtn.left - lastBtn.left;
+    const btnDeltaY = firstBtn.top - lastBtn.top;
+    const btnScaleX = firstBtn.width / Math.max(lastBtn.width, 0.0001);
+    const btnScaleY = firstBtn.height / Math.max(lastBtn.height, 0.0001);
+
+    // Apply inverted transform
+    btn.style.transform = `translate(${btnDeltaX}px, ${btnDeltaY}px) scale(${btnScaleX}, ${btnScaleY})`;
+
+    // Optional: Soften iframe reflow with opacity
+    content.classList.add("df-content-animating");
+    content.style.opacity = "0.95";
+
+    // Force reflow to ensure the inverted state is applied
+    btn.getBoundingClientRect();
+
+    // PLAY: Add animation class and clear transform to animate to identity
+    btn.classList.add("df-animating");
+    btn.style.transform = "";
+
+    // Cleanup after animation ends
+    const onTransitionEnd = (e) => {
+      if (e.target !== btn) return;
+      btn.classList.remove("df-animating");
+      content.classList.remove("df-content-animating");
+      content.style.opacity = "";
+      updateHeaderButtons();
+    };
+
+    btn.addEventListener("transitionend", onTransitionEnd, { once: true });
+
+    // Fallback cleanup in case transition doesn't fire
+    setTimeout(() => {
+      btn.classList.remove("df-animating");
+      content.classList.remove("df-content-animating");
+      content.style.opacity = "";
+      updateHeaderButtons();
+    }, 500);
   }
 
   function dfToggle() {
@@ -434,14 +502,68 @@ if (!config.orgId) {
   // Check if mobile for later use
   const isMobile = window.innerWidth <= 768;
 
-  btn.addEventListener("click", (e) => {
+  btn.addEventListener("click", () => {
     // Only toggle if chat is closed (popover mode)
     if (btn.classList.contains("df-closed")) {
-      dfToggle();
-      // On mobile, also add maximized state when opening
-      if (window.innerWidth <= 768) {
+      const isMobile = window.innerWidth <= 768;
+
+      if (isMobile) {
+        // On mobile, apply FLIP animation for open+maximize
+        const content = btn.querySelector(".df-btn-content");
+
+        // FIRST: Capture current (closed) position
+        const firstBtn = btn.getBoundingClientRect();
+
+        // Open and maximize instantly
+        btn.classList.remove("df-closed");
         btn.classList.add("df-maximized");
-        updateHeaderButtons();
+
+        // LAST: Capture final position
+        const lastBtn = btn.getBoundingClientRect();
+
+        // INVERT
+        const btnDeltaX = firstBtn.left - lastBtn.left;
+        const btnDeltaY = firstBtn.top - lastBtn.top;
+        const btnScaleX = firstBtn.width / Math.max(lastBtn.width, 0.0001);
+        const btnScaleY = firstBtn.height / Math.max(lastBtn.height, 0.0001);
+
+        btn.style.transform = `translate(${btnDeltaX}px, ${btnDeltaY}px) scale(${btnScaleX}, ${btnScaleY})`;
+
+        if (content) {
+          content.classList.add("df-content-animating");
+          content.style.opacity = "0.95";
+        }
+
+        // Force reflow
+        btn.getBoundingClientRect();
+
+        // PLAY
+        btn.classList.add("df-animating");
+        btn.style.transform = "";
+
+        // Cleanup
+        const onTransitionEnd = () => {
+          btn.classList.remove("df-animating");
+          if (content) {
+            content.classList.remove("df-content-animating");
+            content.style.opacity = "";
+          }
+          updateHeaderButtons();
+        };
+
+        btn.addEventListener("transitionend", onTransitionEnd, { once: true });
+
+        setTimeout(() => {
+          btn.classList.remove("df-animating");
+          if (content) {
+            content.classList.remove("df-content-animating");
+            content.style.opacity = "";
+          }
+          updateHeaderButtons();
+        }, 500);
+      } else {
+        // Desktop: just toggle open
+        dfToggle();
       }
     }
     // If open, do nothing (let header buttons handle maximize/minimize/close)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aumera-on-screen-widget",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "A lightweight, customizable chat widget for websites",
   "main": "df-btn.js",
   "scripts": {