147 lines
4.6 KiB
Vue
147 lines
4.6 KiB
Vue
<template>
|
|
<Transition>
|
|
<div v-if="isEtapeValid || isPageValid">
|
|
<div class="content-wrapper">
|
|
<ModaleHeader
|
|
:content="etape.title ? etape : page"
|
|
:couleur="etape.couleur || brandColor" />
|
|
<main>
|
|
<div v-for="partie in etape.parties || page.parties" class="partie">
|
|
<ModaleCarteSensible
|
|
v-if="partie.type === 'carte_sensible'"
|
|
:partie="partie" />
|
|
<ModaleTitreTexte
|
|
v-if="partie.type === 'titre_texte'"
|
|
:partie="partie"
|
|
:couleur="etape.couleur || brandColor" />
|
|
<ModaleChiffresCles
|
|
v-if="partie.type === 'chiffres_cles'"
|
|
:partie="partie"
|
|
:couleur="etape.couleur || brandColor" />
|
|
<ModaleDiaporama
|
|
v-if="partie.type === 'diaporama'"
|
|
:partie="partie" />
|
|
<ModaleEntretien
|
|
v-if="partie.type === 'entretien'"
|
|
:partie="partie"
|
|
:couleur="etape.couleur || brandColor" />
|
|
<ModaleExergue
|
|
v-if="partie.type === 'exergue'"
|
|
:partie="partie"
|
|
:couleur="etape.couleur || brandColor" />
|
|
<ModaleVideos
|
|
v-if="partie.type === 'video'"
|
|
:partie="partie" />
|
|
</div>
|
|
</main>
|
|
<ModaleFooter
|
|
:content="etape || page"
|
|
:couleur="etape.couleur || brandColor" />
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, watch, onMounted } from 'vue';
|
|
import { storeToRefs } from 'pinia';
|
|
import { useContentStore } from '../stores/content';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
|
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';
|
|
|
|
import { useUtils } from './composables/useUtils';
|
|
const { isObjectEmpty, scrollTop } = useUtils();
|
|
|
|
const router = useRouter();
|
|
const store = useContentStore();
|
|
const route = useRoute();
|
|
|
|
const { loading, error, href, etape, page } = storeToRefs(store);
|
|
|
|
const isEtapeValid = computed(() => !error.value && !loading.value && etape.value && !isObjectEmpty(etape.value));
|
|
const isPageValid = computed(() => !error.value && !loading.value && page.value && !isObjectEmpty(page.value));
|
|
|
|
const brandColor = "#80c8bf";
|
|
|
|
let isProgrammaticNavigation = false;
|
|
|
|
const handleRouteChange = () => {
|
|
watch(
|
|
() => route.params.id,
|
|
(newId) => {
|
|
if (isProgrammaticNavigation) {
|
|
isProgrammaticNavigation = false;
|
|
return;
|
|
}
|
|
|
|
if (!newId) {
|
|
store.emptyAll();
|
|
} else {
|
|
store.fetchEtapeData(newId);
|
|
if (!etape.value?.data) {
|
|
store.fetchStaticData(newId);
|
|
}
|
|
scrollTop();
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
};
|
|
|
|
const handleColorChange = () => {
|
|
watch(
|
|
() => href.value,
|
|
() => {
|
|
document.documentElement.style.setProperty('--etape-couleur', etape.value.couleur || brandColor);
|
|
}
|
|
);
|
|
};
|
|
|
|
const handleHrefChange = () => {
|
|
watch(
|
|
() => href.value,
|
|
(newHref) => {
|
|
const relativePath = newHref.split('.fr')[1];
|
|
if (relativePath && relativePath !== '' && relativePath !== '/') {
|
|
isProgrammaticNavigation = true;
|
|
router.push(relativePath);
|
|
scrollTop();
|
|
}
|
|
}
|
|
);
|
|
};
|
|
|
|
onMounted(() => {
|
|
handleRouteChange();
|
|
handleColorChange();
|
|
handleHrefChange();
|
|
});
|
|
</script>
|
|
|
|
<style scss>
|
|
.v-enter-active,
|
|
.v-leave-active {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.v-enter-from,
|
|
.v-leave-to {
|
|
transform: translateY(100%);
|
|
opacity: 0;
|
|
}
|
|
|
|
.v-leave-from {
|
|
transform: translateY(0%);
|
|
opacity: 1;
|
|
}
|
|
</style> |