ajout partenaires et équipe

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

@@ -3,7 +3,12 @@
       :enter-active-class="animationsAreEnabled ? 'v-enter-active' : 'no-transition'"
       :leave-active-class="animationsAreEnabled ? 'v-leave-active' : 'no-transition'"
     >
-        <div v-if="!loading && (contentType === 'etape' || contentType === 'static')">
+        <div v-if="!loading && (
+          contentType === 'etape'
+          || contentType === 'static'
+          || contentType === 'equipe'
+          || contentType === 'partenaires'
+        )">
             <div class="content-wrapper">
                 <ModaleHeader
                     :contentType="contentType"
@@ -38,6 +43,12 @@
                             v-if="partie.type === 'video'"
                             :partie="partie" />
                     </div>
+                    <EquipeContent
+                        v-if="contentType === 'equipe'"
+                        :content="content" />
+                    <PartenairesContent
+                        v-if="contentType === 'partenaires'"
+                        :content="content" />
                 </main>
                 <ModaleFooter
                     :contentType="contentType"
@@ -50,15 +61,16 @@
 </template>
 
 <script setup>
-import { computed, watch, onMounted } from 'vue';
+import { watch, onMounted } from 'vue';
 
 import { storeToRefs } from 'pinia';
 import { useContentStore } from '../stores/content';
 import { useMapStore } from '../stores/map';
-import { useLayoutStore } from '../stores/layout';
 
 import ModaleHeader from './components/ModaleHeader.vue';
 import ModaleFooter from './components/ModaleFooter.vue';
+import EquipeContent from './components/EquipeContent.vue';
+import PartenairesContent from './components/PartenairesContent.vue';
 
 import ModaleCarteSensible from './components/parties/ModaleCarteSensible.vue';
 import ModaleTitreTexte from './components/parties/ModaleTitreTexte.vue';
@@ -70,12 +82,6 @@ import ModaleVideos from './components/parties/ModaleVideos.vue';
 
 const store = useContentStore();
 const mapState = useMapStore();
-const layoutStore = useLayoutStore();
-
-// pour importer le breakpoint
-// const { minDesktopWidth } = storeToRefs(layoutStore);
-// console.log(minDesktopWidth);
-
 
 const {
     contentType,
@@ -134,9 +140,7 @@ const handleMapMovement = () => {
                 } else {
                   console.log('détail -> détail');
                   setModaleTransition(animationDuration.value);
-                  //mapState.resetMap();
                   zoomToContentPlace();
-                  //setTimeout(zoomToContentPlace, animationDuration.value * 1000);
                 }
               } else {
                 if (wasModaleEtape) {

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

@@ -0,0 +1,18 @@
+<template>
+  <div id="equipe">
+    <div v-html="content.textIntro"></div>
+    <div v-for="personne in content.personnes" class="personne">
+      <figure>
+        <img :src="personne.portrait_url" :alt="personne.portrait_alt">
+      </figure>
+      <div class="name"><p v-html="personne.prenom + ' ' + personne.nom"></p></div>
+      <div class="description"><p v-html="personne.description"></p></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  content: Object,
+});
+</script>

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

@@ -5,7 +5,7 @@
         </div>
 
         <div v-if="contentType === 'etape' && (content.previous || content.next)" class="related-etape-links">
-            <div v-if="content.previous" class="card previous" @click="clickRelatedElement(content.previous.url)">
+            <div v-if="content.previous" class="card previous" @click="goToRelatedElement(content.previous.url)">
                 <div class="icon">
                     <div :style="{ backgroundColor: content.previous.couleur }"></div>
                     <div :style="{ backgroundColor: content.previous.couleur }"></div>
@@ -21,7 +21,7 @@
                     </div>
                 </div>
             </div>
-            <div v-if="content.next" class="card next" @click="clickRelatedElement(content.next.url)">
+            <div v-if="content.next" class="card next" @click="goToRelatedElement(content.next.url)">
                 <div class="icon">
                     <div :style="{ backgroundColor: content.next.couleur }"></div>
                     <div :style="{ backgroundColor: content.next.couleur }"></div>
@@ -42,12 +42,16 @@
 </template>
 
 <script setup>
-import router from '../../router/router.js';
 import { useContentStore } from '../../stores/content';
+import { pageChange } from '../../utils/handle-navigation.js';
 
 const brandColor = "#80c8bf";
 
 const store = useContentStore();
+const mapStore = useContentStore();
+const siteName = document.querySelector('#site_name').innerText;
+
+
 const props = defineProps({
   contentType: String,
   content: Object,
@@ -55,21 +59,10 @@ const props = defineProps({
   map: Object,
 });
 
-async function displayRelatedElement(href) {
-    const baseUrl = window.location.protocol + "//" + window.location.host;
-    if (href.startsWith(baseUrl)) href = href.replace(baseUrl, '');
-
-    router.push(href);
-    await store.fetchContentData(baseUrl + href);
-    document.title = store.pageTitle;
-}
-
-import { setActiveNavItem } from '../../utils/set-active-nav-item.js';
-
-function clickRelatedElement(href) {
+async function goToRelatedElement(href) {
   const baseUrl = window.location.protocol + "//" + window.location.host;
   if (href.startsWith(baseUrl)) href = href.replace(baseUrl, '');
-  setActiveNavItem('etape', href);
-  displayRelatedElement(href);
+  pageChange(href, store, siteName, mapStore, baseUrl)
 }
+
 </script>

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

@@ -14,7 +14,7 @@
             <div class="locality">
                 <div class="top-triangle"></div>
                 <div class="locality-title">
-                    <h1>{{content.contentTitle}} <em v-if="content.adresse">({{ content.adresse.postal_code.slice(0, 2) }})</em></h1>
+                    <h1>{{content.contentTitle}}<em v-if="content.adresse">({{ content.adresse.postal_code.slice(0, 2) }})</em></h1>
                 </div>
             </div>
         </div>
@@ -27,4 +27,4 @@ const props = defineProps({
   content: Object,
   couleur: String,
 });
-</script>
+</script>

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

@@ -0,0 +1,17 @@
+<template>
+  <div id="partenaires">
+    <div v-for="partenaire in content.partenaires" class="partenaire">
+      <figure>
+        <img :src="partenaire.logo_url" :alt="partenaire.logo_alt">
+      </figure>
+      <div class="title"><p v-html="partenaire.title"></p></div>
+      <div class="description"><p v-html="partenaire.description"></p></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  content: Object,
+});
+</script>