refactor du store et des templates suite à la refont du backend

web/themes/custom/caravane/assets/js/main.js

@@ -164,7 +164,7 @@ import router from './router/router';
               const nid = icon.querySelector('.nid');
               const nidValue = nid.querySelector('.separated-content').innerText;
 
-              icon.addEventListener('click', function(event) {
+              icon.addEventListener('click', function(event) {                
                 store.fetchEtapeData(nidValue);
               });
               

web/themes/custom/caravane/assets/js/stores/content.js

@@ -4,265 +4,340 @@ import { defineStore } from 'pinia';
 import REST from '../api/rest-axios';
 
 export const useContentStore = defineStore('content', {
-  state: () => ({
+    state: () => ({
-      href: '',
+        href: '',
-      etape: {
+        etape: {
-        title: '',
+            title: '',
-        adresse: {},
+            adresse: {},
-        etape_number: '',
+            etape_number: '',
-        dates: {
+            vignette: {},
-          start: {
+            couleur: '',
-            d: '',
+            previous: {},
-            m: '',
+            next: {},
-            y: '',
+            dates: {
-          },
+                start: {
-          end: {
+                    d: '',
-            d: '',
+                    m: '',
-            m: '',
+                    y: '',
-            y: '',
+                },
-          },
+                end: {
+                    d: '',
+                    m: '',
+                    y: '',
+                },
+            },
+            parties: [],
         },
-        geofield: {},
+        page: {
-        // galeries: [],
+            title: '',
-        parties: [],
+            vignette: {},
-        saison: {},
+            parties: [],
-        thematiques: [],
+        },
-        vignette: {},
+        loading: false,
-        couleur: '',
+        error: null,
-        sensibleMap: {},
-        previous: {},
-        next: {},
-      },
-      page: {
-        title: '', 
-        text: '',
-      },
-      loading: false,
-      error: null,
     }),
     actions: {
-      async fetchEtapeData(nid) {
+        async fetchEtapeData(nid) {
-        this.loading = true;
+            this.resetStore();
-        this.error = null;
+            try {
-        this.etape = {};
+                const response = await REST.get(`/jsonapi/node/etape/`);
-        this.page = {};
+                for (let etape of response.data.data) {
-        try {
+                    if (etape.attributes.drupal_internal__nid == nid) {
-          const response = await REST.get(`/jsonapi/node/etape/`);
+                        for (let metatag of etape.attributes.metatag) {
-          for (let [index, etape] of response.data.data.entries()) {
+                          if (metatag.tag === "link") {
-            if (etape.attributes.drupal_internal__nid == nid) {
+                            this.href = metatag.attributes.href;                           
-              for (let metatag of etape.attributes.metatag) {
+                          }
-                if (metatag.tag === "link") {
+                        }
-                  this.href = metatag.attributes.href;
+                        this.etape.title = etape.attributes.title;
-                }
+                        this.etape.adresse = etape.attributes.field_adresse;
-              }
+                        this.etape.etape_number = etape.attributes.field_arret_numero;
-              this.etape.title = etape.attributes.title;
+                        const vignetteFetch = await this.fetchContent('field_vignette', etape.relationships);                       
-              this.etape.adresse = etape.attributes.field_adresse;
+                        this.etape.vignette = { 
-              this.etape.etape_number = etape.attributes.field_arret_numero;
+                            url: vignetteFetch.attributes.uri.url,
-              this.etape.dates = {
+                            alt: etape.relationships.field_vignette.data.meta.alt
-                start: this.getCleanDate(etape.attributes.field_dates.value),
+                        };
-                end: this.getCleanDate(etape.attributes.field_dates.end_value),
+                        this.etape.couleur = etape.attributes.field_couleur;
-              }
-              this.etape.geofield = etape.attributes.field_geofield;
-              // this.etape.galeries = await this.fetchEtapeContent('field_galleries', etape.relationships);
-              const partiesFetch = await this.fetchEtapeContent('field_parties', etape.relationships);
-              let partiesArray = []
 
-              if (partiesFetch) {
+                        this.etape.dates = {
-                for (let partie of partiesFetch) {
-                  let partieContent = {
-                    title: partie.attributes.field_titre || '',
-                    text: partie.attributes.field_texte.value || '',
-                    diaporama: [],
-                    chiffresCles: [],
-                    videos: [],
-                  }
-  
-                  if (partie.relationships.field_diaporama) {
-                    const diaporama = await REST.get(partie.relationships.field_diaporama.links.related.href);
-    
-                    partie.relationships.field_diaporama.data.forEach((element, i) => {
-                      partieContent.diaporama[i] = {};
-                      partieContent.diaporama[i].alt = element.meta.alt;
-                    });                
-    
-                    diaporama.data.data.forEach((element, i) => {
-                      partieContent.diaporama[i].url = element.attributes.uri.url;
-                    });
-                  }
-  
-                  if (partie.attributes.field_chiffres_cles) {
-                    for (let chiffre of partie.attributes.field_chiffres_cles) {
-                      partieContent.chiffresCles.push(chiffre.processed);
-                    }
-                  }
-                  
-                  if (partie.attributes.field_videos) {
-                    for (let video of partie.attributes.field_videos) {
-                      const videoId = video.split('?v=')[1];
-                      const videoUrl = `https://www.youtube.com/embed/${videoId}`;
-                      partieContent.videos.push(videoUrl);
-                    }
-                  }
-
-                  partiesArray.push(partieContent);              
-                }
-              }
-              
-              this.etape.parties = partiesArray;
-              this.etape.saison = await this.fetchEtapeContent('field_saison', etape.relationships);
-              this.etape.thematiques = await this.fetchEtapeContent('field_thematiques', etape.relationships);
-              const vignetteFetch = await this.fetchEtapeContent('field_vignette', etape.relationships);
-              this.etape.vignette = { url: vignetteFetch.attributes.uri.url, alt: etape.attributes.field_vignette_alt };
-              const sensibleMapFetch = await this.fetchEtapeContent('field_carte_sensible', etape.relationships);
-              if (sensibleMapFetch) {
-                this.etape.sensibleMap = { url: sensibleMapFetch.attributes.uri.url, alt: etape.relationships.field_carte_sensible.data.meta.alt };
-              }
-              this.etape.couleur = etape.attributes.field_couleur;
-
-              // get previous and next étape infos
-              // the list from the json api /node is not ordered
-              // and i need authentification to get the json view ordered list
-              // so i get it from the displayed list in the page
-              const orderedEtapesList = document.querySelectorAll('#etapes-liste li');
-
-              if (orderedEtapesList) {
-                const processEtape = async (etapeItemNid, etapesList, key) => {
-                  for (let etape of etapesList) {
-                    if (etape.attributes.drupal_internal__nid == etapeItemNid) {
-                      const vignetteFetch = await REST.get(etape.relationships.field_vignette.links.related.href);
-                      this.etape[key] = {
-                        nid: etape.attributes.drupal_internal__nid,
-                        couleur: etape.attributes.field_couleur,
-                        title: etape.attributes.title,
-                        postalCode: etape.attributes.field_adresse.postal_code,
-                        dates: {
                           start: this.getCleanDate(etape.attributes.field_dates.value),
                           end: this.getCleanDate(etape.attributes.field_dates.end_value),
-                        },
+                        }
-                        vignette: {
-                          url: vignetteFetch.data.data.attributes.uri.url,
-                          alt: etape.relationships.field_vignette.data.meta.alt,
-                        },
-                      };
-                      break;
-                    }
-                  }
-                };
-              
-                for (let li of orderedEtapesList) {
-                  if (li.querySelector('a').dataset.nodeNid === nid) {
-                    const previousEtapeItemNid = li.previousElementSibling?.querySelector('a').dataset.nodeNid;
-                    const nextEtapeItemNid = li.nextElementSibling?.querySelector('a').dataset.nodeNid;
-              
-                    if (previousEtapeItemNid) {
-                      await processEtape(previousEtapeItemNid, response.data.data, 'previous');
-                    }
-              
-                    if (nextEtapeItemNid) {
-                      await processEtape(nextEtapeItemNid, response.data.data, 'next');
-                    }
-                  }
-                }
-              }              
 
-              this.setActiveItemInMenu();
+                        const partiesFetch = await this.fetchContent('field_parties', etape.relationships);
-              break;
+                        if (partiesFetch) {
+                            this.etape.parties = [];
+                            for (let partie of partiesFetch) {
+                                const partieType = partie.type.replace(/^paragraph--/, "");
+                                let partieContent = {
+                                    type: partieType,
+                                };
+                                
+                                switch (partieType) {
+                                    case 'carte_sensible':
+                                        const carteSensibleFetch = await this.fetchContent('field_image_carte', partie.relationships);
+                                        if (carteSensibleFetch) {
+                                            partieContent.carteSensible = {
+                                                url: carteSensibleFetch.attributes.uri.url,
+                                                alt: partie.relationships.field_image_carte.data.meta.alt,
+                                            };
+                                        }
+                                        break;
+                                    case 'titre_texte':
+                                        partieContent.titre = partie.attributes.field_titre;
+                                        partieContent.texte = partie.attributes.field_texte.value;                                        
+                                        break;
+                                    case 'chiffres_cles':
+                                        const chiffresClesFetch = await this.fetchContent('field_chiffres_clefs', partie.relationships);
+                                        if (chiffresClesFetch) {
+                                            partieContent.chiffresCles = [];
+                                            for (let chiffre of chiffresClesFetch) {
+                                                partieContent.chiffresCles.push({
+                                                    chiffre: chiffre.attributes.field_chiffre,
+                                                    description: chiffre.attributes.field_description,
+                                                });
+                                            }
+                                        }
+                                        break;
+                                    case 'diaporama':
+                                        const diaporamaFetch = await this.fetchContent('field_diaporama', partie.relationships);
+                                        if (diaporamaFetch) {
+                                            partieContent.diaporama = [];
+                                            for (let [index, image] of diaporamaFetch.entries()) {
+                                                partieContent.diaporama.push({
+                                                    url: image.attributes.uri.url,
+                                                    alt: partie.relationships.field_diaporama.data[index].meta.alt,
+                                                });
+                                            }
+                                        }
+                                        break;
+                                    case 'entretien':
+                                        partieContent.entretien = {};
+                                        const personnesFetch = await this.fetchContent('field_personne_s', partie.relationships);
+                                        const questionsReponsesFetch = await this.fetchContent('field_questions_reponses', partie.relationships);
+                                        if (personnesFetch && questionsReponsesFetch) {
+                                            partieContent.entretien.personnes = [];
+                                            for (let personne of personnesFetch) {
+                                                const portraitFetch = await this.fetchContent('field_portrait', personne.relationships);
+                                                if (portraitFetch) {                                                    
+                                                    partieContent.entretien.personnes.push({
+                                                        portrait: portraitFetch.attributes.uri.url,
+                                                        alt: personne.relationships.field_portrait.data.meta.alt,
+                                                        description: personne.attributes.field_description,
+                                                    });
+                                                }
+                                            }
+                                            partieContent.entretien.questionsReponses = [];
+                                            for (let qr of questionsReponsesFetch) {
+                                                partieContent.entretien.questionsReponses.push({
+                                                    question: qr.attributes.field_question,
+                                                    reponse: qr.attributes.field_reponse.value,
+                                                });
+                                            }                                           
+                                        }
+                                        break;
+                                    case 'exergue':
+                                        partieContent.exergue = partie.attributes.field_texte_exergue.value;
+                                        break;
+                                    case 'video':
+                                        partieContent.videos = [];
+                                        for (let video of partie.attributes.field_videos) {
+                                            const videoId = video.split('?v=')[1];
+                                            const videoUrl = `https://www.youtube.com/embed/${videoId}`;
+                                            partieContent.videos.push(videoUrl);                      
+                                        }
+                                        break;
+                                }
+                                this.etape.parties.push(partieContent);
+                            }
+                        }
+                        
+                        // get previous and next étape infos
+                        // the list from the json api /node is not ordered
+                        // and i need authentification to get the json view ordered list
+                        // so i get it from the displayed list in the page
+                        const orderedEtapesList = document.querySelectorAll('#etapes-liste li');
+
+                        if (orderedEtapesList) {                            
+                            const processEtape = async (etapeItemNid, etapesList, key) => {
+                                for (let etape of etapesList) {
+                                    if (etape.attributes.drupal_internal__nid == etapeItemNid) {
+                                        const vignetteFetch = await REST.get(etape.relationships.field_vignette.links.related.href);
+                                        this.etape[key] = {
+                                            nid: etape.attributes.drupal_internal__nid,
+                                            couleur: etape.attributes.field_couleur,
+                                            title: etape.attributes.title,
+                                            postalCode: etape.attributes.field_adresse.postal_code,
+                                            dates: {
+                                                start: this.getCleanDate(etape.attributes.field_dates.value),
+                                                end: this.getCleanDate(etape.attributes.field_dates.end_value),
+                                            },
+                                            vignette: {
+                                                url: vignetteFetch.data.data.attributes.uri.url,
+                                                alt: etape.relationships.field_vignette.data.meta.alt,
+                                            },
+                                        };
+                                        break;
+                                    }
+                                }
+                            };
+                            
+                            for (let li of orderedEtapesList) {
+                                if (li.querySelector('a').dataset.nodeNid == nid) {                                    
+                                    const previousEtapeItemNid = li.previousElementSibling?.querySelector('a').dataset.nodeNid;
+                                    const nextEtapeItemNid = li.nextElementSibling?.querySelector('a').dataset.nodeNid;
+                                    if (previousEtapeItemNid) {
+                                        await processEtape(previousEtapeItemNid, response.data.data, 'previous');
+                                    }
+                                    if (nextEtapeItemNid) {
+                                        await processEtape(nextEtapeItemNid, response.data.data, 'next');
+                                    }
+                                }
+                            }
+                        }
+                        break;
+                    }
+                }
+                this.setActiveItemInMenu(nid);
+            } catch (error) {
+                this.error = 'Failed to fetch data';
+                console.error('Issue with getNodeData', error);
+            } finally {
+                this.loading = false;
+            }
+        },
+        async fetchStaticData(nid) {
+            this.resetStore();
+            try {
+                const response = await REST.get(`/jsonapi/node/static/`);
+                for (let page of response.data.data) {
+                    if (page.attributes.drupal_internal__nid == nid) {
+                        for (let metatag of page.attributes.metatag) {
+                            if (metatag.tag === "link") {
+                              this.href = metatag.attributes.href;
+                            }
+                        }
+                        this.page.title = page.attributes.title;
+                        const vignetteFetch = await this.fetchContent('field_vignette', page.relationships);                       
+                        this.page.vignette = { 
+                            url: vignetteFetch.attributes.uri.url,
+                            alt: page.relationships.field_vignette.data.meta.alt
+                        };
+                        
+                        const partiesFetch = await this.fetchContent('field_parties_static', page.relationships);
+                        if (partiesFetch) {
+                            this.page.parties = [];
+                            
+
+                            for (let partie of partiesFetch) {
+                                const partieType = partie.type.replace(/^paragraph--/, "");
+                                let partieContent = {
+                                    type: partieType,
+                                };
+                                
+                                switch (partieType) {
+                                    case 'titre_texte':
+                                        partieContent.titre = partie.attributes.field_titre;
+                                        partieContent.texte = partie.attributes.field_texte.value;                                        
+                                        break;
+                                    case 'diaporama':
+                                        const diaporamaFetch = await this.fetchContent('field_diaporama', partie.relationships);
+                                        if (diaporamaFetch) {
+                                            partieContent.diaporama = [];
+                                            for (let [index, image] of diaporamaFetch.entries()) {
+                                                partieContent.diaporama.push({
+                                                    url: image.attributes.uri.url,
+                                                    alt: partie.relationships.field_diaporama.data[index].meta.alt,
+                                                });
+                                            }
+                                        }
+                                        break;
+                                    case 'video':
+                                        partieContent.videos = [];
+                                        for (let video of partie.attributes.field_videos) {
+                                            const videoId = video.split('?v=')[1];
+                                            const videoUrl = `https://www.youtube.com/embed/${videoId}`;
+                                            partieContent.videos.push(videoUrl);                      
+                                        }
+                                        break;
+                                }
+                                this.page.parties.push(partieContent);
+                            }
+                        }
+                    }
+                }
+                this.setActiveItemInMenu(nid);
+            } catch (error) {
+                this.error = 'Failed to fetch data';
+                console.error('Issue with getNodeData', error);
+            } finally {
+                this.loading = false;
+            }
+        },
+        async fetchContent(field, relationships) {
+          if (relationships[field].data) {
+            try {
+              const contentLink = relationships[field].links.related.href;
+              const contentFetch = await REST.get(contentLink);
+              return contentFetch.data.data;
+            } catch (error) {
+              this.error = 'Failed to fetch data';
+              console.error('Issue with getNodeData', error);
             }
           }
-        } catch (error) {
+        },
-          this.error = 'Failed to fetch data';
+        emptyAll(nid) {
-          console.error('Issue with getNodeData', error);
+          this.etape = {};
-        } finally {
+          this.page = {};
-          this.loading = false;
+          this.setActiveItemInMenu(nid);
-        }
+        },
-      },
+        setActiveItemInMenu(nid) {
-      async fetchStaticData(nid) {
+          const title = this.etape.title || this.page.title;
-        this.loading = true;
+  
-        this.error = null;
+          const generalLinks = document.querySelectorAll('#menu > ul > li > a');
-        this.etape = {};
+          if (Object.entries(this.etape).length === 0 && Object.entries(this.page).length === 0) {
-        this.page = {};
+            for (let link of generalLinks) {
-        try {
-          const response = await REST.get(`/jsonapi/node/static/`);
-          for (let staticContent of response.data.data) {
-            if (staticContent.attributes.drupal_internal__nid == nid) {
-              staticContent.attributes.metatag.forEach(item => {
-                if (item.tag === 'meta') {
-                  this.page.title = item.attributes.content.split(' |')[0];
-                }
-                if (item.tag === 'link') {
-                  this.href = item.attributes.href;
-                }
-              })
-              this.page.text = staticContent.attributes.field_texte.value;
-            }
-          }
-          this.setActiveItemInMenu();
-        } catch (error) {
-          this.error = 'Failed to fetch data';
-          console.error('Issue with getNodeData', error);
-        } finally {
-          this.loading = false;
-        }
-      },
-      emptyAll() {
-        this.etape = {};
-        this.page = {};
-        this.setActiveItemInMenu();
-      },
-      setActiveItemInMenu() {
-        const title = this.etape.title || this.page.title;
-
-        const generalLinks = document.querySelectorAll('#menu > ul > li > a');
-        if (Object.entries(this.etape).length === 0 && Object.entries(this.page).length === 0) {
-          for (let link of generalLinks) {
-            link.classList.remove('is-active');
-          }
-          generalLinks[0].classList.add('is-active');
-        } else {
-          for (let link of generalLinks) {
-            if (link.innerText === title) {
-              link.classList.add('is-active');
-            } else {
               link.classList.remove('is-active');
             }
-          }
+            generalLinks[0].classList.add('is-active');
-        }
-
-        const etapeLinks = document.querySelectorAll('#etapes-liste li');
-        for (let link of etapeLinks) {
-          const a = link.querySelector('a');
-          if (a.innerText === title) {
-            link.classList.remove('inactive');
           } else {
-            link.classList.add('inactive');
+            for (let link of generalLinks) {
+              if (link.dataset.nodeNid == nid) {
+                link.classList.add('is-active');
+              } else {
+                link.classList.remove('is-active');
+              }
+            }
           }
-        }
+  
-        const inactiveLinks = document.querySelectorAll('#etapes-liste li.inactive');
+          const etapeLinks = document.querySelectorAll('#etapes-liste li');
-        if (inactiveLinks.length === etapeLinks.length) {
+          for (let link of etapeLinks) {
-          for (let link of inactiveLinks) {
+            const a = link.querySelector('a');
-            link.classList.remove('inactive');
+            if (a.innerText === title) {
+              link.classList.remove('inactive');
+            } else {
+              link.classList.add('inactive');
+            }
           }
-        }
+          const inactiveLinks = document.querySelectorAll('#etapes-liste li.inactive');
-      },
+          if (inactiveLinks.length === etapeLinks.length) {
-      async fetchEtapeContent(field, relationships) {
+            for (let link of inactiveLinks) {
-        if (relationships[field].data) {
+              link.classList.remove('inactive');
-          try {
+            }
-            const contentLink = relationships[field].links.related.href;
-            const contentFetch = await REST.get(contentLink);
-            return contentFetch.data.data;
-          } catch (error) {
-            this.error = 'Failed to fetch data';
-            console.error('Issue with getNodeData', error);
           }
-        }
+        },
-      },
+        resetStore() {
-      getCleanDate(date) {
+            this.loading = true;
-        return {
+            this.error = null;
-          d: date.split('-')[2],
+            this.href = '';
-          m: new Intl.DateTimeFormat('fr-FR', { month: 'long' }).format(new Date(date)),
+            this.etape = {};
-          y: date.split('-')[0],
+            this.page = {};
-         }
+        },
-      }
+        getCleanDate(date) {
+          return {
+            d: date.split('-')[2],
+            m: new Intl.DateTimeFormat('fr-FR', { month: 'long' }).format(new Date(date)),
+            y: date.split('-')[0],
+           }
+        },
     },
-  });
+});
-

web/themes/custom/caravane/assets/js/vuejs/ImageModale.vue

@@ -1,93 +0,0 @@
-<template>
-    <transition name="fade">
-      <div v-if="isOpen" class="image-viewer-wrapper">
-        <div v-if="!swiperContent.length" class="img-modale simple-viewer">
-            <figure class="img-wrapper">
-                <img :src="image.src" :alt="image.alt">
-                <figcaption>{{ image.alt }}</figcaption>
-            </figure>
-          </div>
-          <div v-else class="img-modale swiper-viewer">
-            <div class="swiper-wrapper">
-              <swiper-container
-                :slidesPerView="1"
-                :centeredSlides="true"
-                :loop="true"
-                :navigation="true"
-                :pagination="true"
-                :initialSlide="currentImgIndex"
-                :injectStyles="[`
-                  .swiper-button-next, .swiper-button-prev { 
-                    color: white;
-                    top: 50%;
-                  }
-                  .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
-                    background: white;
-                    opacity: 0.8;
-                  }
-                `]"
-              >
-                <swiper-slide v-for="media in swiperContent">
-                  <figure>
-                    <img :src="media.src" :alt="media.alt" class="popup-img">
-                    <figcaption>{{ media.alt }}</figcaption>
-                  </figure>
-                </swiper-slide>
-              </swiper-container>
-            </div>
-          </div>
-          <button @click="close" class="close-button">
-              <div></div>
-              <div></div>
-          </button>
-        </div>
-    </transition>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue';
-const props = defineProps({
-  isOpen: Boolean,
-  image: {
-    type: Object,
-    required: true,
-  },
-  swiperContent: {
-    type: Array,
-    required: true,
-  }
-});
-
-const currentImgIndex = ref(0);
-
-watch(
-  () => props.isOpen,
-  () => {
-  if (props.isOpen && props.swiperContent.length) {
-    for (let i = 0; i < props.swiperContent.length; i++) {
-      const currentImgSrc = props.image.src;
-      const truncatedSrc = currentImgSrc.substring(currentImgSrc.indexOf("/sites"));
-      if (props.swiperContent[i].src === truncatedSrc) {
-        currentImgIndex.value = i;
-        break;     
-      }
-    }
-  }
-})
-
-const emit = defineEmits(['close']);
-
-const close = () => {
-  emit('close');
-};
-</script>
-
-<style scoped>
-.fade-enter-active, .fade-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.fade-enter-from, .fade-leave-to {
-  opacity: 0;
-}
-</style>

web/themes/custom/caravane/assets/js/vuejs/Modale.vue

@@ -1,169 +1,66 @@
 <template>
-  <Transition>
+    <Transition>
-    <div v-if="isEtapeValid">
+        <div v-if="isEtapeValid || isPageValid">
-      <div class="content-wrapper">
+            <div class="content-wrapper">
-        <header>
+                <ModaleHeader 
-          <div class="cover">
+                    :content="etape.title ? etape : page"
-            <img :src="etape.vignette.url" :alt="etape.vignette.alt">
+                    :couleur="etape.couleur || brandColor" />
-          </div>
+                <main>
-          <div class="cartouche" :style="{ backgroundColor: etape.couleur }">
+                    <div v-for="partie in etape.parties || page.parties" class="partie">
-            <p>Étape n°{{etape.etape_number}}</p>
+                        <ModaleCarteSensible 
-            <p>Du {{etape.dates.start.d}} {{etape.dates.start.m}} au {{ etape.dates.end.d }} {{ etape.dates.end.m }} {{ etape.dates.end.y }}</p>
+                            v-if="partie.type === 'carte_sensible'" 
-          </div>
+                            :partie="partie" />
-          <div class="brand-pattern" :style="{ backgroundColor: etape.couleur }">
+                        <ModaleTitreTexte
-            <div class="pattern"></div>
+                            v-if="partie.type === 'titre_texte'"
-          </div>
+                            :partie="partie"
-          <div class="locality">
+                            :couleur="etape.couleur || brandColor" />
-            <div class="top-triangle"></div>
+                        <ModaleChiffresCles
-            <div class="locality-title">
+                            v-if="partie.type === 'chiffres_cles'"
-              <h1>{{etape.title}} <em>({{ etape.adresse.postal_code }})</em></h1>
+                            :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>
+        </div>
-        </header>
+    </Transition>
-        <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>
 </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 ModaleHeader from './components/ModaleHeader.vue';
-import 'vue-image-zoomer/dist/style.css';
+import ModaleFooter from './components/ModaleFooter.vue';
 
-// web element usage bc its 2024
+import ModaleCarteSensible from './components/parties/ModaleCarteSensible.vue';
-// (idk how it works but it does)
+import ModaleTitreTexte from './components/parties/ModaleTitreTexte.vue';
-import { register } from 'swiper/element/bundle';
+import ModaleChiffresCles from './components/parties/ModaleChiffresCles.vue';
-register();
+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(
+const isEtapeValid = computed(() => !error.value && !loading.value && etape.value && !isObjectEmpty(etape.value));
-  () => route.params.id,
+const isPageValid = computed(() => !error.value && !loading.value && page.value && !isObjectEmpty(page.value));
-  (newId) => {
+
-    if (!newId) {
+const brandColor = "#80c8bf";
-      store.emptyAll();
+
-    } else {
+let isProgrammaticNavigation = false;
-      store.fetchEtapeData(newId);
+
-      if (!etape.value?.data) {
+const handleRouteChange = () => {
-        store.fetchStaticData(newId);
+  watch(
+    () => route.params.id,
+    (newId) => {
+      if (isProgrammaticNavigation) {
+        isProgrammaticNavigation = false;
+        return;
       }
-      window.scrollTo({ top: 0, behavior: 'smooth' });
-    }
-  },
-  { immediate: true }
-);
 
-watch(
+      if (!newId) {
-  () => etape.value.couleur,
+        store.emptyAll();
-  (newColor) => {
+      } else {
-    if (newColor) {
+        store.fetchEtapeData(newId);
-      document.documentElement.style.setProperty('--etape-couleur', etape.value.couleur);
+        if (!etape.value?.data) {
-    }
+          store.fetchStaticData(newId);
-  }
+        }
-);
+        scrollTop();
-
-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);
       }
-    });
+    },
-  }
+    { immediate: true }
+  );
 };
 
-const isModaleOpen = ref(false);
+const handleColorChange = () => {
-const currentImage = ref({ src: '', alt: '' });
+  watch(
-const swiperPopupContent = ref([]);
+    () => href.value,
-
+    () => {
-const body = document.querySelector('body');
+        document.documentElement.style.setProperty('--etape-couleur', etape.value.couleur || brandColor);
-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 closeImageModale = () => {
+const handleHrefChange = () => {
-  isModaleOpen.value = false;
+  watch(
-  swiperPopupContent.value = [];
+    () => href.value,
-  body.classList.remove('no-scroll');
+    (newHref) => {
-  menu.style.display = "flex";
+      const relativePath = newHref.split('.fr')[1];
-  setTimeout(() => {
+      if (relativePath && relativePath !== '' && relativePath !== '/') {
-    hamburger.style.opacity = 1;
+        isProgrammaticNavigation = true;
-  }, 300);
+        router.push(relativePath);
-};
+        scrollTop();
-
-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});
       }
     }
-    openImageModale(img.src, img.alt, swiperMedia);
+  );
-  }
 };
 
-/*     
+onMounted(() => {
-      return {
+  handleRouteChange();
-      loading,
+  handleColorChange();
-      error,
+  handleHrefChange();
-      etape,
+});
-      page,
+</script>
-      isEtapeValid,
-      isPageValid
-    };
- */
- </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>

web/themes/custom/caravane/assets/js/vuejs/components/ImageModale.vue

@@ -0,0 +1,200 @@
+<template>
+  <Transition name="fade">
+    <div v-if="isOpen" class="image-viewer-wrapper">
+      <div v-if="!swiperContent" class="img-modale simple-viewer">
+          <figure class="img-wrapper">
+              <img :src="image.src" :alt="image.alt">
+              <figcaption>{{ image.alt }}</figcaption>
+          </figure>
+        </div>
+        <div v-else class="img-modale swiper-viewer">
+          <div class="swiper-wrapper">
+            <swiper-container
+              :slidesPerView="1"
+              :centeredSlides="true"
+              :loop="true"
+              :navigation="true"
+              :pagination="true"
+              :initialSlide="currentImgIndex"
+              :injectStyles="[`
+                .swiper-button-next, .swiper-button-prev { 
+                  color: white;
+                  top: 50%;
+                }
+                .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
+                  background: white;
+                  opacity: 0.8;
+                }
+              `]"
+            >
+              <swiper-slide v-for="media in swiperContent">
+                <figure>
+                  <img :src="media.src" :alt="media.alt" class="popup-img">
+                  <figcaption>{{ media.alt }}</figcaption>
+                </figure>
+              </swiper-slide>
+            </swiper-container>
+          </div>
+        </div>
+        <button @click="close" class="close-button">
+            <div></div>
+            <div></div>
+        </button>
+      </div>
+    </Transition>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+const props = defineProps({
+  isOpen: Boolean,
+  image: {
+    type: Object,
+    required: true,
+  },
+  swiperContent: {
+    type: Array,
+    required: true,
+  }
+});
+
+const currentImgIndex = ref(0);
+
+watch(
+  () => props.isOpen,
+  () => {
+  if (props.isOpen && props.swiperContent?.length) {
+    for (let i = 0; i < props.swiperContent.length; i++) {
+      const currentImgSrc = props.image.src;
+      const truncatedSrc = currentImgSrc.substring(currentImgSrc.indexOf("/sites"));
+      if (props.swiperContent[i].src === truncatedSrc) {
+        currentImgIndex.value = i;
+        break;     
+      }
+    }
+  }
+})
+
+const emit = defineEmits(['close']);
+
+const close = () => {
+  emit('close');
+};
+</script>
+
+<style scoped lang="scss">
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+
+.image-viewer-wrapper {
+  backdrop-filter: blur(3px);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  > .img-modale {
+    background-color: rgba(0, 0, 0, 0.8);
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  > .simple-viewer {
+    > .img-wrapper {
+      max-width: 60%;
+      display: flex;
+      flex-direction: column;
+      > img {
+        width: 100%;
+      }
+      > figcaption {
+        margin: 0;
+        background-color: white;
+        font-size: 0.8rem; /* cf main.scss */
+        padding: 0.5rem 1.5rem;
+      }
+    }
+  }
+  > .swiper-viewer {
+    z-index: 1;
+    > .swiper-wrapper {
+      height: 100%;
+      width: 100%;
+      swiper-container {
+        height: 95%;
+        swiper-slide {
+          display: flex;
+          justify-content: center;
+          align-items: flex-start;
+          figure {
+            margin-top: 3%;
+            max-width: 60%;
+            height: 80%;
+            img {
+              height: -webkit-fill-available;
+              max-width: 100%;
+              margin-bottom: -5px;
+              object-fit: cover;
+            }
+            figcaption {
+              margin: 0;
+              background-color: white;
+              font-size: 0.8rem; /* cf main.scss */
+              padding: 0.5rem 1.5rem;
+            }
+          }
+        }
+      }
+    }
+  }
+  > .close-button {
+    position: fixed;
+    top: 2rem;
+    right: 30px; /* cf main.scss */
+    background-color: unset;
+    border: none;
+    display: block;
+    height: 3rem;
+    width: 3rem;
+    border-radius: 1.5rem;
+    cursor: pointer;
+    background-color: white;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 2;
+    > div {
+      display: block;
+      height: 2px;
+      border-radius: 4px;
+      width: 60%;
+      background-color: #1a1918; /* cf main.scss */
+      position: absolute;
+      transition: transform 0.3s ease;
+      &:nth-of-type(1) {
+        transform: rotate(45deg) scale(1);
+      }
+      &:nth-of-type(2) {
+        transform: rotate(-45deg) scale(1);
+      }
+    }
+    &:hover {
+      > div:nth-of-type(1) {
+        transform: rotate(45deg) scale(1.1);
+      }
+      > div:nth-of-type(2) {
+        transform: rotate(-45deg) scale(1.1);
+      }
+    }
+  }
+}
+</style>

web/themes/custom/caravane/assets/js/vuejs/components/ModaleFooter.vue

@@ -0,0 +1,54 @@
+<template>
+    <footer>
+        <div class="brand-pattern pattern-bottom" :style="{ backgroundColor: couleur }">
+            <div class="pattern"></div>
+        </div>
+    
+        <div v-if="content.previous || content.next" class="related-etape-links">
+            <div v-if="content.previous" class="card previous" @click="store.fetchEtapeData(content.previous.nid)">
+                <div class="icon">
+                    <div :style="{ backgroundColor: content.previous.couleur }"></div>
+                    <div :style="{ backgroundColor: content.previous.couleur }"></div>
+                    <div :style="{ backgroundColor: content.previous.couleur }"></div>
+                </div>
+                <div class="card-content">
+                    <div class="infos">
+                        <div class="titre">{{ content.previous.title }} <span>({{ content.previous.postalCode }})</span></div>
+                        <div class="date">Du {{ content.previous.dates.start.d }} {{ content.previous.dates.start.m }}<br>au {{ content.previous.dates.end.d }} {{ content.previous.dates.end.m }} {{ content.previous.dates.end.y }}</div>
+                    </div>
+                    <div class="vignette">
+                        <img :src="content.previous.vignette.url" :alt="content.previous.vignette.alt">
+                    </div>
+                </div>
+            </div>
+            <div v-if="content.next" class="card next" @click="store.fetchEtapeData(content.next.nid)">
+                <div class="icon">
+                    <div :style="{ backgroundColor: content.next.couleur }"></div>
+                    <div :style="{ backgroundColor: content.next.couleur }"></div>
+                    <div :style="{ backgroundColor: content.next.couleur }"></div>
+                </div>
+                <div class="card-content">
+                    <div class="infos">
+                        <div class="titre">{{ content.next.title }} <span>({{ content.next.postalCode }})</span></div>
+                        <div class="date">Du {{ content.next.dates.start.d }} {{ content.next.dates.start.m }}<br>au {{ content.next.dates.end.d }} {{ content.next.dates.end.m }} {{ content.next.dates.end.y }}</div>
+                    </div>
+                    <div class="vignette">
+                        <img :src="content.next.vignette.url" :alt="content.next.vignette.alt">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+</template>
+
+<script setup>
+import { useContentStore } from '../../stores/content';
+
+const brandColor = "#80c8bf";
+
+const store = useContentStore();
+const props = defineProps({
+  content: Object,
+  couleur: String,
+});
+</script>

web/themes/custom/caravane/assets/js/vuejs/components/ModaleHeader.vue

@@ -0,0 +1,27 @@
+<template>
+    <header>
+        <div class="cover">
+        <img :src="content.vignette.url" :alt="content.vignette.alt">
+        </div>
+        <div v-if="content.dates" class="cartouche" :style="{ backgroundColor: couleur }">
+            <p>Étape n°{{content.etape_number}}</p>
+            <p>Du {{content.dates.start.d}} {{content.dates.start.m}} au {{ content.dates.end.d }} {{ content.dates.end.m }} {{ content.dates.end.y }}</p>
+        </div>
+        <div class="brand-pattern" :style="{ backgroundColor: couleur }">
+            <div class="pattern"></div>
+        </div>
+        <div class="locality">
+            <div class="top-triangle"></div>
+            <div class="locality-title">
+                <h1>{{content.title}} <em v-if="content.adresse">({{ content.adresse.postal_code }})</em></h1>
+            </div>
+        </div>
+    </header>
+</template>
+
+<script setup>
+const props = defineProps({
+  content: Object,
+  couleur: String,
+});
+</script>

web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleCarteSensible.vue

@@ -0,0 +1,21 @@
+<template>
+    <figure class="sensible-map">
+        <vue-image-zoomer
+        :regular="partie.carteSensible.url"
+        :zoom="partie.carteSensible.url"
+        :zoom-amount="3.5"
+        alt="Carte sensible du territoire"
+        hover-message="Survolez pour zoomer dans la carte"
+        />
+        <figcaption class="caption">{{ partie.carteSensible.alt }}</figcaption>
+    </figure>
+</template>
+
+<script setup>
+import { VueImageZoomer } from 'vue-image-zoomer';
+import 'vue-image-zoomer/dist/style.css';
+
+const props = defineProps({
+    partie: Object
+});
+</script>

web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleChiffresCles.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="chiffres-cles">
+        <h3>
+            <div class="underline" :style="{ backgroundColor: couleur }"></div>
+            <p>Chiffres clés</p>
+        </h3>
+        <div>
+            <div v-for="chiffre in partie.chiffresCles">
+                <div v-html="chiffre.chiffre" class="chiffre" :style="{ borderLeft: `solid 10px ${couleur}` }"></div>
+                <p v-html="chiffre.description" class="chiffre-caption" :style="{ borderLeft: `solid 10px ${couleur}` }"></p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+    partie: Object,
+    couleur: String,
+});
+</script>

web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleDiaporama.vue

@@ -0,0 +1,86 @@
+<template>
+    <swiper-container
+        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"
+              @click="handleImageClick">
+            <figcaption class="caption">{{ image.alt }}</figcaption>
+        </figure>
+        </swiper-slide>
+    </swiper-container>
+    <ImageModale
+        :isOpen="isModaleOpen"
+        :image="currentImage"
+        :swiperContent="swiperPopupContent"
+        @close="closeImageModale" />
+</template>
+
+<script setup>
+import { useImageModal } from '../../composables/useImageModale';
+import ImageModale from '../ImageModale.vue';
+// WebComponent
+// https://swiperjs.com/element
+import { register } from 'swiper/element/bundle';
+register();
+
+const props = defineProps({
+    partie: Object
+});
+
+const { 
+  isModaleOpen, 
+  currentImage, 
+  swiperPopupContent, 
+  openImageModale, 
+  closeImageModale 
+} = useImageModal();
+
+const handleImageClick = (event) => {
+  const img = event.target;
+  if (img.tagName === 'IMG') {
+    const isSwiper = img.closest('SWIPER-SLIDE');
+    let swiperMedia = [];
+
+    if (isSwiper) {
+      const swiperEl = img.closest('swiper-container');
+      swiperEl.querySelectorAll('swiper-slide').forEach((slide) => {
+        const image = slide.querySelector('img');
+        const altText = slide.querySelector('figcaption')?.textContent || '';
+        swiperMedia.push({ src: image.getAttribute('src'), alt: altText });
+      });
+    }
+    openImageModale(img.src, img.alt, swiperMedia);
+  }
+};
+</script>
+
+<style>
+: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>

web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleEntretien.vue

@@ -0,0 +1,84 @@
+<template>
+    <div class="entretien">
+        <h3>
+            <div class="underline" :style="{ backgroundColor: couleur }"></div>
+            <p>Entretien</p>
+        </h3>
+        <div class="personnes">
+            <div v-for="personne in partie.entretien.personnes" class="personne">
+                <figure>
+                    <img :src="personne.portrait" :alt="personne.alt">
+                </figure>
+                <div class="description"><p v-html="personne.description"></p></div>
+            </div>
+        </div>
+        <div class="questions-reponses" :style="{ '--couleur': couleur }">
+            <div v-for="questionReponse in partie.entretien.questionsReponses">
+                <div v-html="questionReponse.question" class="question"></div>
+                <div v-html="questionReponse.reponse" class="reponse"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+    partie: Object,
+    couleur: String,
+});
+</script>
+
+<style lang="scss" scoped>
+.personne {
+    display: flex;
+    align-items: center;
+    margin: 2rem 0;
+    &:first-of-type {
+        margin-top: 1rem;
+    }
+    > figure {
+        width: 6rem;
+        height: 6rem;
+        margin: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        border-radius: 3rem;
+        > img {
+            object-fit: cover;
+            width: 100%;
+            height: 100%;
+        }
+    }
+    > .description {
+        width: calc(100% - 6rem);
+        > p {
+            margin: 0;
+            padding-left: 2rem;
+        }
+    }
+}
+.questions-reponses {
+    margin-top: 3rem;
+    > div {
+        > .question {
+            font-weight: bold;
+            position: relative;
+            padding-left: 1.8rem;
+            margin-top: 2rem;
+            margin-bottom: 1rem;
+            &::before {
+                position: absolute;
+                content: "";
+                display: block;
+                height: 100%;
+                width: 0.8rem;
+                left: 0;
+                background-color: var(--couleur);
+                margin-right: 1rem;
+            }
+        }
+    }
+}
+</style>

web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleExergue.vue

@@ -0,0 +1,35 @@
+<template>
+    <div 
+        class="exergue"
+        :style="{ '--couleur': couleur }"
+        v-html="partie.exergue">
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+    partie: Object,
+    couleur: String,
+});
+</script>
+
+<style lang="scss" scoped>
+.exergue {
+    font-size: 1.3rem;
+    font-style: italic;
+    line-height: 1.5;
+    position: relative;
+    padding-left: 1.8rem;
+    margin: 5rem 0;
+    &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        background-color: var(--couleur);
+        width: 0.8rem;
+        height: 100%;
+        margin-right: 1rem;
+        left: 0;
+    }
+}
+</style>

web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleTitreTexte.vue

@@ -0,0 +1,140 @@
+<template>
+    <div class="partie-title">
+        <h3>
+        <div class="underline" :style="{ backgroundColor: couleur }"></div>
+        <p v-html="partie.titre"></p>
+        </h3>
+    </div>
+    <div 
+        v-html="partie.texte"
+        ref="partieContent"
+        class="partie-content"
+        v-alt
+        :style="{ '--couleur': couleur }"
+        @click="handleImageClick">
+    </div>
+
+    <ImageModale
+        :isOpen="isModaleOpen"
+        :image="currentImage"
+        :swiperContent="swiperPopupContent"
+        @close="closeImageModale" />
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useImageModal } from '../../composables/useImageModale';
+import ImageModale from '../ImageModale.vue';
+
+const props = defineProps({
+    partie: Object,
+    couleur: String,
+});
+
+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);
+      }
+    });
+  }
+};
+
+const partieContent = ref(null);
+
+onMounted(() => {
+    if (partieContent.value) {
+        partieContent.value.querySelectorAll('footnotes').forEach((footnote, index) => {
+            footnote.innerText = index + 1;
+            footnote.classList.add('footnote');
+            const footnoteContent = footnote.dataset.text;
+            footnote.addEventListener('mouseenter', (e) => {
+                const footnoteText = document.createElement('div');
+                footnoteText.classList.add('footnote-text');
+                footnoteText.innerHTML = footnoteContent;
+                footnoteText.style.top = `${footnote.getBoundingClientRect().height * -1 - 15}px`;
+                setTimeout(() => {
+                    footnoteText.style.left = `${(footnoteText.getBoundingClientRect().width / 2) * -1}px`;
+                    footnoteText.style.opacity = 1;
+                }, 100);
+                footnote.appendChild(footnoteText);
+            });
+            footnote.addEventListener('mouseleave', () => {
+                footnote.querySelector('.footnote-text').style.opacity = 0;
+                setTimeout(() => {
+                    footnote.removeChild(footnote.querySelector('.footnote-text'));
+                }, 300);                
+            });
+            footnote.addEventListener('click', () => {
+                const footnoteLink = footnote.querySelector('a');
+                if (footnoteLink) {
+                    const href = footnoteLink.getAttribute('href');
+                    if (href) {
+                        window.open(href, '_blank');
+                    }
+                }
+            })
+        })
+    }
+});
+
+const { 
+  isModaleOpen,
+  currentImage,
+  openImageModale, 
+  closeImageModale 
+} = useImageModal();
+
+const handleImageClick = (event) => {
+  const img = event.target;
+  if (img.tagName === 'IMG') {
+    openImageModale(img.src, img.alt);
+  }
+};
+</script>
+
+<style lang="scss">
+.footnote {
+    position: relative;
+    font-weight: bolder;
+    font-size: 0.7rem;
+    margin: 0 2px;
+    padding: 0 2px;
+    background-color: var(--couleur);
+    vertical-align: top;
+    cursor: pointer;
+    .footnote-text {
+        opacity: 0;
+        transition: opacity 0.3s ease-out;
+        text-wrap: nowrap;
+        display: block;
+        position: absolute;
+        background-color: var(--couleur);
+        padding: 4px 10px;
+        p {
+            font-weight: normal;
+            margin: 0;
+            a {
+                color: inherit;
+            }
+        }
+    }
+}
+
+.partie-content {
+    img {
+        margin-top: 2rem;
+        cursor: pointer;
+        transition: transform 0.3s ease-out;
+        &:hover {
+            transform: scale(1.01);
+        }
+    }
+}
+</style>

web/themes/custom/caravane/assets/js/vuejs/components/parties/ModaleVideos.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="videos">
+        <iframe v-for="video in partie.videos" :src="video" frameborder="0" width="100%" style="aspect-ratio: 16 / 9;"></iframe>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+    partie: Object
+});
+</script>

web/themes/custom/caravane/assets/js/vuejs/composables/useImageModale.js

@@ -0,0 +1,46 @@
+import { ref } from 'vue';
+
+export function useImageModal() {
+  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;
+    toggleBodyScroll(true);
+  };
+
+  const closeImageModale = () => {
+    isModaleOpen.value = false;
+    swiperPopupContent.value = [];
+    toggleBodyScroll(false);
+  };
+
+  const toggleBodyScroll = (disableScroll) => {
+    if (disableScroll) {
+      body.classList.add('no-scroll');
+      hamburger.style.opacity = 0;
+      menu.style.display = 'none';
+    } else {
+      body.classList.remove('no-scroll');
+      menu.style.display = 'flex';
+      setTimeout(() => {
+        hamburger.style.opacity = 1;
+      }, 300);
+    }
+  };
+
+  return {
+    isModaleOpen,
+    currentImage,
+    swiperPopupContent,
+    openImageModale,
+    closeImageModale,
+  };
+}

web/themes/custom/caravane/assets/js/vuejs/composables/useUtils.js

@@ -0,0 +1,21 @@
+export function useUtils() {
+    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 scrollTop = () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+
+    return {
+        isObjectEmpty,
+        scrollTop,
+    };
+}

web/themes/custom/caravane/assets/scss/main.scss

@@ -5,6 +5,7 @@ $body-margin-y: 5px;
 $body-margin-bottom: 4vh;
 
 $modale-x-padding: 5vw;
+$modale-bottom-padding: 180px;
 
 $sm-font-size: 0.8rem;
 $m-font-size: 1.4rem;
@@ -233,6 +234,7 @@ body{
             align-items: center;
             height: 100%;
             > .layout__region--first {
+              display: none;
               padding-left: $body-margin-x;
               grid-column: 1 / span 4;
               position: relative;
@@ -588,7 +590,6 @@ body{
       > #content-modale {
         > div:not(.image-viewer-wrapper, .image-modale) {
           padding-bottom: 40vh;
-          background-color: red;
           > .content-wrapper {
             left: 25vw;
             width: 50vw;
@@ -596,6 +597,7 @@ body{
             z-index: 2;
             position: relative;
             background-color: white;
+            padding-bottom: $modale-bottom-padding;
             img {
               width: 100%;
               height: auto;
@@ -606,7 +608,7 @@ body{
               overflow: hidden;
             }
             > header {
-              // margin-bottom: 3rem;
+              margin-bottom: 2rem;
               > .cover {
                 max-height: 60vh;
                 display: flex;
@@ -670,12 +672,14 @@ body{
               width: 100%;
               padding: 0 $modale-x-padding;
               box-sizing: border-box;
-              > #sensible-map {
+              > .partie {
-                width: calc(100% + $modale-x-padding);
+                width: 100%;
-                margin-left: calc(($modale-x-padding / 2) * -1);
+                display: inline-block;
-                margin-top: calc($modale-x-padding / 2);
+                > .sensible-map {
-                > figure {
                   margin: 0;
+                  width: calc(100% + $modale-x-padding);
+                  margin-left: calc(($modale-x-padding / 2) * -1);
+                  margin-top: calc($modale-x-padding / 2);
                   .vh--message {
                     font-size: $sm-font-size;
                     top: 1rem;
@@ -688,12 +692,9 @@ body{
                     margin-left: calc($modale-x-padding / 2);
                   }
                 }
-              }
-              > .partie {
-                width: 100%;
-                display: inline-block;
                 > .partie-title,
-                > .chiffres-cles {
+                > .chiffres-cles,
+                > .entretien {
                   > h3 {
                     position: relative;
                     display: inline-block;
@@ -747,16 +748,6 @@ body{
                     }
                   }
                 }
-                > .partie-content {
-                  img {
-                    margin-top: 2rem;
-                    cursor: pointer;
-                    transition: transform 0.3s ease-out;
-                    &:hover {
-                      transform: scale(1.01);
-                    }
-                  }
-                }
                 > .diaporama {
                   width: calc(100% + 2 * #{$modale-x-padding});
                   margin-top: 5rem;
@@ -796,87 +787,89 @@ body{
                 background-size: repeat;
               }
             }
-            .pattern-bottom {
+            > footer {
-              width: calc(100% + $modale-x-padding * 2);
+              .pattern-bottom {
-              margin-left: -$modale-x-padding;
+                mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
-              height: 180px;
+                height: $modale-bottom-padding;
-              margin-top: -90px;
+                position: absolute;
-            }
+                bottom: 0;
-            .related-etape-links {
+              }
-              position: absolute;
+              .related-etape-links {
-              margin-top: -3rem;
+                position: absolute;
-              width: calc(100% - $modale-x-padding);
+                bottom: calc(($modale-bottom-padding / 2) * -1);
-              margin-left: -$modale-x-padding;
+                width: 100%;
-              padding: 0 calc($modale-x-padding / 2);
+                box-sizing: border-box;
-              display: grid;
+                padding: 0 calc($modale-x-padding / 2);
-              grid-template-columns: 1fr 1fr;
+                display: grid;
-              > .card {
+                grid-template-columns: 1fr 1fr;
-                width: 80%;
+                > .card {
-                display: flex;
+                  width: 80%;
-                align-items: center;
-                cursor: pointer;
-                transition: transform 0.3s ease-out;
-                &:hover {
-                  transform: scale(1.05);
-                }
-                &.next {
-                  grid-column: 2 / span 1;
-                  justify-self: flex-end;
-                }
-                > .icon {
-                  z-index: 2;
-                  width: 10px;
-                  height: 30px;
                   display: flex;
-                  flex-direction: column;
-                  justify-content: center;
                   align-items: center;
-                  > div {
+                  cursor: pointer;
-                    display: block;
+                  transition: transform 0.3s ease-out;
-                    width: 20px;
+                  &:hover {
-                    height: 10px;
+                    transform: scale(1.05);
-                    &:first-of-type, &:last-of-type {
-                      height: 8px;
-                      clip-path: polygon(0 0, 100% 0, 50% 100%);
-                    }
-                    &:first-of-type {
-                      transform: rotate(180deg);
-                    }
                   }
-                }
+                  &.next {
-                > .card-content {
+                    grid-column: 2 / span 1;
-                  z-index: 1;
+                    justify-self: flex-end;
-                  background-color: white;
+                  }
-                  display: flex;
+                  > .icon {
-                  width: 100%;
+                    z-index: 2;
-                  > .infos {
+                    width: 10px;
-                    width: 60%;
+                    height: 30px;
-                    text-align: center;
+                    display: flex;
-                    > .titre {
+                    flex-direction: column;
-                      padding: 1rem 0.5rem;
+                    justify-content: center;
-                      font-weight: bold;
+                    align-items: center;
-                      font-family: 'Joost', sans-serif;
+                    > div {
-                      font-size: $m-font-size;
+                      display: block;
-                      > span {
+                      width: 20px;
-                        font-weight: lighter;
+                      height: 10px;
+                      &:first-of-type, &:last-of-type {
+                        height: 8px;
+                        clip-path: polygon(0 0, 100% 0, 50% 100%);
+                      }
+                      &:first-of-type {
+                        transform: rotate(180deg);
                       }
                     }
-                    > .date {
-                      font-size: $sm-font-size;
-                      font-family: 'Marianne', sans-serif;
-                      font-weight: lighter;
-                      padding-bottom: 1rem;
-                    }
                   }
-                  > .vignette {
+                  > .card-content {
-                    width: 40%;
+                    z-index: 1;
-                    position: relative;
+                    background-color: white;
-                    > img {
+                    display: flex;
-                      top: 0;
+                    width: 100%;
-                      position: absolute;
+                    > .infos {
-                      width: 100%;
+                      width: 60%;
-                      height: 100%;
+                      text-align: center;
-                      object-fit: cover;
+                      > .titre {
+                        padding: 1rem 0.5rem;
+                        font-weight: bold;
+                        font-family: 'Joost', sans-serif;
+                        font-size: $m-font-size;
+                        > span {
+                          font-weight: lighter;
+                        }
+                      }
+                      > .date {
+                        font-size: $sm-font-size;
+                        font-family: 'Marianne', sans-serif;
+                        font-weight: lighter;
+                        padding-bottom: 1rem;
+                      }
+                    }
+                    > .vignette {
+                      width: 40%;
+                      position: relative;
+                      > img {
+                        top: 0;
+                        position: absolute;
+                        width: 100%;
+                        height: 100%;
+                        object-fit: cover;
+                      }
                     }
                   }
                 }
@@ -884,112 +877,6 @@ body{
             }
           }
         }
-        > .image-viewer-wrapper {
-          backdrop-filter: blur(3px);
-          position: fixed;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          z-index: 100;
-          > .img-modale {
-            background-color: rgba(0, 0, 0, 0.8);
-            width: 100%;
-            height: 100%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-          }
-          > .simple-viewer {
-            > .img-wrapper {
-              max-width: 60%;
-              display: flex;
-              flex-direction: column;
-              > img {
-                width: 100%;
-              }
-              > figcaption {
-                margin: 0;
-                background-color: white;
-                font-size: $sm-font-size;
-                padding: 0.5rem 1.5rem;
-              }
-            }
-          }
-          > .swiper-viewer {
-            z-index: 1;
-            > .swiper-wrapper {
-              height: 100%;
-              width: 100%;
-              swiper-container {
-                height: 95%;
-                swiper-slide {
-                  display: flex;
-                  justify-content: center;
-                  align-items: flex-start;
-                  figure {
-                    margin-top: 3%;
-                    max-width: 60%;
-                    height: 80%;
-                    img {
-                      height: -webkit-fill-available;
-                      max-width: 100%;
-                      margin-bottom: -5px;
-                      object-fit: cover;
-                    }
-                    figcaption {
-                      margin: 0;
-                      background-color: white;
-                      font-size: $sm-font-size;
-                      padding: 0.5rem 1.5rem;
-                    }
-                  }
-                }
-              }
-            }
-          }
-          > .close-button {
-            position: fixed;
-            top: 2rem;
-            right: $body-margin-x;
-            background-color: unset;
-            border: none;
-            display: block;
-            height: 3rem;
-            width: 3rem;
-            border-radius: 1.5rem;
-            cursor: pointer;
-            background-color: white;
-            padding: 0;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            z-index: 2;
-            > div {
-              display: block;
-              height: 2px;
-              border-radius: 4px;
-              width: 60%;
-              background-color: $main-color;
-              position: absolute;
-              transition: transform 0.3s ease;
-              &:nth-of-type(1) {
-                transform: rotate(45deg) scale(1);
-              }
-              &:nth-of-type(2) {
-                transform: rotate(-45deg) scale(1);
-              }
-            }
-            &:hover {
-              > div:nth-of-type(1) {
-                transform: rotate(45deg) scale(1.1);
-              }
-              > div:nth-of-type(2) {
-                transform: rotate(-45deg) scale(1.1);
-              }
-            }
-          }
-        }
       }
     }
   }