aumera-on-screen-widget 0.0.7 → 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,20 +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;
-      transition: all .45s cubic-bezier(.4, 0, .2, 1) !important;
+      border-radius: 0 !important;
     }
     .df-btn.df-closed .df-btn-content {
       width: 0 !important;
@@ -190,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;
@@ -197,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
         }
 
@@ -272,6 +299,8 @@ if (!config.orgId) {
   // Get the detected language
   const detectedLang = getLanguage();
 
+  // Check if mobile device - removed unused variable
+
   document.write(`
         <button class="df-btn df-closed" onclick="dfToggle()">
             ${
@@ -282,7 +311,7 @@ if (!config.orgId) {
             <div class="df-btn-header">
             <div class="df-btn-text">${config.openText || "Chat"}</div>
             </div>
-            <iframe class="df-btn-content" src="https://chat.dev.aumera.ai/${detectedLang}/?orgId=${
+            <iframe class="df-btn-content" src="https://chat.aumera.ai/${detectedLang}/?orgId=${
     config.orgId
   }" allow="microphone *"></iframe>
         </button>
@@ -291,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
@@ -352,6 +380,9 @@ if (!config.orgId) {
       if (btnText) btnText.innerText = "";
       // remove right padding from df-btn-text
       btnText.style.paddingRight = "0";
+
+      // Only add maximize/minimize button on desktop
+
       // Add maximize/minimize button (right)
       const maxBtn = document.createElement("div");
       maxBtn.className = "maximize-minimize-btn";
@@ -369,6 +400,7 @@ if (!config.orgId) {
         e.stopPropagation();
         maximizeMinimize();
       });
+
       // Add close button (left)
       const closeBtn = document.createElement("div");
       closeBtn.className = "close-btn";
@@ -393,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() {
@@ -418,14 +498,80 @@ if (!config.orgId) {
   // Remove onclick from button, handle open/close in JS
   const btn = document.querySelector(".df-btn");
   btn.onclick = null;
-  btn.addEventListener("click", (e) => {
+
+  // Check if mobile for later use
+  const isMobile = window.innerWidth <= 768;
+
+  btn.addEventListener("click", () => {
     // Only toggle if chat is closed (popover mode)
     if (btn.classList.contains("df-closed")) {
-      dfToggle();
+      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");
+
+        // 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)
   });
 
   // Start the inactivity timer when the page loads (button is initially closed)
-  startInactivityTimer();
+  // But not on mobile since it starts open
+  if (!isMobile) {
+    startInactivityTimer();
+  }
 }

package/package.json

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