marsalva/App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Swipe: el modal ahora se desliza en horizontal siguiendo al dedo

Browse Source
This commit is contained in:
marsalva
2026-09-13 17:30:23 +00:00
parent 75dd0cd5b4
commit 25a413ac69
1 changed files with 35 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
calendario.html
View File

@@ -1122,9 +1122,9 @@
(function initServiceModalSwipeBack() {
const modalEl = document.getElementById('serviceModal');
if (!modalEl) return;
let swipeStartX = 0, swipeStartY = 0, swipeTracking = false;
let swipeStartX = 0, swipeStartY = 0, swipeTracking = false, swipeDx = 0, swipeCancelled = false;
const EDGE_ZONE = 35; // px desde el borde izquierdo donde debe empezar el gesto
const SWIPE_THRESHOLD = 90; // px minimos de desplazamiento horizontal para considerar 'volver'
const SWIPE_THRESHOLD = 90; // px minimos para considerar 'volver'
modalEl.addEventListener('touchstart', (e) => {
if (!e.touches || e.touches.length !== 1) return;
@@ -1133,27 +1133,50 @@
swipeStartX = t.clientX;
swipeStartY = t.clientY;
swipeTracking = true;
// Evita que iOS/el navegador interprete este toque en el borde como su propio gesto de "volver"
e.preventDefault();
swipeCancelled = false;
swipeDx = 0;
modalEl.style.transition = 'none'; // seguimos el dedo sin animacion mientras arrastra
e.preventDefault(); // evita que iOS interprete esto como su propio gesto de "volver"
} else {
swipeTracking = false;
}
}, { passive: false });
modalEl.addEventListener('touchmove', (e) => {
if (!swipeTracking) return;
// Seguimos bloqueando el gesto nativo mientras dura nuestro swipe
if (!swipeTracking || swipeCancelled) return;
const t = e.touches[0];
const dx = t.clientX - swipeStartX;
const dy = t.clientY - swipeStartY;
if (Math.abs(dy) > 60 && Math.abs(dy) > Math.abs(dx)) {
// Movimiento mas vertical que horizontal: no era un swipe de volver, lo cancelamos
swipeCancelled = true;
modalEl.style.transition = '';
modalEl.style.transform = '';
return;
}
swipeDx = Math.max(0, dx);
modalEl.style.transform = `translateX(${swipeDx}px)`; // el modal sigue al dedo en horizontal
e.preventDefault();
}, { passive: false });
modalEl.addEventListener('touchend', (e) => {
modalEl.addEventListener('touchend', () => {
if (!swipeTracking) return;
swipeTracking = false;
const t = e.changedTouches[0];
const dx = t.clientX - swipeStartX;
const dy = t.clientY - swipeStartY;
if (dx > SWIPE_THRESHOLD && Math.abs(dy) < 60) {
closeModal();
if (swipeCancelled) return;
modalEl.style.transition = 'transform 0.22s ease-out';
if (swipeDx > SWIPE_THRESHOLD) {
modalEl.style.transform = 'translateX(100%)'; // termina de salir hacia la derecha
setTimeout(() => {
modalEl.style.transition = '';
modalEl.style.transform = '';
closeModal();
}, 220);
} else {
modalEl.style.transform = 'translateX(0px)'; // no llego al umbral: vuelve a su sitio
setTimeout(() => {
modalEl.style.transition = '';
modalEl.style.transform = '';
}, 220);
}
}, { passive: true });
})();