más intentos

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
+  const moveThreshold = 10;
-  let tapTimer;
 
   // Cargar posición guardada
   const savedPosition = localStorage.getItem('floatingBtnPosition');
@@ -58,18 +56,20 @@
     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', (e) => {
-  link.addEventListener('click', handleLinkClick);
+    if (hasMoved) e.preventDefault();
+    hasMoved = false;
+  });
 
   function handleTouchStart(e) {
     e.preventDefault();
@@ -83,13 +83,6 @@
 
     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) {
@@ -103,10 +96,8 @@
     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,115 +106,88 @@
   }
 
   function handleTouchEnd(e) {
-    clearTimeout(tapTimer);
     if (isDragging) {
-      isDragging = false;
       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;
-
-  function simulateClick(element) {
-    const clickEvent = new MouseEvent('click', {
-      bubbles: true,
-      cancelable: true,
-      view: window
-    });
-    element.dispatchEvent(clickEvent);
-  }
-
-  function handleLinkClick(e) {
-    if (hasMoved) {
-      e.preventDefault();
-    }
     hasMoved = false;
   }
 
-  // Funciones restantes igual que antes...
   function startInteraction(e) {
-      // Prevenir el comportamiento por defecto del navegador (ej. arrastrar imágenes)
     e.preventDefault();
-
+    const clientX = e.clientX;
-      isDragging = false; // Resetear estado de arrastre
+    const clientY = e.clientY;
-      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.right = 'auto';
-      btn.style.bottom = 'auto'; // Desactivar 'bottom' si estuviera activo
+    btn.style.bottom = 'auto';
 
-      btn.style.cursor = 'grabbing'; // Cambiar cursor mientras se "agarra"
+    btn.style.cursor = 'grabbing';
   }
 
   function moveInteraction(e) {
-      if (!startClientX) return; // Si no hay inicio de interacción, salimos
+    if (!startClientX) return;
 
-      const clientX = e.clientX || e.touches[0].clientX;
+    const clientX = e.clientX;
-      const clientY = e.clientY || e.touches[0].clientY;
+    const clientY = e.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
+      isDragging = true;
-        hasMoved = true;   // Se ha movido significativamente
+      hasMoved = true;
     }
 
     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
+      isDragging = false;
-        btn.style.cursor = 'move'; // Restaurar cursor
+      btn.style.cursor = 'move';
-
       const rect = btn.getBoundingClientRect();
-        stickToNearestSide(rect.left, rect.top); // Anclar a la posición final
+      stickToNearestSide(rect.left, rect.top);
-        savePosition(rect.left, rect.top);       // Guardar la posición
+      savePosition(rect.left, rect.top);
     }
-      // 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
+    const padding = 10;
 
-      // Anclar al lado izquierdo o derecho
+    if (x < windowWidth / 2 - btnWidth / 2) {
-      if (x < windowWidth / 2 - btnWidth / 2) { // Considera el centro del botón
       btn.style.left = `${padding}px`;
       btn.style.right = 'auto';
     } else {
@@ -231,13 +195,9 @@
       btn.style.right = `${padding}px`;
     }
 
-      // Asegurarse de que el botón no salga por arriba o por abajo
     let newY = y;
-      if (y < padding) {
+    if (y < padding) newY = padding;
-        newY = padding;
+    else if (y + btnHeight > windowHeight - padding) newY = windowHeight - btnHeight - padding;
-      } else if (y + btnHeight > windowHeight - padding) {
-        newY = windowHeight - btnHeight - padding;
-      }
     btn.style.top = `${newY}px`;
   }
 
@@ -252,13 +212,10 @@
     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);
     }
   });
-
 });
 </script>