formha/templates/z_comps/boton_chat.html

<style>
  .floating-btn {
    position: fixed;
    width: 80px;
    height: 80px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    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,
      right 0.3s ease,
      top 0.3s ease;
  }

  .floating-btn:active {
    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') }}"
         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');
  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;

  // Cargar posición guardada
  const savedPosition = localStorage.getItem('floatingBtnPosition');
  if (savedPosition) {
    const { x, y } = JSON.parse(savedPosition);
    btn.style.left = x;
    btn.style.top = y;
    requestAnimationFrame(() => stickToNearestSide(parseInt(x), parseInt(y)));
  } else {
    btn.style.right = '20px';
    btn.style.top = '20px';
  }

  // Eventos para mouse
  btn.addEventListener('mousedown', startInteraction);
  document.addEventListener('mousemove', moveInteraction);
  document.addEventListener('mouseup', endInteraction);

  // Eventos para touch
  btn.addEventListener('touchstart', handleTouchStart, { passive: false });
  btn.addEventListener('touchend', handleTouchEnd, { passive: false });
  document.addEventListener('touchmove', handleTouchMove, { passive: false });

  // Manejar el clic/enlace
  link.addEventListener('click', handleLinkClick);

  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';
      e.preventDefault();
    }
  }

  function handleTouchEnd(e) {
    clearTimeout(tapTimer);
    if (isDragging) {
      isDragging = false;
      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 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();

      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);
      }
    });

});
</script>