From ff235ca40b0fc977e6213475f9d8ee6999e58567 Mon Sep 17 00:00:00 2001
From: David Itehua Xalamihua <davidix1991@gmail.com>
Date: Sat, 24 May 2025 13:27:44 -0600
Subject: [PATCH] =?UTF-8?q?m=C3=A1s=20intentos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/z_comps/boton_chat.html | 269 +++++++++++++-----------------
 1 file changed, 113 insertions(+), 156 deletions(-)

diff --git a/templates/z_comps/boton_chat.html b/templates/z_comps/boton_chat.html
index 9e27507..ae9ad18 100644
--- a/templates/z_comps/boton_chat.html
+++ b/templates/z_comps/boton_chat.html
@@ -34,17 +34,15 @@
 </div>
 
 
-
 <script>
-  document.addEventListener('DOMContentLoaded', function () {
+document.addEventListener('DOMContentLoaded', function () {
   const btn = document.getElementById('floatingBtn');
   const link = document.getElementById('floatingBtnLink');
   let offsetX, offsetY;
   let isDragging = false;
   let hasMoved = false;
   let startClientX, startClientY;
-  const moveThreshold = 10; // Aumenté el umbral para mejor experiencia táctil
-  let tapTimer;
+  const moveThreshold = 10;
 
   // Cargar posición guardada
   const savedPosition = localStorage.getItem('floatingBtnPosition');
@@ -58,55 +56,48 @@
     btn.style.top = '20px';
   }
 
-  // Eventos para mouse
+  // Mouse
   btn.addEventListener('mousedown', startInteraction);
   document.addEventListener('mousemove', moveInteraction);
   document.addEventListener('mouseup', endInteraction);
 
-  // Eventos para touch
+  // Touch
   btn.addEventListener('touchstart', handleTouchStart, { passive: false });
+  btn.addEventListener('touchmove', handleTouchMove, { passive: false });
   btn.addEventListener('touchend', handleTouchEnd, { passive: false });
-  document.addEventListener('touchmove', handleTouchMove, { passive: false });
 
-  // Manejar el clic/enlace
-  link.addEventListener('click', handleLinkClick);
+  link.addEventListener('click', (e) => {
+    if (hasMoved) e.preventDefault();
+    hasMoved = false;
+  });
 
   function handleTouchStart(e) {
     e.preventDefault();
     const touch = e.touches[0];
     startClientX = touch.clientX;
     startClientY = touch.clientY;
-    
+
     const rect = btn.getBoundingClientRect();
     offsetX = startClientX - rect.left;
     offsetY = startClientY - rect.top;
-    
+
     isDragging = false;
     hasMoved = false;
-    
-    // Iniciar temporizador para el tap
-    tapTimer = setTimeout(() => {
-      if (!isDragging) {
-        simulateClick(link);
-      }
-    }, 300); // 300ms es el tiempo típico para considerar un tap
   }
 
   function handleTouchMove(e) {
     if (!startClientX) return;
-    
+
     const touch = e.touches[0];
     const currentX = touch.clientX;
     const currentY = touch.clientY;
-    
+
     const deltaX = Math.abs(currentX - startClientX);
     const deltaY = Math.abs(currentY - startClientY);
-    
+
     if (deltaX > moveThreshold || deltaY > moveThreshold) {
-      clearTimeout(tapTimer);
       isDragging = true;
       hasMoved = true;
-      
       btn.style.left = `${currentX - offsetX}px`;
       btn.style.top = `${currentY - offsetY}px`;
       btn.style.right = 'auto';
@@ -115,150 +106,116 @@
   }
 
   function handleTouchEnd(e) {
-    clearTimeout(tapTimer);
+    if (isDragging) {
+      const rect = btn.getBoundingClientRect();
+      stickToNearestSide(rect.left, rect.top);
+      savePosition(rect.left, rect.top);
+    } else {
+      // Solo si NO se movió, redireccionar manualmente
+      if (!hasMoved) {
+        window.open(link.href, '_blank');
+      }
+    }
+
+    startClientX = null;
+    startClientY = null;
+    isDragging = false;
+    hasMoved = false;
+  }
+
+  function startInteraction(e) {
+    e.preventDefault();
+    const clientX = e.clientX;
+    const clientY = e.clientY;
+
+    startClientX = clientX;
+    startClientY = clientY;
+
+    const rect = btn.getBoundingClientRect();
+    offsetX = clientX - rect.left;
+    offsetY = clientY - rect.top;
+
+    btn.style.left = `${rect.left}px`;
+    btn.style.top = `${rect.top}px`;
+    btn.style.right = 'auto';
+    btn.style.bottom = 'auto';
+
+    btn.style.cursor = 'grabbing';
+  }
+
+  function moveInteraction(e) {
+    if (!startClientX) return;
+
+    const clientX = e.clientX;
+    const clientY = e.clientY;
+
+    const currentX = clientX - offsetX;
+    const currentY = clientY - offsetY;
+
+    const deltaX = Math.abs(clientX - startClientX);
+    const deltaY = Math.abs(clientY - startClientY);
+
+    if (deltaX > moveThreshold || deltaY > moveThreshold) {
+      isDragging = true;
+      hasMoved = true;
+    }
+
+    if (isDragging) {
+      btn.style.left = `${currentX}px`;
+      btn.style.top = `${currentY}px`;
+      e.preventDefault();
+    }
+  }
+
+  function endInteraction() {
+    startClientX = null;
+    startClientY = null;
+
     if (isDragging) {
       isDragging = false;
+      btn.style.cursor = 'move';
       const rect = btn.getBoundingClientRect();
       stickToNearestSide(rect.left, rect.top);
       savePosition(rect.left, rect.top);
     }
-    startClientX = null;
-    startClientY = null;
   }
 
-  function simulateClick(element) {
-    const clickEvent = new MouseEvent('click', {
-      bubbles: true,
-      cancelable: true,
-      view: window
-    });
-    element.dispatchEvent(clickEvent);
+  function stickToNearestSide(x, y) {
+    const windowWidth = window.innerWidth;
+    const windowHeight = window.innerHeight;
+    const btnWidth = btn.offsetWidth;
+    const btnHeight = btn.offsetHeight;
+    const padding = 10;
+
+    if (x < windowWidth / 2 - btnWidth / 2) {
+      btn.style.left = `${padding}px`;
+      btn.style.right = 'auto';
+    } else {
+      btn.style.left = 'auto';
+      btn.style.right = `${padding}px`;
+    }
+
+    let newY = y;
+    if (y < padding) newY = padding;
+    else if (y + btnHeight > windowHeight - padding) newY = windowHeight - btnHeight - padding;
+    btn.style.top = `${newY}px`;
   }
 
-  function handleLinkClick(e) {
-    if (hasMoved) {
-      e.preventDefault();
-    }
-    hasMoved = false;
+  function savePosition(x, y) {
+    localStorage.setItem('floatingBtnPosition', JSON.stringify({
+      x: btn.style.left,
+      y: btn.style.top
+    }));
   }
 
-  // Funciones restantes igual que antes...
-    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 = clientX - rect.left;
-      offsetY = clientY - rect.top;
-
-      // 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'; // Desactivar 'right' para evitar conflictos
-      btn.style.bottom = 'auto'; // Desactivar 'bottom' si estuviera activo
-
-      btn.style.cursor = 'grabbing'; // Cambiar cursor mientras se "agarra"
-    }
-
-    function moveInteraction(e) {
-      if (!startClientX) return; // Si no hay inicio de interacción, salimos
-
-      const clientX = e.clientX || e.touches[0].clientX;
-      const clientY = e.clientY || e.touches[0].clientY;
-
-      const currentX = clientX - offsetX;
-      const currentY = clientY - offsetY;
-
-      // Detectar si el movimiento supera el umbral
-      const deltaX = Math.abs(clientX - startClientX);
-      const deltaY = Math.abs(clientY - startClientY);
-
-      if (deltaX > moveThreshold || deltaY > moveThreshold) {
-        isDragging = true; // Confirmamos que es un arrastre
-        hasMoved = true;   // Se ha movido significativamente
-      }
-
-      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();
-      }
-    }
-
-    function endInteraction() {
-      // Resetear las coordenadas iniciales del toque
-      startClientX = null;
-      startClientY = null;
-
-      if (isDragging) {
-        isDragging = false; // Finalizar el estado de arrastre
-        btn.style.cursor = 'move'; // Restaurar cursor
-
-        const rect = btn.getBoundingClientRect();
-        stickToNearestSide(rect.left, rect.top); // Anclar a la posición final
-        savePosition(rect.left, rect.top);       // Guardar la posición
-      }
-      // hasMoved se reseteará en el evento 'click' del enlace o en la siguiente 'startInteraction'
-    }
-
-
-    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
-
-      // 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 = `${padding}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`;
-    }
-
-    function savePosition(x, y) {
-      localStorage.setItem('floatingBtnPosition', JSON.stringify({
-        x: btn.style.left,
-        y: btn.style.top
-      }));
-    }
-
   window.addEventListener('resize', function () {
-      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);
-      }
-    });
-
+    const saved = localStorage.getItem('floatingBtnPosition');
+    if (saved) {
+      const { x, y } = JSON.parse(saved);
+      stickToNearestSide(parseInt(x), parseInt(y));
+    } else {
+      stickToNearestSide(btn.getBoundingClientRect().left, btn.getBoundingClientRect().top);
+    }
+  });
 });
-</script>
\ No newline at end of file
+</script>