feat: navigation swipe mobile horizontale
All checks were successful
Deploy / Deploy to Production (push) Successful in 21s
All checks were successful
Deploy / Deploy to Production (push) Successful in 21s
- App.svelte : swipe gauche/droite → même comportement que les touches clavier (navigation entre slides) - Play.svelte : stopImmediatePropagation sur touchend, blocage du scroll vertical (touchmove) - Portfolio.svelte : migration du touch vertical (composable) vers horizontal — navigation entre projets, slide voisine aux bords, blocage scroll vertical, debounce 650ms anti-spam Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
58c31ea391
commit
e41a730b4d
3 changed files with 113 additions and 2 deletions
|
|
@ -79,9 +79,45 @@
|
|||
}
|
||||
}
|
||||
window.addEventListener('keydown', handleKeydown)
|
||||
|
||||
// Swipe gauche/droite → même comportement que les touches clavier
|
||||
const TOUCH_THRESHOLD = 50
|
||||
let touchStartX = 0
|
||||
let touchStartY = 0
|
||||
|
||||
const handleTouchStart = (e) => {
|
||||
touchStartX = e.touches[0].clientX
|
||||
touchStartY = e.touches[0].clientY
|
||||
}
|
||||
|
||||
const handleTouchEnd = (e) => {
|
||||
const deltaX = touchStartX - e.changedTouches[0].clientX
|
||||
const deltaY = touchStartY - e.changedTouches[0].clientY
|
||||
if (Math.abs(deltaX) < TOUCH_THRESHOLD) return
|
||||
if (Math.abs(deltaY) > Math.abs(deltaX)) return
|
||||
|
||||
const activePath = slides.active?.path ?? ''
|
||||
const currentPath = window.location.pathname.replace(/^\/en/, '') || '/'
|
||||
const isSubPage = activePath && currentPath.startsWith(activePath + '/')
|
||||
if (isSubPage) return
|
||||
|
||||
if (deltaX > 0) {
|
||||
const next = slides.all[slides.activeIndex + 1]
|
||||
if (next) slideTo(next.path)
|
||||
} else {
|
||||
const prev = slides.all[slides.activeIndex - 1]
|
||||
if (prev) slideTo(prev.path)
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('touchstart', handleTouchStart, { passive: true })
|
||||
window.addEventListener('touchend', handleTouchEnd, { passive: true })
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
window.removeEventListener('keydown', handleKeydown)
|
||||
window.removeEventListener('touchstart', handleTouchStart)
|
||||
window.removeEventListener('touchend', handleTouchEnd)
|
||||
clearTimeout(resizeTimer)
|
||||
}
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue