From b15b7093b101cc187a072df3f89442154bdfadd5 Mon Sep 17 00:00:00 2001
From: David Itehua Xalamihua <davidix1991@gmail.com>
Date: Sat, 24 May 2025 13:11:57 -0600
Subject: [PATCH] intento 3

---
 templates/z_comps/boton_chat.html | 224 ++++++++++++++----------------
 1 file changed, 104 insertions(+), 120 deletions(-)

diff --git a/templates/z_comps/boton_chat.html b/templates/z_comps/boton_chat.html
index 25942a0..eedec72 100644
--- a/templates/z_comps/boton_chat.html
+++ b/templates/z_comps/boton_chat.html
@@ -8,10 +8,9 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    cursor: move;
-    user-select: none;
-    z-index: 1;
-    /* z-index: 1000; */
+    cursor: move; /* Indica que es arrastrable */
+    user-select: none; /* Evita selección de texto al arrastrar */
+    z-index: 1000; /* Asegura que esté por encima de otros elementos */
     transition:
       background-color 0.3s,
       left 0.3s ease,
@@ -20,11 +19,11 @@
   }
 
   .floating-btn:active {
-    cursor: grabbing;
+    cursor: grabbing; /* Cambia el cursor mientras se arrastra */
   }
-
 </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/chat_ia_formha.svg') }}"
@@ -34,174 +33,154 @@
   </a>
 </div>
 
