<template> <Transition> <div v-if="!loading && (contentType === 'etape' || contentType === 'static')"> <div class="content-wrapper"> <ModaleHeader :contentType="contentType" :content="content" :couleur="content.couleur || brandColor" /> <main> <div v-for="partie in content.parties" class="partie"> <ModaleCarteSensible v-if="partie.type === 'carte_sensible'" :partie="partie" /> <ModaleTitreTexte v-if="partie.type === 'titre_texte'" :partie="partie" :couleur="content.couleur || brandColor" /> <ModaleChiffresCles v-if="partie.type === 'chiffres_cles'" :partie="partie" :couleur="content.couleur || brandColor" /> <ModaleDiaporama v-if="partie.type === 'diaporama'" :partie="partie" :couleur="content.couleur || brandColor" /> <ModaleEntretien v-if="partie.type === 'entretien'" :partie="partie" :couleur="content.couleur || brandColor" /> <ModaleExergue v-if="partie.type === 'exergue'" :partie="partie" :couleur="content.couleur || brandColor" /> <ModaleVideos v-if="partie.type === 'video'" :partie="partie" /> </div> </main> <ModaleFooter :contentType="contentType" :content="content" :couleur="content.couleur || brandColor" /> </div> </div> </Transition> </template> <script setup> import { computed, watch, onMounted } from 'vue'; import { storeToRefs } from 'pinia'; import { useContentStore } from '../stores/content'; import { useMapStore } from '../stores/map'; import { useLayoutStore } from '../stores/layout'; import ModaleHeader from './components/ModaleHeader.vue'; import ModaleFooter from './components/ModaleFooter.vue'; import ModaleCarteSensible from './components/parties/ModaleCarteSensible.vue'; import ModaleTitreTexte from './components/parties/ModaleTitreTexte.vue'; import ModaleChiffresCles from './components/parties/ModaleChiffresCles.vue'; import ModaleDiaporama from './components/parties/ModaleDiaporama.vue'; import ModaleEntretien from './components/parties/ModaleEntretien.vue'; import ModaleExergue from './components/parties/ModaleExergue.vue'; import ModaleVideos from './components/parties/ModaleVideos.vue'; const store = useContentStore(); const mapState = useMapStore(); const layoutStore = useLayoutStore(); // pour importer le breakpoint // const { minDesktopWidth } = storeToRefs(layoutStore); // console.log(minDesktopWidth); const { contentType, content, loading, error, } = storeToRefs(store); const { map, duration } = storeToRefs(mapState); let isModaleEtape, wasModaleEtape; const brandColor = "#80c8bf"; const handleColorChange = () => { watch( () => content.value.couleur, () => { if (contentType.value === 'etape' && content.value.couleur) { document.documentElement.style.setProperty('--etape-couleur', content.value.couleur || brandColor); } } ); }; const handleMapMovement = () => { watch( () => loading.value, () => { if (!loading.value) { isModaleEtape = contentType.value === 'etape'; if (!wasModaleEtape && isModaleEtape) { // national -> détail document.documentElement.style.setProperty('--modale-enter-delay', `${duration.value}s`); mapState.zoomToPlace(content.value.coordinates.lat, content.value.coordinates.lon); } else if (wasModaleEtape && isModaleEtape) { // détail -> détail document.documentElement.style.setProperty('--modale-leave-delay', 0); document.documentElement.style.setProperty('--modale-enter-delay', `${duration.value * 2}s`); mapState.resetMap(map.value); setTimeout(() => { mapState.zoomToPlace(content.value.coordinates.lat, content.value.coordinates.lon); }, duration.value * 1000); } else if (wasModaleEtape && !isModaleEtape) { // détail -> national document.documentElement.style.setProperty('--modale-leave-delay', 0); document.documentElement.style.setProperty('--modale-enter-delay', `${duration.value}s`); mapState.resetMap(); } else if (!wasModaleEtape && !isModaleEtape) { // national -> national console.log('national -> national'); document.documentElement.style.setProperty('--modale-leave-delay', 0); document.documentElement.style.setProperty('--modale-enter-delay', '0.5s'); } wasModaleEtape = isModaleEtape; } }, ); }; onMounted(() => { isModaleEtape = contentType.value === 'etape'; wasModaleEtape = isModaleEtape; handleColorChange(); handleMapMovement(); }); </script> <style scoped scss> .v-enter-active { transition: margin-top 0.5s ease-out var(--modale-enter-delay); } .v-leave-active { transition: margin-top 0.5s ease-in var(--modale-leave-delay); } .v-enter-from, .v-leave-to { margin-top: 150vh; } .v-enter-to, .v-leave-from { margin-top: 0vh; } </style>