Fix: navigation clavier Play — capture phase + stopImmediatePropagation
All checks were successful
Deploy / Deploy to Production (push) Successful in 18s
All checks were successful
Deploy / Deploy to Production (push) Successful in 18s
- Handler enregistré en { capture: true } → s'exécute avant App.svelte
- stopImmediatePropagation quand navigation interne (pas aux limites)
→ empêche App de changer de slide en même temps
- Aux limites : aucune interception → App gère naturellement la slide adjacente
- Supprimé : slideTo import, prevSlidePath/nextSlidePath (inutiles)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
fdab621b48
commit
34635f7982
1 changed files with 13 additions and 19 deletions
|
|
@ -1,16 +1,13 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import { slides } from '@state/slides.svelte'
|
||||
import { slideTo } from '@router'
|
||||
import ResponsivePicture from '@components/ui/ResponsivePicture.svelte'
|
||||
|
||||
let { data } = $props()
|
||||
|
||||
// --- Derived ---
|
||||
const isActive = $derived(slides.active?.id === 'jouer')
|
||||
const games = $derived(data?.games ?? [])
|
||||
const prevSlidePath = $derived(slides.all[slides.activeIndex - 1]?.path ?? null)
|
||||
const nextSlidePath = $derived(slides.all[slides.activeIndex + 1]?.path ?? null)
|
||||
const isActive = $derived(slides.active?.id === 'jouer')
|
||||
const games = $derived(data?.games ?? [])
|
||||
|
||||
// --- State ---
|
||||
let currentIndex = $state(0)
|
||||
|
|
@ -73,22 +70,19 @@
|
|||
}
|
||||
|
||||
// --- Clavier ---
|
||||
// Enregistré en capture pour s'exécuter avant le handler global de App.svelte.
|
||||
// Si la navigation reste dans Play (pas aux limites), on bloque App via
|
||||
// stopImmediatePropagation. Aux limites, on ne fait rien : App navigue normalement.
|
||||
function onKeyDown(e) {
|
||||
if (!isActive) return
|
||||
if (e.key === 'ArrowRight') {
|
||||
if (e.key === 'ArrowRight' && currentIndex < games.length - 1) {
|
||||
e.stopImmediatePropagation()
|
||||
e.preventDefault()
|
||||
if (currentIndex < games.length - 1) {
|
||||
selectGame(currentIndex + 1)
|
||||
} else if (nextSlidePath) {
|
||||
slideTo(nextSlidePath)
|
||||
}
|
||||
} else if (e.key === 'ArrowLeft') {
|
||||
selectGame(currentIndex + 1)
|
||||
} else if (e.key === 'ArrowLeft' && currentIndex > 0) {
|
||||
e.stopImmediatePropagation()
|
||||
e.preventDefault()
|
||||
if (currentIndex > 0) {
|
||||
selectGame(currentIndex - 1)
|
||||
} else if (prevSlidePath) {
|
||||
slideTo(prevSlidePath)
|
||||
}
|
||||
selectGame(currentIndex - 1)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -107,9 +101,9 @@
|
|||
})
|
||||
|
||||
onMount(() => {
|
||||
window.addEventListener('keydown', onKeyDown)
|
||||
window.addEventListener('keydown', onKeyDown, { capture: true })
|
||||
return () => {
|
||||
window.removeEventListener('keydown', onKeyDown)
|
||||
window.removeEventListener('keydown', onKeyDown, { capture: true })
|
||||
clearTimeout(t1)
|
||||
clearTimeout(t2)
|
||||
clearTimeout(t3)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue