ajout partenaires et équipe

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

@@ -25,14 +25,14 @@ export const useContentStore = defineStore('content', {
     actions: {
         async fetchContentData(path) {
             this.resetStore(false);
-            const contentTypes = [ 'etape', 'static' ];
+            const contentTypes = [ 'etape', 'static', 'equipe', 'partenaires' ];
             try {
                 let rawContent,
                     contentType,
                     response;
-
                     contentTypesLoop:
                     for (let type of contentTypes) {
+                      if (type !== 'partenaires') {
                         response = await REST.get(`/jsonapi/node/${type}/`);
                         for (let content of response.data.data) {
                           for (let tag of content.attributes.metatag) {
@@ -43,8 +43,31 @@ export const useContentStore = defineStore('content', {
                                   break contentTypesLoop;
                               }
                             }
+                            // pour les pages équipes
+                            if (!rawContent) {
+                              const baseUrl = window.location.protocol + "//" + window.location.host;
+                              if (path.startsWith(baseUrl)) {
+                                const shortenPath = path.slice(baseUrl.length + 1);
+                                if (content.attributes.title.toLowerCase() === shortenPath) {
+                                    this.contentType = type;
+                                    rawContent = content;
+                                    contentType = type;
+                                    break contentTypesLoop;
                                 }
                               }
+                            }
+                        }
+                      } else {
+                        console.log("partenaires");
+
+                        // pour les pages partenaires
+                        rawContent = await REST.get('/rest/partenaires/');
+                        contentType = type;
+                        this.contentType = type;
+                      }
+                    }
+
+                  if (this.contentType !== 'equipe' && this.contentType !== 'partenaires') {
                       // pageTitle
                     for (let tag of rawContent.attributes.metatag) {
                         if (tag.tag === "meta") {
@@ -56,7 +79,7 @@ export const useContentStore = defineStore('content', {
                     this.content.contentTitle = rawContent.attributes.title;
 
                     // vignette
-                const vignetteFetch = await this.fetchDeeperContent('field_vignette', rawContent.relationships);
+                    const vignetteFetch = await this.fetchFromRelationships('field_vignette', rawContent.relationships);
                     if (vignetteFetch) {
                         this.content.vignette = {
                             url: vignetteFetch.attributes.uri.url,
@@ -88,7 +111,7 @@ export const useContentStore = defineStore('content', {
 
                     // parties
                     const fieldParties = contentType === 'etape' ? 'field_parties' : 'field_parties_static';
-                const partiesFetch = await this.fetchDeeperContent(fieldParties, rawContent.relationships);
+                    const partiesFetch = await this.fetchFromRelationships(fieldParties, rawContent.relationships);
 
                     if (partiesFetch) {
                         this.content.parties = [];
@@ -100,7 +123,7 @@ export const useContentStore = defineStore('content', {
 
                             switch (partieType) {
                                 case 'carte_sensible':
-                                const carteSensibleFetch = await this.fetchDeeperContent('field_image_carte', partie.relationships);
+                                    const carteSensibleFetch = await this.fetchFromRelationships('field_image_carte', partie.relationships);
                                     if (carteSensibleFetch) {
                                         partieContent.carteSensible = {
                                             url: carteSensibleFetch.attributes.uri.url,
@@ -113,7 +136,7 @@ export const useContentStore = defineStore('content', {
                                     partieContent.texte = partie.attributes.field_texte.value;
                                     break;
                                 case 'chiffres_cles':
-                                const chiffresClesFetch = await this.fetchDeeperContent('field_chiffres_clefs', partie.relationships);
+                                    const chiffresClesFetch = await this.fetchFromRelationships('field_chiffres_clefs', partie.relationships);
                                     if (chiffresClesFetch) {
                                         partieContent.chiffresCles = [];
                                         for (let chiffre of chiffresClesFetch) {
@@ -125,7 +148,7 @@ export const useContentStore = defineStore('content', {
                                     }
                                     break;
                                 case 'diaporama':
-                                const diaporamaFetch = await this.fetchDeeperContent('field_diaporama', partie.relationships);
+                                    const diaporamaFetch = await this.fetchFromRelationships('field_diaporama', partie.relationships);
                                     if (diaporamaFetch) {
                                         partieContent.diaporama = [];
                                         for (let [index, image] of diaporamaFetch.entries()) {
@@ -138,12 +161,12 @@ export const useContentStore = defineStore('content', {
                                     break;
                                 case 'entretien':
                                     partieContent.entretien = {};
-                                const personnesFetch = await this.fetchDeeperContent('field_personne_s', partie.relationships);
+                                    const personnesFetch = await this.fetchFromRelationships('field_personne_s', partie.relationships);
-                                const questionsReponsesFetch = await this.fetchDeeperContent('field_questions_reponses', partie.relationships);
+                                    const questionsReponsesFetch = await this.fetchFromRelationships('field_questions_reponses', partie.relationships);
                                     if (personnesFetch && questionsReponsesFetch) {
                                         partieContent.entretien.personnes = [];
                                         for (let personne of personnesFetch) {
-                                        const portraitFetch = await this.fetchDeeperContent('field_portrait', personne.relationships);
+                                            const portraitFetch = await this.fetchFromRelationships('field_portrait', personne.relationships);
                                             if (portraitFetch) {
                                                 partieContent.entretien.personnes.push({
                                                     portrait: portraitFetch.attributes.uri.url,
@@ -176,6 +199,53 @@ export const useContentStore = defineStore('content', {
                             this.content.parties.push(partieContent);
                         }
                     }
+                  } else if (this.contentType === 'equipe') {
+                    // pour les pages équipe
+                    for (let tag of rawContent.attributes.metatag) {
+                      if (tag.tag === "meta") {
+                          this.pageTitle = tag.attributes.content;
+                          break;
+                      }
+                    }
+                    this.content.contentTitle = rawContent.attributes.title;
+                    this.content.textIntro = rawContent.attributes.body.value;
+                    const personnesArray = [];
+                    const personnes = await this.fetchFromRelationships('field_personne_s', rawContent.relationships);
+                    for (let personne of personnes) {
+                      const fetchPortrait = await this.fetchFromRelationships('field_portrait', personne.relationships);
+                      personnesArray.push({
+                        nom: personne.attributes.field_nom,
+                        prenom: personne.attributes.field_prenom,
+                        description: personne.attributes.field_description,
+                        portrait_alt: personne.relationships.field_portrait.data.meta.alt,
+                        portrait_url: fetchPortrait.attributes.uri.url,
+                      });
+                    }
+
+                    this.content.personnes = personnesArray;
+
+                    // await this.fetchFromId(bundle, id);
+                    // est peut-être plus lisible que fetchFromRelationships
+
+                  } else if (this.contentType === 'partenaires') {
+                    console.log(rawContent);
+                    this.content.contentTitle = "Partenaires";
+                    const partenairesArray = [];
+                    for (let partenaire of rawContent.data) {
+                      partenairesArray.push({
+                        title: partenaire.title[0].value,
+                        description: partenaire.body[0].value,
+                        link_url: partenaire.field_lien[0].uri,
+                        link_text: partenaire.field_lien[0].title,
+                        logo_url: partenaire.field_logo[0].url,
+                        logo_alt: partenaire.field_logo[0].alt,
+                        weight: partenaire.field_poid[0].value,
+                      })
+                    }
+
+                    this.content.partenaires = partenairesArray;
+
+                  }
             } catch (error) {
                 this.error = 'Failed to fetch data';
                 console.error('Issue with getNodeData', error);
@@ -236,7 +306,7 @@ export const useContentStore = defineStore('content', {
                 }
             }
         },
-        async fetchDeeperContent(field, relationships) {
+        async fetchFromRelationships(field, relationships) {
             if (relationships[field].data) {
               try {
                 const contentLink = relationships[field].links.related.href;

web/themes/custom/caravane/assets/js/utils/handle-navigation.js

@@ -35,7 +35,7 @@ export async function handleBrowserNavigation(store, baseUrl, siteName, mapStore
   pageChange(href, store, siteName, mapStore, baseUrl)
 }
 
-async function pageChange(href, store, siteName, mapStore, baseUrl) {
+export async function pageChange(href, store, siteName, mapStore, baseUrl) {
   if (href === '/') {
       store.resetStore(true);
       document.title = siteName;

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) {
+async function goToRelatedElement(href) {
   const baseUrl = window.location.protocol + "//" + window.location.host;
   if (href.startsWith(baseUrl)) href = href.replace(baseUrl, '');
-
+  pageChange(href, store, siteName, mapStore, 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) {
-  const baseUrl = window.location.protocol + "//" + window.location.host;
-  if (href.startsWith(baseUrl)) href = href.replace(baseUrl, '');
-  setActiveNavItem('etape', href);
-  displayRelatedElement(href);
-}
 </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>

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>

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

@@ -129,7 +129,7 @@ body{
               padding-left: $menu-margin;
               margin: 10px 0;
               color: white;
-              font-size: $l-font-size-mobile;
+              font-size: 2rem;
               font-family: 'Joost', sans-serif;
               font-weight: bold;
               @media screen and (min-width: $desktop-min-width) {
@@ -229,7 +229,6 @@ body{
               z-index: 1;
               font-size: $m-font-size-mobile;
               @media screen and (min-width: $desktop-min-width) {
-                font-size: $m-font-size-desktop;
                 width: $menu-desktop-width;
               }
               > li {
@@ -746,6 +745,10 @@ body{
               }
             }
             > #content-modale {
+              padding-bottom: 20vh;
+              @media screen and (min-width: $desktop-min-width) {
+                z-index: 6;
+              }
               > div:not(.image-viewer-wrapper, .image-modale) {
                 padding-bottom: 5vh;
                 > .content-wrapper {
@@ -888,6 +891,7 @@ body{
                   > main {
                     width: 100%;
                     padding: 0 $modale-x-padding;
+                    padding-bottom: 5vh;
                     box-sizing: border-box;
                     > .partie {
                       width: 100%;
@@ -1060,6 +1064,55 @@ body{
                         font-size: $sm-font-size-desktop;
                       }
                     }
+                    > #equipe,
+                    > #partenaires {
+                      margin-top: 5vh;
+                      > div:not(.personne) {
+                        @media screen and (min-width: $desktop-min-width) {
+                          margin: 10vh 0;
+                        }
+                      }
+                      > div.personne,
+                      > div.partenaire {
+                        display: grid;
+                        grid-template-columns: 0.4fr 1fr;
+                        column-gap: 3rem;
+                        grid-template-rows: 1fr 1fr;
+                        justify-items: start;
+                        margin: 5vh 0;
+                        > figure {
+                          grid-column: 1;
+                          grid-row: 1 / span 2;
+                          width: 100%;
+                          margin: 0;
+                          > img {
+                            border-radius: 50%;
+                          }
+                        }
+                        > .name,
+                        > .title {
+                          align-self: flex-end;
+                          margin-bottom: 1.3rem;
+                          font-size: $m-font-size-mobile;
+                          @media screen and (min-width: $desktop-min-width) {
+                            font-size: $m-font-size-desktop;
+                          }
+                          > p {
+                            margin: 0;
+                          }
+                        }
+                        > .description {
+                          > p {
+                            margin: 0;
+                          }
+                        }
+                      }
+                    }
+                    #partenaires {
+                      @media screen and (min-width: $desktop-min-width) {
+                        margin-top: 10vh;
+                      }
+                    }
                   }
                   > footer {
                     .pattern-bottom {
@@ -1179,7 +1232,11 @@ body{
                 }
               }
             }
-            > #animation-toggle > div {
+            > #animation-toggle {
+              @media screen and (min-width: $desktop-min-width) {
+                z-index: 5;
+              }
+              > div {
                 cursor: pointer;
                 position: fixed;
                 bottom: $body-margin-bottom;
@@ -1249,6 +1306,7 @@ body{
                 }
               }
             }
+          }
           > .user-login-form {
             height: 90vh;
             display: flex;