refactor du store et des templates suite à la refont du backend
This commit is contained in:
Valentin
@@ -1,169 +1,66 @@
|
||||
<template>
|
||||
<Transition>
|
||||
<div v-if="isEtapeValid">
|
||||
<div class="content-wrapper">
|
||||
<header>
|
||||
<div class="cover">
|
||||
<img :src="etape.vignette.url" :alt="etape.vignette.alt">
|
||||
</div>
|
||||
<div class="cartouche" :style="{ backgroundColor: etape.couleur }">
|
||||
<p>Étape n°{{etape.etape_number}}</p>
|
||||
<p>Du {{etape.dates.start.d}} {{etape.dates.start.m}} au {{ etape.dates.end.d }} {{ etape.dates.end.m }} {{ etape.dates.end.y }}</p>
|
||||
</div>
|
||||
<div class="brand-pattern" :style="{ backgroundColor: etape.couleur }">
|
||||
<div class="pattern"></div>
|
||||
</div>
|
||||
<div class="locality">
|
||||
<div class="top-triangle"></div>
|
||||
<div class="locality-title">
|
||||
<h1>{{etape.title}} <em>({{ etape.adresse.postal_code }})</em></h1>
|
||||
<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>
|
||||
</header>
|
||||
<main>
|
||||
<div v-if="etape.sensibleMap" id="sensible-map">
|
||||
<figure>
|
||||
<vue-image-zoomer
|
||||
:regular="etape.sensibleMap.url"
|
||||
:zoom="etape.sensibleMap.url"
|
||||
:zoom-amount="3.5"
|
||||
alt="Carte sensible du territoire"
|
||||
hover-message="Survolez pour zoomer dans la carte"
|
||||
/>
|
||||
<figcaption class="caption">{{ etape.sensibleMap.alt }}</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div v-for="partie in etape.parties" class="partie" @click="handleImageClick">
|
||||
|
||||
<div v-if="Object.keys(partie.chiffresCles).length" class="chiffres-cles">
|
||||
<h3>
|
||||
<div class="underline" :style="{ backgroundColor: etape.couleur }"></div>
|
||||
<p>Chiffres clés</p>
|
||||
</h3>
|
||||
<div>
|
||||
<div v-for="chiffre in partie.chiffresCles">
|
||||
<div v-html="chiffre.split('<br />')[0]" class="chiffre" :style="{ borderLeft: `solid 10px ${etape.couleur}` }"></div>
|
||||
<p v-html="chiffre.split('<br />')[1]" class="chiffre-caption" :style="{ borderLeft: `solid 10px ${etape.couleur}` }"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="partie-title">
|
||||
<h3>
|
||||
<div class="underline" :style="{ backgroundColor: etape.couleur }"></div>
|
||||
<p v-html="partie.title"></p>
|
||||
</h3>
|
||||
</div>
|
||||
<div v-html="partie.text" v-alt class="partie-content"></div>
|
||||
<swiper-container
|
||||
v-if="partie.diaporama.length"
|
||||
class="diaporama"
|
||||
:slidesPerView="1.5"
|
||||
:centeredSlides="true"
|
||||
:loop="true"
|
||||
:navigation="true"
|
||||
:pagination="true"
|
||||
:injectStyles="[`.swiper-button-next, .swiper-button-prev { z-index: 11; }`]"
|
||||
>
|
||||
<swiper-slide v-for="image in partie.diaporama" style="width: 100%">
|
||||
<figure>
|
||||
<img :src="image.url" :alt="image.alt">
|
||||
<figcaption class="caption">{{ image.alt }}</figcaption>
|
||||
</figure>
|
||||
</swiper-slide>
|
||||
</swiper-container>
|
||||
<div v-if="partie.videos.length" class="videos">
|
||||
<iframe v-for="video in partie.videos" :src="video" frameborder="0" width="100%" style="aspect-ratio: 16 / 9;"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="brand-pattern pattern-bottom" :style="{ backgroundColor: etape.couleur }">
|
||||
<div class="pattern"></div>
|
||||
</div>
|
||||
|
||||
<div v-if="etape.previous || etape.next" class="related-etape-links">
|
||||
<div v-if="etape.previous" class="card previous" @click="store.fetchEtapeData(etape.previous.nid)">
|
||||
<div class="icon">
|
||||
<div :style="{ backgroundColor: etape.previous.couleur }"></div>
|
||||
<div :style="{ backgroundColor: etape.previous.couleur }"></div>
|
||||
<div :style="{ backgroundColor: etape.previous.couleur }"></div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="infos">
|
||||
<div class="titre">{{ etape.previous.title }} <span>({{ etape.previous.postalCode }})</span></div>
|
||||
<div class="date">Du {{ etape.previous.dates.start.d }} {{ etape.previous.dates.start.m }}<br>au {{ etape.previous.dates.end.d }} {{ etape.previous.dates.end.m }} {{ etape.previous.dates.end.y }}</div>
|
||||
</div>
|
||||
<div class="vignette">
|
||||
<img :src="etape.previous.vignette.url" :alt="etape.previous.vignette.alt">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="etape.next" class="card next" @click="store.fetchEtapeData(etape.next.nid)">
|
||||
<div class="icon">
|
||||
<div :style="{ backgroundColor: etape.next.couleur }"></div>
|
||||
<div :style="{ backgroundColor: etape.next.couleur }"></div>
|
||||
<div :style="{ backgroundColor: etape.next.couleur }"></div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="infos">
|
||||
<div class="titre">{{ etape.next.title }} <span>({{ etape.next.postalCode }})</span></div>
|
||||
<div class="date">Du {{ etape.next.dates.start.d }} {{ etape.next.dates.start.m }}<br>au {{ etape.next.dates.end.d }} {{ etape.next.dates.end.m }} {{ etape.next.dates.end.y }}</div>
|
||||
</div>
|
||||
<div class="vignette">
|
||||
<img :src="etape.next.vignette.url" :alt="etape.next.vignette.alt">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<div v-if="loading">Loading...</div>
|
||||
<div v-if="error">{{ error }}</div>
|
||||
{{etape.adresse.locality}}
|
||||
-->
|
||||
|
||||
<!-- <div><pre>{{href}}</pre></div>
|
||||
|
||||
|
||||
<div><pre><b>GEOFIELD</b>{{etape.geofield}}</pre></div>
|
||||
<div><pre><b>VIGNETTE</b>{{etape.vignette}}</pre></div>
|
||||
<div><pre><b>GALERIES</b>{{etape.galeries}}</pre></div>
|
||||
<div><pre><b>PARTIES</b>{{etape.parties}}</pre></div>
|
||||
<div><pre><b>SAISON</b>{{etape.saison}}</pre></div>
|
||||
<div><pre><b>THEMATIQUES</b>{{etape.thematiques}}</pre></div>
|
||||
-->
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<ImageModale :isOpen="isModaleOpen" :image="currentImage" :swiperContent="swiperPopupContent" @close="closeImageModale" />
|
||||
|
||||
<Transition>
|
||||
<div v-if="isPageValid">
|
||||
<header>
|
||||
<h1>{{ page.title }}</h1>
|
||||
</header>
|
||||
<main>
|
||||
<div v-html="page.text"></div>
|
||||
</main>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted } from 'vue';
|
||||
import { computed, watch, onMounted } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useContentStore } from '../stores/content';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import ImageModale from './ImageModale.vue';
|
||||
|
||||
import { VueImageZoomer } from 'vue-image-zoomer'
|
||||
import 'vue-image-zoomer/dist/style.css';
|
||||
import ModaleHeader from './components/ModaleHeader.vue';
|
||||
import ModaleFooter from './components/ModaleFooter.vue';
|
||||
|
||||
// web element usage bc its 2024
|
||||
// (idk how it works but it does)
|
||||
import { register } from 'swiper/element/bundle';
|
||||
register();
|
||||
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();
|
||||
@@ -171,124 +68,65 @@ const route = useRoute();
|
||||
|
||||
const { loading, error, href, etape, page } = storeToRefs(store);
|
||||
|
||||
watch(
|
||||
() => route.params.id,
|
||||
(newId) => {
|
||||
if (!newId) {
|
||||
store.emptyAll();
|
||||
} else {
|
||||
store.fetchEtapeData(newId);
|
||||
if (!etape.value?.data) {
|
||||
store.fetchStaticData(newId);
|
||||
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;
|
||||
}
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
watch(
|
||||
() => etape.value.couleur,
|
||||
(newColor) => {
|
||||
if (newColor) {
|
||||
document.documentElement.style.setProperty('--etape-couleur', etape.value.couleur);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => href.value,
|
||||
(newHref) => {
|
||||
const relativePath = newHref.split('.fr')[1];
|
||||
if (relativePath && relativePath !== '' && relativePath !== '/') {
|
||||
router.push(relativePath);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const isObjectEmpty = (obj) => {
|
||||
if (!obj || typeof obj !== 'object') return true;
|
||||
|
||||
return !Object.keys(obj).some((key) => {
|
||||
const value = obj[key];
|
||||
if (Array.isArray(value)) return value.length > 0;
|
||||
if (typeof value === 'object') return !isObjectEmpty(value);
|
||||
return value !== null && value !== undefined && value !== '';
|
||||
});
|
||||
};
|
||||
|
||||
const isEtapeValid = computed(() => etape.value && !isObjectEmpty(etape.value));
|
||||
const isPageValid = computed(() => page.value && !isObjectEmpty(page.value));
|
||||
|
||||
const vAlt = {
|
||||
mounted : (el) => {
|
||||
const images = el.querySelectorAll('img');
|
||||
images.forEach((img) => {
|
||||
const altText = img.getAttribute('alt');
|
||||
if (altText) {
|
||||
const paragraph = document.createElement('p');
|
||||
paragraph.classList.add('caption');
|
||||
paragraph.textContent = altText;
|
||||
img.after(paragraph);
|
||||
if (!newId) {
|
||||
store.emptyAll();
|
||||
} else {
|
||||
store.fetchEtapeData(newId);
|
||||
if (!etape.value?.data) {
|
||||
store.fetchStaticData(newId);
|
||||
}
|
||||
scrollTop();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
};
|
||||
|
||||
const isModaleOpen = ref(false);
|
||||
const currentImage = ref({ src: '', alt: '' });
|
||||
const swiperPopupContent = ref([]);
|
||||
|
||||
const body = document.querySelector('body');
|
||||
const hamburger = document.querySelector('#hamburger');
|
||||
const menu = document.querySelector('#menu');
|
||||
|
||||
const openImageModale = (src, alt, swiperMedia) => {
|
||||
currentImage.value = { src, alt };
|
||||
swiperPopupContent.value = swiperMedia;
|
||||
isModaleOpen.value = true;
|
||||
body.classList.add('no-scroll');
|
||||
hamburger.style.opacity = 0;
|
||||
menu.style.display = "none";
|
||||
const handleColorChange = () => {
|
||||
watch(
|
||||
() => href.value,
|
||||
() => {
|
||||
document.documentElement.style.setProperty('--etape-couleur', etape.value.couleur || brandColor);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const closeImageModale = () => {
|
||||
isModaleOpen.value = false;
|
||||
swiperPopupContent.value = [];
|
||||
body.classList.remove('no-scroll');
|
||||
menu.style.display = "flex";
|
||||
setTimeout(() => {
|
||||
hamburger.style.opacity = 1;
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const handleImageClick = (event) => {
|
||||
const img = event.target;
|
||||
if (img.tagName === 'IMG') {
|
||||
const isSwiper = img.parentElement.parentElement.tagName === 'SWIPER-SLIDE';
|
||||
let swiperMedia = [];
|
||||
if (isSwiper) {
|
||||
const swiperEl = img.parentElement.parentElement.parentElement;
|
||||
for (let swiperSlide of swiperEl.children) {
|
||||
swiperMedia.push({src: swiperSlide.querySelector('img').getAttribute('src'), alt: swiperSlide.querySelector('figcaption')?.textContent});
|
||||
const handleHrefChange = () => {
|
||||
watch(
|
||||
() => href.value,
|
||||
(newHref) => {
|
||||
const relativePath = newHref.split('.fr')[1];
|
||||
if (relativePath && relativePath !== '' && relativePath !== '/') {
|
||||
isProgrammaticNavigation = true;
|
||||
router.push(relativePath);
|
||||
scrollTop();
|
||||
}
|
||||
}
|
||||
openImageModale(img.src, img.alt, swiperMedia);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
/*
|
||||
return {
|
||||
loading,
|
||||
error,
|
||||
etape,
|
||||
page,
|
||||
isEtapeValid,
|
||||
isPageValid
|
||||
};
|
||||
*/
|
||||
</script>
|
||||
|
||||
onMounted(() => {
|
||||
handleRouteChange();
|
||||
handleColorChange();
|
||||
handleHrefChange();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scss>
|
||||
.v-enter-active,
|
||||
@@ -306,23 +144,4 @@ const handleImageClick = (event) => {
|
||||
transform: translateY(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:root {
|
||||
--swiper-navigation-color: #1a1918; /* cf main.scss */
|
||||
--swiper-pagination-color: var(--etape-couleur);
|
||||
--swiper-navigation-top-offset: calc(100% - 1.5rem);
|
||||
--swiper-navigation-sides-offset: 5vw; /* cf main.scss */
|
||||
}
|
||||
|
||||
.diaporama {
|
||||
--swiper-navigation-size: 1.5rem;
|
||||
}
|
||||
|
||||
swiper-slide img:not(.popup-img) { /* cf main.scss */
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease-out;
|
||||
&:hover {
|
||||
transform: scale(1.01);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user