+
+
 <script>
   document.addEventListener('DOMContentLoaded', function () {
     const btn = document.getElementById('floatingBtn');
     const link = document.getElementById('floatingBtnLink');
-    let offsetX, offsetY;
-    let isDragging = false;
-    let hasMoved = false;
-    let touchStartTimer;
-    const tapThreshold = 200; // Tiempo en milisegundos para considerar un "tap"
-    const moveThreshold = 10; // Distancia en píxeles para considerar un "move"
-    let initialTouchX, initialTouchY;
-  
+    let offsetX, offsetY; // Desplazamiento del puntero/dedo dentro del botón
+    let isDragging = false; // Estado de arrastre
+    let hasMoved = false;   // Indica si el botón se ha movido lo suficiente para ser considerado arrastre
+    let startClientX, startClientY; // Coordenadas iniciales del toque/clic
+    const moveThreshold = 5; // Distancia en píxeles para considerar un "move"
 
+    // --- Cargar y aplicar la posición guardada ---
     const savedPosition = localStorage.getItem('floatingBtnPosition');
     if (savedPosition) {
       const { x, y } = JSON.parse(savedPosition);
       btn.style.left = x;
       btn.style.top = y;
-      setTimeout(() => stickToNearestSide(parseInt(x), parseInt(y)), 10);
+      // Usamos requestAnimationFrame para asegurar que la posición se aplique después del renderizado.
+      // Esto evita posibles glitches al inicio.
+      requestAnimationFrame(() => stickToNearestSide(parseInt(x), parseInt(y)));
     } else {
+      // Posición inicial por defecto si no hay nada guardado
       btn.style.right = '20px';
       btn.style.top = '20px';
     }
 
-    // Eventos para mouse
-    btn.addEventListener('mousedown', startDrag);
-    document.addEventListener('mousemove', drag);
-    document.addEventListener('mouseup', stopDrag);
+    // --- Eventos para mouse (click y arrastre) ---
+    btn.addEventListener('mousedown', startInteraction);
+    document.addEventListener('mousemove', moveInteraction);
+    document.addEventListener('mouseup', endInteraction);
 
+    // --- Eventos para touch (tap y arrastre) ---
+    // passive: false es CRUCIAL para poder usar e.preventDefault() en touchmove y evitar el scroll no deseado.
+    btn.addEventListener('touchstart', startInteraction, { passive: false });
+    document.addEventListener('touchmove', moveInteraction, { passive: false });
+    document.addEventListener('touchend', endInteraction);
 
-    // Eventos para touch
-    btn.addEventListener('touchstart', startTouch, { passive: false });
-    btn.addEventListener('touchmove', moveTouch, { passive: false });
-    btn.addEventListener('touchend', endTouch);
-
+    // --- Evitar que el enlace se abra si se ha arrastrado el botón ---
     link.addEventListener('click', function (e) {
       if (hasMoved) {
-        e.preventDefault();
-        hasMoved = false;
+        e.preventDefault(); // Si se movió, previene el click
       }
+      hasMoved = false; // Resetear para la siguiente interacción
     });
 
-    function startDrag(e) {
-      isDragging = true;
-      hasMoved = false;
+    // --- Función para iniciar la interacción (mousedown o touchstart) ---
+    function startInteraction(e) {
+      // Prevenir el comportamiento por defecto del navegador (ej. arrastrar imágenes)
+      e.preventDefault();
 
+      isDragging = false; // Resetear estado de arrastre
+      hasMoved = false;   // Resetear estado de movimiento
+
+      // Obtener las coordenadas iniciales del evento (mouse o touch)
+      const clientX = e.clientX || e.touches[0].clientX;
+      const clientY = e.clientY || e.touches[0].clientY;
+
+      startClientX = clientX;
+      startClientY = clientY;
+
+      // Calcular el desplazamiento dentro del botón
       const rect = btn.getBoundingClientRect();
-      offsetX = e.clientX - rect.left;
-      offsetY = e.clientY - rect.top;
+      offsetX = clientX - rect.left;
+      offsetY = clientY - rect.top;
 
-      btn.style.cursor = 'grabbing';
+      // Asegurar que la posición del botón se base en left/top para el arrastre
       btn.style.left = `${rect.left}px`;
       btn.style.top = `${rect.top}px`;
-      btn.style.right = 'auto';
+      btn.style.right = 'auto'; // Desactivar 'right' para evitar conflictos
+      btn.style.bottom = 'auto'; // Desactivar 'bottom' si estuviera activo
 
-      e.preventDefault();
+      btn.style.cursor = 'grabbing'; // Cambiar cursor mientras se "agarra"
     }
 
-    function drag(e) {
-      if (!isDragging) return;
+    // --- Función para mover (mousemove o touchmove) ---
+    function moveInteraction(e) {
+      if (!startClientX) return; // Si no hay inicio de interacción, salimos
 
-      const x = e.clientX - offsetX;
-      const y = e.clientY - offsetY;
+      const clientX = e.clientX || e.touches[0].clientX;
+      const clientY = e.clientY || e.touches[0].clientY;
 
-      btn.style.left = `${x}px`;
-      btn.style.top = `${y}px`;
+      const currentX = clientX - offsetX;
+      const currentY = clientY - offsetY;
 
-      hasMoved = true;
-    }
+      // Detectar si el movimiento supera el umbral
+      const deltaX = Math.abs(clientX - startClientX);
+      const deltaY = Math.abs(clientY - startClientY);
 
-    function stopDrag() {
-      if (!isDragging) return;
+      if (deltaX > moveThreshold || deltaY > moveThreshold) {
+        isDragging = true; // Confirmamos que es un arrastre
+        hasMoved = true;   // Se ha movido significativamente
+      }
 
-      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 startTouch(e) {
-      if (e.touches.length !== 1) return;
-
-      e.preventDefault(); // Prevenir comportamiento por defecto
-      const touch = e.touches[0];
-      initialTouchX = touch.clientX;
-      initialTouchY = touch.clientY;
-
-      const rect = btn.getBoundingClientRect();
-      offsetX = initialTouchX - rect.left;
-      offsetY = initialTouchY - rect.top;
-
-      hasMoved = false;
-      touchStartTimer = setTimeout(() => {
-        if (!isDragging) {
-          link.click();
-        }
-      }, tapThreshold);
-    }
-
-
-
-    function moveTouch(e) {
-      if (!touchStartTimer || e.touches.length !== 1 || !initialTouchX) 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 - initialTouchX) > moveThreshold ||
-        Math.abs(currentY - initialTouchY) > moveThreshold) {
-        clearTimeout(touchStartTimer);
-        isDragging = true;
-        hasMoved = true;
-
-        btn.style.cursor = 'grabbing';
-        btn.style.left = `${currentX - offsetX}px`;
-        btn.style.top = `${currentY - offsetY}px`;
-        btn.style.right = 'auto';
+      if (isDragging) {
+        // Mover el botón
+        btn.style.left = `${currentX}px`;
+        btn.style.top = `${currentY}px`;
+        // Prevenir el scroll de la página solo si estamos arrastrando
         e.preventDefault();
       }
     }
 
+    // --- Función para finalizar la interacción (mouseup o touchend) ---
+    function endInteraction() {
+      // Resetear las coordenadas iniciales del toque
+      startClientX = null;
+      startClientY = null;
 
-    
-    function endTouch(e) {
-      clearTimeout(touchStartTimer);
       if (isDragging) {
-        isDragging = false;
-        btn.style.cursor = 'move';
+        isDragging = false; // Finalizar el estado de arrastre
+        btn.style.cursor = 'move'; // Restaurar cursor
+
         const rect = btn.getBoundingClientRect();
-        stickToNearestSide(rect.left, rect.top);
-        savePosition(rect.left, rect.top);
+        stickToNearestSide(rect.left, rect.top); // Anclar a la posición final
+        savePosition(rect.left, rect.top);       // Guardar la posición
       }
-      initialTouchX = null;
-      initialTouchY = null;
+      // hasMoved se reseteará en el evento 'click' del enlace o en la siguiente 'startInteraction'
     }
 
+    // --- Función para anclar el botón al lado más cercano ---
     function stickToNearestSide(x, y) {
       const windowWidth = window.innerWidth;
+      const windowHeight = window.innerHeight;
       const btnWidth = btn.offsetWidth;
+      const btnHeight = btn.offsetHeight;
+      const padding = 10; // Espacio de separación de los bordes
 
-      if (x < windowWidth / 2) {
-        btn.style.left = '10px';
+      // Anclar al lado izquierdo o derecho
+      if (x < windowWidth / 2 - btnWidth / 2) { // Considera el centro del botón
+        btn.style.left = `${padding}px`;
         btn.style.right = 'auto';
       } else {
         btn.style.left = 'auto';
-        btn.style.right = '10px';
+        btn.style.right = `${padding}px`;
       }
 
-      const windowHeight = window.innerHeight;
-      const btnHeight = btn.offsetHeight;
-
-      if (y < 0) {
-        btn.style.top = '10px';
-      } else if (y + btnHeight > windowHeight) {
-        btn.style.top = `${windowHeight - btnHeight - 10}px`;
-      } else {
-        btn.style.top = `${y}px`;
+      // Asegurarse de que el botón no salga por arriba o por abajo
+      let newY = y;
+      if (y < padding) {
+        newY = padding;
+      } else if (y + btnHeight > windowHeight - padding) {
+        newY = windowHeight - btnHeight - padding;
       }
+      btn.style.top = `${newY}px`;
     }
 
+    // --- Función para guardar la posición en localStorage ---
     function savePosition(x, y) {
       localStorage.setItem('floatingBtnPosition', JSON.stringify({
         x: btn.style.left,
@@ -209,11 +188,16 @@
       }));
     }
 
+    // --- Ajustar posición al redimensionar la ventana ---
     window.addEventListener('resize', function () {
-      const savedPosition = localStorage.getItem('floatingBtnPosition');
-      if (savedPosition) {
-        const { x, y } = JSON.parse(savedPosition);
+      const saved = localStorage.getItem('floatingBtnPosition');
+      if (saved) {
+        const { x, y } = JSON.parse(saved);
+        // Volver a anclar el botón a su lado más cercano según la nueva ventana
         stickToNearestSide(parseInt(x), parseInt(y));
+      } else {
+        // Si no hay posición guardada, anclar a la posición por defecto
+        stickToNearestSide(btn.getBoundingClientRect().left, btn.getBoundingClientRect().top);
       }
     });
   });