115 lines
3.3 KiB
Vue
115 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import emblaCarouselVue from 'embla-carousel-vue';
|
|
import { ref, onMounted } from 'vue';
|
|
|
|
const [emblaRef, emblaApi] = emblaCarouselVue({
|
|
loop: false,
|
|
align: 'center',
|
|
containScroll: 'trimSnaps',
|
|
startIndex: 1,
|
|
dragFree: false,
|
|
});
|
|
|
|
const selectedIndex = ref(1);
|
|
const handlesVisible = ref(true);
|
|
let fadeTimer: ReturnType<typeof setTimeout> | null = null;
|
|
|
|
const resetFade = () => {
|
|
handlesVisible.value = true;
|
|
if (fadeTimer) clearTimeout(fadeTimer);
|
|
fadeTimer = setTimeout(() => {
|
|
handlesVisible.value = false;
|
|
}, 3000);
|
|
};
|
|
|
|
const emitPositionChange = (pos: number) => {
|
|
document.dispatchEvent(new CustomEvent('swipe-position-change', { detail: { pos } }));
|
|
};
|
|
|
|
onMounted(() => {
|
|
if (!emblaApi.value) return;
|
|
emblaApi.value.on('select', () => {
|
|
if (!emblaApi.value) return;
|
|
selectedIndex.value = emblaApi.value.selectedScrollSnap();
|
|
sessionStorage.setItem('pc-position', String(selectedIndex.value));
|
|
emitPositionChange(selectedIndex.value);
|
|
resetFade();
|
|
});
|
|
const saved = sessionStorage.getItem('pc-position');
|
|
if (saved !== null) {
|
|
const idx = Number(saved);
|
|
if (!Number.isNaN(idx)) emblaApi.value.scrollTo(idx, false);
|
|
}
|
|
// Ecoute les clics de la MobileTabBar
|
|
document.addEventListener('mobile-tab-scroll', (e: Event) => {
|
|
const detail = (e as CustomEvent<{ pos: number }>).detail;
|
|
if (detail && typeof detail.pos === 'number') {
|
|
emblaApi.value?.scrollTo(detail.pos);
|
|
}
|
|
});
|
|
resetFade();
|
|
});
|
|
|
|
const scrollTo = (idx: number) => {
|
|
emblaApi.value?.scrollTo(idx);
|
|
resetFade();
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative h-full" @pointerdown="resetFade" @touchstart="resetFade">
|
|
<div ref="emblaRef" class="embla h-full overflow-hidden">
|
|
<div class="embla__container flex h-full">
|
|
<div class="embla__slide flex-[0_0_100%] h-full overflow-y-auto">
|
|
<slot name="left" />
|
|
</div>
|
|
<div class="embla__slide flex-[0_0_100%] h-full overflow-y-auto">
|
|
<slot name="center" />
|
|
</div>
|
|
<div class="embla__slide flex-[0_0_100%] h-full overflow-y-auto">
|
|
<slot name="right" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
v-if="selectedIndex !== 0"
|
|
type="button"
|
|
:class="[
|
|
'absolute left-2 top-1/2 -translate-y-1/2 p-2 bg-white/70 rounded-full shadow transition-opacity duration-300',
|
|
handlesVisible ? 'opacity-100' : 'opacity-0',
|
|
]"
|
|
aria-label="Panneau gauche"
|
|
@click="scrollTo(selectedIndex - 1)"
|
|
>
|
|
←
|
|
</button>
|
|
<button
|
|
v-if="selectedIndex !== 2"
|
|
type="button"
|
|
:class="[
|
|
'absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-white/70 rounded-full shadow transition-opacity duration-300',
|
|
handlesVisible ? 'opacity-100' : 'opacity-0',
|
|
]"
|
|
aria-label="Panneau droit"
|
|
@click="scrollTo(selectedIndex + 1)"
|
|
>
|
|
→
|
|
</button>
|
|
|
|
<div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-10">
|
|
<button
|
|
v-for="i in 3"
|
|
:key="i"
|
|
type="button"
|
|
:class="[
|
|
'w-2 h-2 rounded-full transition-colors',
|
|
selectedIndex === i - 1 ? 'bg-neutral-900' : 'bg-neutral-400',
|
|
]"
|
|
:aria-label="`Position ${i}`"
|
|
@click="scrollTo(i - 1)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|