Se añade soporte para dispositivos táctiles en Gallery.astro para pasar de foto.
Problema solucionado
En dispositivos móviles, tablet o similares, al no aparecer las flechas para pasar de foto, había que cerrar y volver a elegir foto. Con esta PR se añade una manera intuitiva de pasar de foto usando gestos de movimiento touch{start|move|end}.
Cambios propuestos
Añadir clase swipe-element para la imagen que va a ser animada.
Añadir eventListener("touchstart", swipeImage, { passive: true }) con la opción de passive: true para mejorar rendimiento de estos eventos.
Añadir función swipeImage en la cuál se realizará la animación y la lógica para saber si hay que mostrar la siguiente image o la anterior a la actualmente mostrada.
Añadir eventListener("touchmove", ...) y evenListener("thouchend", ...) dentro de la función swipeImage.
También he probado los cambios en mi dispositivo móvil haciendo uso de pnpm dev --host.
Comprobación de cambios
[x] He revisado que no haya ninguna PR (pull request) ya abierta con un problema similar, siguiendo el apartado de buenas prácticas
[x] He revisado localmente los cambios para asegurarme de que no haya errores ni problemas.
[x] He probado estos cambios en múltiples dispositivos y navegadores para asegurarme de que la landing page se vea y funcione correctamente.
[x] He actualizado la documentación, si corresponde.
Impacto potencial
Mejoras de experiencia para usuarios de dispositivos táctiles como móvil, tablet, etc.
Contexto adicional
He probado a no realizar ninguna animación indicativa del swipe pero creo que el usuario llega a entender mejor que movimiento se está realizando si se muestra la imagen deslizándose y desapareciendo conforme se realiza la acción.
Descripción
Se añade soporte para dispositivos táctiles en
Gallery.astro
para pasar de foto.Problema solucionado
En dispositivos móviles, tablet o similares, al no aparecer las flechas para pasar de foto, había que cerrar y volver a elegir foto. Con esta PR se añade una manera intuitiva de pasar de foto usando gestos de movimiento
touch{start|move|end}
.Cambios propuestos
swipe-element
para la imagen que va a ser animada.eventListener("touchstart", swipeImage, { passive: true })
con la opción depassive: true
para mejorar rendimiento de estos eventos.swipeImage
en la cuál se realizará la animación y la lógica para saber si hay que mostrar la siguiente image o la anterior a la actualmente mostrada.eventListener("touchmove", ...)
yevenListener("thouchend", ...)
dentro de la funciónswipeImage
.Capturas de pantalla (si corresponde)
https://github.com/midudev/la-velada-web-oficial/assets/71392160/41ce5ec5-5921-4b83-b2ed-e607c2e143a0
Comprobación de cambios
Impacto potencial
Mejoras de experiencia para usuarios de dispositivos táctiles como móvil, tablet, etc.
Contexto adicional
He probado a no realizar ninguna animación indicativa del
swipe
pero creo que el usuario llega a entender mejor que movimiento se está realizando si se muestra la imagen deslizándose y desapareciendo conforme se realiza la acción.Enlaces útiles