intento 3

templates/z_comps/boton_chat.html

@@ -1,4 +1,3 @@
-
 <style>
   .floating-btn {
     position: fixed;
@@ -17,26 +16,24 @@
       left 0.3s ease,
       right 0.3s ease,
       top 0.3s ease;
-}
+  }
 
-.floating-btn:active {
+  .floating-btn:active {
     cursor: grabbing;
-}
+  }
 
-@keyframes spin-right {
+  @keyframes spin-right {
     from {
       transform: rotate(0deg);
     }
     to {
       transform: rotate(360deg);
     }
-}
+  }
 
-.rotating {
+  .rotating {
     animation: spin-right 4s linear infinite;
-}
+  }
-
-
 </style>
 
 <div class="floating-btn border border-light shadow-lg" id="floatingBtn">
@@ -45,15 +42,9 @@
          alt="logo"
          class="img-fluid rounded-circle rotating"
          style="width: 100%; height: 100%;">
-
   </a>
 </div>
 
-
-
-
-
-
 <script>
   document.addEventListener('DOMContentLoaded', function () {
     const btn = document.getElementById('floatingBtn');
@@ -61,8 +52,9 @@
     let offsetX, offsetY;
     let isDragging = false;
     let hasMoved = false;
-    let touchStartX = 0;
+    let touchStartTimer;
-    let touchStartY = 0;
+    const tapThreshold = 200; // Tiempo en milisegundos para considerar un "tap"
+    const moveThreshold = 5; // Distancia en píxeles para considerar un "move"
 
     const savedPosition = localStorage.getItem('floatingBtnPosition');
     if (savedPosition) {
@@ -75,17 +67,16 @@
       btn.style.top = '20px';
     }
 
-    // MOUSE EVENTS
+    // Eventos para mouse
     btn.addEventListener('mousedown', startDrag);
     document.addEventListener('mousemove', drag);
     document.addEventListener('mouseup', stopDrag);
 
-    // TOUCH EVENTS
+    // Eventos para touch
-    btn.addEventListener('touchstart', startDragTouch, { passive: false });
+    btn.addEventListener('touchstart', startTouch, { passive: true });
-    document.addEventListener('touchmove', dragTouch, { passive: false });
+    document.addEventListener('touchmove', moveTouch, { passive: false });
-    document.addEventListener('touchend', stopDragTouch);
+    document.addEventListener('touchend', endTouch);
 
-    // Evitar abrir link si se arrastró el botón
     link.addEventListener('click', function (e) {
       if (hasMoved) {
         e.preventDefault();
@@ -121,7 +112,7 @@
       hasMoved = true;
     }
 
-    function stopDrag(e) {
+    function stopDrag() {
       if (!isDragging) return;
 
       isDragging = false;
@@ -135,60 +126,55 @@
       savePosition(x, y);
     }
 
-    function startDragTouch(e) {
+    function startTouch(e) {
       if (e.touches.length !== 1) return;
-      isDragging = true;
+
       hasMoved = false;
+      const touch = e.touches[0];
+      const startX = touch.clientX;
+      const startY = touch.clientY;
 
+      touchStartTimer = setTimeout(() => {
+        // Si el temporizador termina y no ha habido movimiento, consideramos un tap
+        link.click();
+      }, tapThreshold);
+
+      // Preparar para el movimiento
       const rect = btn.getBoundingClientRect();
-      offsetX = e.touches[0].clientX - rect.left;
+      offsetX = startX - rect.left;
-      offsetY = e.touches[0].clientY - rect.top;
+      offsetY = startY - rect.top;
+    }
 
-      touchStartX = e.touches[0].clientX;
+    function moveTouch(e) {
-      touchStartY = e.touches[0].clientY;
+      if (!touchStartTimer || e.touches.length !== 1) return;
+
+      const touch = e.touches[0];
+      const currentX = touch.clientX;
+      const currentY = touch.clientY;
+
+      // Verificar si el movimiento supera el umbral
+      if (Math.abs(currentX - (touch.clientX - offsetX)) > moveThreshold || Math.abs(currentY - (touch.clientY - offsetY)) > moveThreshold) {
+        clearTimeout(touchStartTimer); // Cancelar el temporizador si hay movimiento
+        isDragging = true;
+        hasMoved = true;
 
         btn.style.cursor = 'grabbing';
-      btn.style.left = `${rect.left}px`;
+        btn.style.left = `${currentX - offsetX}px`;
-      btn.style.top = `${rect.top}px`;
+        btn.style.top = `${currentY - offsetY}px`;
         btn.style.right = 'auto';
-
+        e.preventDefault(); // Evitar el scroll durante el arrastre
-      e.preventDefault();
+      }
     }
 
-    function dragTouch(e) {
+    function endTouch(e) {
-      if (!isDragging || e.touches.length !== 1) return;
+      clearTimeout(touchStartTimer);
-
+      if (isDragging) {
-      const currentX = e.touches[0].clientX;
-      const currentY = e.touches[0].clientY;
-
-      const deltaX = Math.abs(currentX - touchStartX);
-      const deltaY = Math.abs(currentY - touchStartY);
-
-      if (deltaX > 5 || deltaY > 5) {
-        hasMoved = true;
-      }
-
-      const x = currentX - offsetX;
-      const y = currentY - offsetY;
-
-      btn.style.left = `${x}px`;
-      btn.style.top = `${y}px`;
-
-      e.preventDefault(); // evita scroll
-    }
-
-    function stopDragTouch(e) {
-      if (!isDragging) return;
-
         isDragging = false;
         btn.style.cursor = 'move';
-
         const rect = btn.getBoundingClientRect();
-      const x = rect.left;
+        stickToNearestSide(rect.left, rect.top);
-      const y = rect.top;
+        savePosition(rect.left, rect.top);
-
+      }
-      stickToNearestSide(x, y);
-      savePosition(x, y);
     }
 
     function stickToNearestSide(x, y) {