dix/formha
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

intento 3

Browse Source
This commit is contained in:
David Itehua Xalamihua 2025-05-21 21:00:26 -06:00
parent de0c584f68
commit 52369e0479
1 changed files with 80 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
templates/z_comps/boton_chat.html
View File

@ -1,4 +1,3 @@
<style> <style>
.floating-btn { .floating-btn {
position: fixed; position: fixed;
@ -35,8 +34,6 @@
.rotating { .rotating {
animation: spin-right 4s linear infinite; animation: spin-right 4s linear infinite;
} }
</style> </style>
<div class="floating-btn border border-light shadow-lg" id="floatingBtn"> <div class="floating-btn border border-light shadow-lg" id="floatingBtn">
@ -45,15 +42,9 @@
alt="logo" alt="logo"
class="img-fluid rounded-circle rotating" class="img-fluid rounded-circle rotating"
style="width: 100%; height: 100%;"> style="width: 100%; height: 100%;">
</a> </a>
</div> </div>
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const btn = document.getElementById('floatingBtn'); const btn = document.getElementById('floatingBtn');
@ -61,8 +52,9 @@
let offsetX, offsetY; let offsetX, offsetY;
let isDragging = false; let isDragging = false;
let hasMoved = false; let hasMoved = false;
let touchStartX = 0; let touchStartTimer;
let touchStartY = 0; const tapThreshold = 200; // Tiempo en milisegundos para considerar un "tap"
const moveThreshold = 5; // Distancia en píxeles para considerar un "move"
const savedPosition = localStorage.getItem('floatingBtnPosition'); const savedPosition = localStorage.getItem('floatingBtnPosition');
if (savedPosition) { if (savedPosition) {
@ -75,17 +67,16 @@
btn.style.top = '20px'; btn.style.top = '20px';
} }
// MOUSE EVENTS // Eventos para mouse
btn.addEventListener('mousedown', startDrag); btn.addEventListener('mousedown', startDrag);
document.addEventListener('mousemove', drag); document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', stopDrag); document.addEventListener('mouseup', stopDrag);
// TOUCH EVENTS // Eventos para touch
btn.addEventListener('touchstart', startDragTouch, { passive: false }); btn.addEventListener('touchstart', startTouch, { passive: true });
document.addEventListener('touchmove', dragTouch, { passive: false }); document.addEventListener('touchmove', moveTouch, { passive: false });
document.addEventListener('touchend', stopDragTouch); document.addEventListener('touchend', endTouch);
// Evitar abrir link si se arrastró el botón
link.addEventListener('click', function (e) { link.addEventListener('click', function (e) {
if (hasMoved) { if (hasMoved) {
e.preventDefault(); e.preventDefault();
@ -121,7 +112,7 @@
hasMoved = true; hasMoved = true;
} }
function stopDrag(e) { function stopDrag() {
if (!isDragging) return; if (!isDragging) return;
isDragging = false; isDragging = false;
@ -135,60 +126,55 @@
savePosition(x, y); savePosition(x, y);
} }
function startDragTouch(e) { function startTouch(e) {
if (e.touches.length !== 1) return; if (e.touches.length !== 1) return;
isDragging = true;
hasMoved = false; hasMoved = false;
const touch = e.touches[0];
const startX = touch.clientX;
const startY = touch.clientY;
touchStartTimer = setTimeout(() => {
// Si el temporizador termina y no ha habido movimiento, consideramos un tap
link.click();
}, tapThreshold);
// Preparar para el movimiento
const rect = btn.getBoundingClientRect(); const rect = btn.getBoundingClientRect();
offsetX = e.touches[0].clientX - rect.left; offsetX = startX - rect.left;
offsetY = e.touches[0].clientY - rect.top; offsetY = startY - rect.top;
}
touchStartX = e.touches[0].clientX; function moveTouch(e) {
touchStartY = e.touches[0].clientY; if (!touchStartTimer || e.touches.length !== 1) 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 - (touch.clientX - offsetX)) > moveThreshold || Math.abs(currentY - (touch.clientY - offsetY)) > moveThreshold) {
clearTimeout(touchStartTimer); // Cancelar el temporizador si hay movimiento
isDragging = true;
hasMoved = true;
btn.style.cursor = 'grabbing'; btn.style.cursor = 'grabbing';
btn.style.left = `${rect.left}px`; btn.style.left = `${currentX - offsetX}px`;
btn.style.top = `${rect.top}px`; btn.style.top = `${currentY - offsetY}px`;
btn.style.right = 'auto'; btn.style.right = 'auto';
e.preventDefault(); // Evitar el scroll durante el arrastre
e.preventDefault(); }
} }
function dragTouch(e) { function endTouch(e) {
if (!isDragging || e.touches.length !== 1) return; clearTimeout(touchStartTimer);
if (isDragging) {
const currentX = e.touches[0].clientX;
const currentY = e.touches[0].clientY;
const deltaX = Math.abs(currentX - touchStartX);
const deltaY = Math.abs(currentY - touchStartY);
if (deltaX > 5 || deltaY > 5) {
hasMoved = true;
}
const x = currentX - offsetX;
const y = currentY - offsetY;
btn.style.left = `${x}px`;
btn.style.top = `${y}px`;
e.preventDefault(); // evita scroll
}
function stopDragTouch(e) {
if (!isDragging) return;
isDragging = false; isDragging = false;
btn.style.cursor = 'move'; btn.style.cursor = 'move';
const rect = btn.getBoundingClientRect(); const rect = btn.getBoundingClientRect();
const x = rect.left; stickToNearestSide(rect.left, rect.top);
const y = rect.top; savePosition(rect.left, rect.top);
}
stickToNearestSide(x, y);
savePosition(x, y);
} }
function stickToNearestSide(x, y) { function stickToNearestSide(x, y) {