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() { (function initServiceModalSwipeBack() {
const modalEl = document.getElementById('serviceModal'); const modalEl = document.getElementById('serviceModal');
if (!modalEl) return; 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 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) => { modalEl.addEventListener('touchstart', (e) => {
if (!e.touches || e.touches.length !== 1) return; if (!e.touches || e.touches.length !== 1) return;
@@ -1133,27 +1133,50 @@
swipeStartX = t.clientX; swipeStartX = t.clientX;
swipeStartY = t.clientY; swipeStartY = t.clientY;
swipeTracking = true; swipeTracking = true;
// Evita que iOS/el navegador interprete este toque en el borde como su propio gesto de "volver" swipeCancelled = false;
e.preventDefault(); 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 { } else {
swipeTracking = false; swipeTracking = false;
} }
}, { passive: false }); }, { passive: false });
modalEl.addEventListener('touchmove', (e) => { modalEl.addEventListener('touchmove', (e) => {
if (!swipeTracking) return; if (!swipeTracking || swipeCancelled) return;
// Seguimos bloqueando el gesto nativo mientras dura nuestro swipe 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(); e.preventDefault();
}, { passive: false }); }, { passive: false });
modalEl.addEventListener('touchend', (e) => { modalEl.addEventListener('touchend', () => {
if (!swipeTracking) return; if (!swipeTracking) return;
swipeTracking = false; swipeTracking = false;
const t = e.changedTouches[0]; if (swipeCancelled) return;
const dx = t.clientX - swipeStartX; modalEl.style.transition = 'transform 0.22s ease-out';
const dy = t.clientY - swipeStartY; if (swipeDx > SWIPE_THRESHOLD) {
if (dx > SWIPE_THRESHOLD && Math.abs(dy) < 60) { modalEl.style.transform = 'translateX(100%)'; // termina de salir hacia la derecha
closeModal(); 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 }); }, { passive: true });
})(); })();