312 lines
10 KiB
Vue
312 lines
10 KiB
Vue
<template>
|
|
<div class="infinite-reader" ref="containerRef">
|
|
<!-- Navigation en haut -->
|
|
<div class="navigation-wrapper top">
|
|
<ChapterNavigation position="top" />
|
|
</div>
|
|
|
|
<div v-for="(page, index) in pages" :key="index" class="page-wrapper">
|
|
<div v-if="page?.loading" class="loading">
|
|
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
|
</div>
|
|
<div v-else-if="page?.error" class="error">
|
|
{{ page.error }}
|
|
</div>
|
|
<ReaderPage v-else-if="page?.base64Content" :page-data="page" :page-number="index + 1" :zoom="zoom" />
|
|
</div>
|
|
|
|
<!-- Navigation en bas -->
|
|
<div class="navigation-wrapper bottom">
|
|
<ChapterNavigation position="bottom" />
|
|
</div>
|
|
|
|
<!-- Bouton flottant pour revenir en haut -->
|
|
<Transition
|
|
enter-active-class="transition-all duration-300 ease-out"
|
|
leave-active-class="transition-all duration-300 ease-in"
|
|
enter-from-class="opacity-0 translate-y-5 scale-75"
|
|
enter-to-class="opacity-100 translate-y-0 scale-100"
|
|
leave-from-class="opacity-100 translate-y-0 scale-100"
|
|
leave-to-class="opacity-0 translate-y-5 scale-75"
|
|
>
|
|
<button
|
|
v-show="showScrollToTop"
|
|
@click="scrollToTop"
|
|
class="fixed bottom-6 right-6 z-[9999] bg-blue-600 hover:bg-blue-700 text-white w-12 h-12 rounded-full shadow-lg hover:shadow-xl flex items-center justify-center transition-all duration-200 hover:scale-110 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
|
title="Revenir en haut"
|
|
type="button"
|
|
>
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
|
|
</svg>
|
|
</button>
|
|
</Transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
|
|
import { useHeaderStore } from '../../../../shared/stores/headerStore';
|
|
import ChapterNavigation from './ChapterNavigation.vue';
|
|
import ReaderPage from './ReaderPage.vue';
|
|
|
|
const props = defineProps({
|
|
pages: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
zoom: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['pageVisible']);
|
|
|
|
const headerStore = useHeaderStore();
|
|
const containerRef = ref(null);
|
|
const observer = ref(null);
|
|
const windowWidth = ref(window.innerWidth);
|
|
|
|
// État pour le bouton scroll to top
|
|
const showScrollToTop = ref(false);
|
|
|
|
// Variables pour détecter la direction du scroll
|
|
let lastScrollTop = 0;
|
|
let scrollDirection = 'down';
|
|
|
|
const observeIntersection = entries => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const pageIndex = parseInt(entry.target.getAttribute('data-page-index'));
|
|
emit('pageVisible', pageIndex);
|
|
}
|
|
});
|
|
};
|
|
|
|
const setupIntersectionObserver = () => {
|
|
if (observer.value) {
|
|
observer.value.disconnect();
|
|
}
|
|
|
|
observer.value = new IntersectionObserver(observeIntersection, {
|
|
root: null,
|
|
threshold: 0.5
|
|
});
|
|
|
|
nextTick(() => {
|
|
const pageElements = containerRef.value?.querySelectorAll('.page-wrapper');
|
|
if (pageElements) {
|
|
pageElements.forEach((element, index) => {
|
|
element.setAttribute('data-page-index', index);
|
|
observer.value.observe(element);
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
// Gestion du scroll pour le bouton "revenir en haut" et le header
|
|
const handleScroll = () => {
|
|
let scrollTop = 0;
|
|
|
|
// Vérifier le scroll sur le conteneur direct
|
|
if (containerRef.value && containerRef.value.scrollTop > 0) {
|
|
scrollTop = containerRef.value.scrollTop;
|
|
} else {
|
|
// Vérifier le scroll sur les conteneurs parents
|
|
let currentElement = containerRef.value?.parentElement;
|
|
while (currentElement && scrollTop === 0) {
|
|
if (currentElement.scrollTop > 0) {
|
|
scrollTop = currentElement.scrollTop;
|
|
break;
|
|
}
|
|
currentElement = currentElement.parentElement;
|
|
}
|
|
|
|
// Vérifier le scroll sur la fenêtre
|
|
if (scrollTop === 0) {
|
|
scrollTop = window.scrollY;
|
|
}
|
|
}
|
|
|
|
// Détecter la direction du scroll
|
|
if (scrollTop > lastScrollTop) {
|
|
scrollDirection = 'down';
|
|
} else if (scrollTop < lastScrollTop) {
|
|
scrollDirection = 'up';
|
|
}
|
|
|
|
// Gestion du header auto-hide (seulement si largeur < 1200px)
|
|
if (windowWidth.value < 1200) {
|
|
headerStore.updateScrollDirection(scrollTop);
|
|
}
|
|
|
|
// Mise à jour de la visibilité du bouton
|
|
// Afficher si on scroll vers le bas et qu'on est à plus de 300px
|
|
// Masquer si on scroll vers le haut ou qu'on est en haut de page
|
|
if (scrollDirection === 'down' && scrollTop > 300) {
|
|
showScrollToTop.value = true;
|
|
} else if (scrollDirection === 'up' || scrollTop <= 100) {
|
|
showScrollToTop.value = false;
|
|
}
|
|
|
|
// Sauvegarder la position actuelle pour la prochaine comparaison
|
|
lastScrollTop = scrollTop;
|
|
};
|
|
|
|
// Fonction pour revenir en haut de la page
|
|
const scrollToTop = () => {
|
|
console.log('scrollToTop appelée'); // Debug
|
|
|
|
// Stratégie 1: Scroll sur le conteneur direct
|
|
if (containerRef.value) {
|
|
console.log('containerRef trouvé, scrollTop actuel:', containerRef.value.scrollTop); // Debug
|
|
|
|
if (containerRef.value.scrollTop > 0) {
|
|
containerRef.value.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
console.log('Scroll sur containerRef effectué'); // Debug
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Stratégie 2: Chercher le conteneur parent avec scroll
|
|
let currentElement = containerRef.value?.parentElement;
|
|
while (currentElement) {
|
|
const styles = window.getComputedStyle(currentElement);
|
|
if (styles.overflowY === 'auto' || styles.overflowY === 'scroll' || currentElement.scrollTop > 0) {
|
|
console.log('Conteneur avec scroll trouvé:', currentElement.className, 'scrollTop:', currentElement.scrollTop); // Debug
|
|
currentElement.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
return;
|
|
}
|
|
currentElement = currentElement.parentElement;
|
|
}
|
|
|
|
// Stratégie 3: Scroll sur la fenêtre entière
|
|
console.log('Scroll sur window, scrollY actuel:', window.scrollY); // Debug
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
};
|
|
|
|
watch(
|
|
() => props.pages,
|
|
() => {
|
|
setupIntersectionObserver();
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
|
|
// Gestion du redimensionnement de la fenêtre
|
|
const handleResize = () => {
|
|
const newWidth = window.innerWidth;
|
|
windowWidth.value = newWidth;
|
|
|
|
// Activer/désactiver l'auto-hide selon la largeur
|
|
if (newWidth < 1200) {
|
|
headerStore.enableAutoHide();
|
|
} else {
|
|
headerStore.disableAutoHide();
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
setupIntersectionObserver();
|
|
|
|
// Activer l'auto-hide du header si la largeur < 1200px
|
|
if (windowWidth.value < 1200) {
|
|
headerStore.enableAutoHide();
|
|
}
|
|
|
|
// Ajouter l'écouteur de scroll sur le conteneur
|
|
if (containerRef.value) {
|
|
containerRef.value.addEventListener('scroll', handleScroll, { passive: true });
|
|
}
|
|
|
|
// Ajouter l'écouteur de scroll sur la fenêtre
|
|
window.addEventListener('scroll', handleScroll, { passive: true });
|
|
|
|
// Ajouter l'écouteur de redimensionnement
|
|
window.addEventListener('resize', handleResize, { passive: true });
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
if (observer.value) {
|
|
observer.value.disconnect();
|
|
}
|
|
|
|
// Désactiver l'auto-hide du header en quittant
|
|
headerStore.disableAutoHide();
|
|
|
|
// Nettoyer l'écouteur de scroll du conteneur
|
|
if (containerRef.value) {
|
|
containerRef.value.removeEventListener('scroll', handleScroll);
|
|
}
|
|
|
|
// Nettoyer l'écouteur de scroll de la fenêtre
|
|
window.removeEventListener('scroll', handleScroll);
|
|
|
|
// Nettoyer l'écouteur de redimensionnement
|
|
window.removeEventListener('resize', handleResize);
|
|
});
|
|
</script>
|
|
|
|
<style lang="postcss" scoped>
|
|
.infinite-reader {
|
|
@apply flex-1 flex flex-col items-center overflow-y-auto relative;
|
|
/* Réduction du padding sur mobile */
|
|
@apply py-2 sm:py-8;
|
|
height: calc(100vh - 8rem);
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
.page-wrapper {
|
|
@apply w-full flex justify-center min-h-[200px];
|
|
/* Réduction des marges sur mobile */
|
|
@apply mb-2 sm:mb-4 px-1 sm:px-4;
|
|
}
|
|
|
|
.loading,
|
|
.error {
|
|
@apply flex items-center justify-center min-h-[400px];
|
|
/* Largeur adaptative selon la taille d'écran */
|
|
width: 95vw; /* Mobile : 95% de la largeur */
|
|
}
|
|
|
|
@screen sm {
|
|
.loading,
|
|
.error {
|
|
width: 80vw; /* Tablette : 80% de la largeur */
|
|
}
|
|
}
|
|
|
|
@screen lg {
|
|
.loading,
|
|
.error {
|
|
width: 70vw; /* Desktop : 70% de la largeur */
|
|
}
|
|
}
|
|
|
|
.error {
|
|
@apply text-red-500 text-xl bg-red-500/10 rounded-lg;
|
|
}
|
|
|
|
.navigation-wrapper {
|
|
@apply w-full max-w-4xl mx-auto px-4 mb-6;
|
|
}
|
|
|
|
.navigation-wrapper.top {
|
|
@apply mt-4;
|
|
}
|
|
|
|
.navigation-wrapper.bottom {
|
|
@apply mt-8 mb-4;
|
|
}
|
|
</style>
|