From 52369e047985a9a19ee2f89f414400d8f75c2ddb Mon Sep 17 00:00:00 2001
From: David Itehua Xalamihua <davidix1991@gmail.com>
Date: Wed, 21 May 2025 21:00:26 -0600
Subject: [PATCH] intento 3

---
 templates/z_comps/boton_chat.html | 174 ++++++++++++++----------------
 1 file changed, 80 insertions(+), 94 deletions(-)

diff --git a/templates/z_comps/boton_chat.html b/templates/z_comps/boton_chat.html
index 640dabb..fd6ac98 100644
--- a/templates/z_comps/boton_chat.html
+++ b/templates/z_comps/boton_chat.html
@@ -1,59 +1,50 @@
-
 <style>
   .floating-btn {
-  position: fixed;
-  width: 60px;
-  height: 60px;
-  background-color: #ffffff;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: move;
-  user-select: none;
-  z-index: 1000;
-  transition:
-    background-color 0.3s,
-    left 0.3s ease,
-    right 0.3s ease,
-    top 0.3s ease;
-}
-
-.floating-btn:active {
-  cursor: grabbing;
-}
-
-@keyframes spin-right {
-  from {
-    transform: rotate(0deg);
+    position: fixed;
+    width: 60px;
+    height: 60px;
+    background-color: #ffffff;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: move;
+    user-select: none;
+    z-index: 1000;
+    transition:
+      background-color 0.3s,
+      left 0.3s ease,
+      right 0.3s ease,
+      top 0.3s ease;
   }
-  to {
-    transform: rotate(360deg);
+
+  .floating-btn:active {
+    cursor: grabbing;
   }
-}
-
-.rotating {
-  animation: spin-right 4s linear infinite;
-}
 
+  @keyframes spin-right {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
 
+  .rotating {
+    animation: spin-right 4s linear infinite;
+  }
 </style>
 
 <div class="floating-btn border border-light shadow-lg" id="floatingBtn">
   <a id="floatingBtnLink" target="_blank" href="https://chatgpt.com/g/g-6828126fba608191a2803ac89f54f504-formha-rh-para-pymes">
     <img src="{{ url_for('static', filename='y_img/logos/circulo_logo.png') }}"
-     alt="logo"
-     class="img-fluid rounded-circle rotating"
-     style="width: 100%; height: 100%;">
-
+         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 touchStartY = 0;
+    let touchStartTimer;
+    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
-    btn.addEventListener('touchstart', startDragTouch, { passive: false });
-    document.addEventListener('touchmove', dragTouch, { passive: false });
-    document.addEventListener('touchend', stopDragTouch);
+    // Eventos para touch
+    btn.addEventListener('touchstart', startTouch, { passive: true });
+    document.addEventListener('touchmove', moveTouch, { passive: false });
+    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;
-      offsetY = e.touches[0].clientY - rect.top;
-
-      touchStartX = e.touches[0].clientX;
-      touchStartY = e.touches[0].clientY;
-
-      btn.style.cursor = 'grabbing';
-      btn.style.left = `${rect.left}px`;
-      btn.style.top = `${rect.top}px`;
-      btn.style.right = 'auto';
-
-      e.preventDefault();
+      offsetX = startX - rect.left;
+      offsetY = startY - rect.top;
     }
 
-    function dragTouch(e) {
-      if (!isDragging || e.touches.length !== 1) return;
+    function moveTouch(e) {
+      if (!touchStartTimer || e.touches.length !== 1) return;
 
-      const currentX = e.touches[0].clientX;
-      const currentY = e.touches[0].clientY;
+      const touch = e.touches[0];
+      const currentX = touch.clientX;
+      const currentY = touch.clientY;
 
-      const deltaX = Math.abs(currentX - touchStartX);
-      const deltaY = Math.abs(currentY - touchStartY);
-
-      if (deltaX > 5 || deltaY > 5) {
+      // 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 = `${currentX - offsetX}px`;
+        btn.style.top = `${currentY - offsetY}px`;
+        btn.style.right = 'auto';
+        e.preventDefault(); // Evitar el scroll durante el arrastre
       }
-
-      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;
-      const y = rect.top;
-
-      stickToNearestSide(x, y);
-      savePosition(x, y);
+    function endTouch(e) {
+      clearTimeout(touchStartTimer);
+      if (isDragging) {
+        isDragging = false;
+        btn.style.cursor = 'move';
+        const rect = btn.getBoundingClientRect();
+        stickToNearestSide(rect.left, rect.top);
+        savePosition(rect.left, rect.top);
+      }
     }
 
     function stickToNearestSide(x, y) {
@@ -230,4 +216,4 @@
       }
     });
   });
-</script>
+</script>
\ No newline at end of file