204 lines
7.6 KiB
HTML
204 lines
7.6 KiB
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; // 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;
|
|
// 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 (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);
|
|
|
|
// --- Evitar que el enlace se abra si se ha arrastrado el botón ---
|
|
link.addEventListener('click', function (e) {
|
|
if (hasMoved) {
|
|
e.preventDefault(); // Si se movió, previene el click
|
|
}
|
|
hasMoved = false; // Resetear para la siguiente interacción
|
|
});
|
|
|
|
// --- 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 = 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"
|
|
}
|
|
|
|
// --- Función para mover (mousemove o touchmove) ---
|
|
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();
|
|
}
|
|
}
|
|
|
|
// --- Función para finalizar la interacción (mouseup o touchend) ---
|
|
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'
|
|
}
|
|
|
|
// --- 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
|
|
|
|
// 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`;
|
|
}
|
|
|
|
// --- Función para guardar la posición en localStorage ---
|
|
function savePosition(x, y) {
|
|
localStorage.setItem('floatingBtnPosition', JSON.stringify({
|
|
x: btn.style.left,
|
|
y: btn.style.top
|
|
}));
|
|
}
|
|
|
|
// --- Ajustar posición al redimensionar la ventana ---
|
|
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> |