rerefactor du fetching de contenus une mielleure ux au load des modales (description dans le readme)

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

@@ -3,9 +3,15 @@
       :enter-active-class="animationsAreEnabled ? 'v-enter-active' : 'no-transition'"
       :leave-active-class="animationsAreEnabled ? 'v-leave-active' : 'no-transition'"
     >
-        <div v-if="!loading && contentType != ''">
-            <div class="content-wrapper">
+        <div v-if="!partialLoading && contentType != ''">
+            <div
+              class="content-wrapper"
+              :class="
+                contentType === 'ressource' || contentType === 'ressourceItem' 
+                ? 'ressource' : ''"
+              >
                 <ModaleHeader
+                    :loading="loading"
                     :contentType="contentType"
                     :content="content"
                     :couleur="content.couleur || brandColor" />
@@ -14,7 +20,7 @@
                         v-if="contentType === 'ressourceItem'"
                         :content="content"
                         :couleur="brandColor" />
-                    <div v-for="partie in content.parties" class="partie">
+                    <div v-if="!loading" v-for="partie in content.parties" class="partie">
                         <ModaleCarteSensible
                             v-if="partie.type === 'carte_sensible'"
                             :partie="partie" />
@@ -50,21 +56,27 @@
                             :partie="partie"
                             :couleur="content.couleur || brandColor" />
                     </div>
-                    <EquipeContent
-                      v-if="contentType === 'gouvernance'"
-                      :content="content"
-                      :couleur="brandColor" />
-                    <PartenairesContent
-                      v-if="contentType === 'partenaire'"
-                      :content="content" />
-                    <CentreDeRessource
-                      v-if="contentType === 'ressource'"
-                      :content="content"
-                      :couleur="brandColor" />
-                    <RelatedRessources
-                      v-if="contentType === 'etape' && content.relatedRessources.length"
-                      :relatedRessources="content.relatedRessources"
-                      :couleur="content.couleur || brandColor" />
+                    <div class="content-loading" v-else>
+                      <div></div>
+                      <p>Chargement du contenu...</p>
+                    </div>
+                    <template v-if="!loading">
+                      <EquipeContent
+                        v-if="contentType === 'gouvernance'"
+                        :content="content"
+                        :couleur="brandColor" />
+                      <PartenairesContent
+                        v-if="contentType === 'partenaire'"
+                        :content="content" />
+                      <CentreDeRessource
+                        v-if="contentType === 'ressource'"
+                        :content="content"
+                        :couleur="brandColor" />
+                      <RelatedRessources
+                        v-if="contentType === 'etape' && content.relatedRessources?.length"
+                        :relatedRessources="content.relatedRessources"
+                        :couleur="content.couleur || brandColor" />
+                    </template>
                 </main>
                 <PiecesJointes
                   v-if="content.pieces_jointes || content.liens"
@@ -111,123 +123,55 @@ const mapState = useMapStore();
 const {
     contentType,
     content,
+    partialLoading,
     loading,
     error,
 } = storeToRefs(store);
 
-const { defaultMapCenter, animationDuration, animationsAreEnabled } = storeToRefs(mapState);
+const { animationsAreEnabled } = storeToRefs(mapState);
 
 let isModaleEtape, wasModaleEtape;
 
 const brandColor = "#80c8bf";
 
-const handleColorChange = () => {
-  watch(
-    () => content.value.couleur,
-    () => {
-        if (contentType.value === 'etape' && content.value.couleur) {
-            document.documentElement.style.setProperty('--etape-couleur', content.value.couleur || brandColor);
-        }
-    }
-  );
-};
-
-const handleMapMovement = () => {
-  watch(
-    () => loading.value,
-    () => {
-        if (!loading.value) {
-          isModaleEtape = contentType.value === 'etape';
-          console.log(contentType.value);
-          
-
-          // Define helper functions in variables
-          const disableModaleTransition = () => {
-            document.documentElement.style.setProperty('margin-top', '0');
-            document.documentElement.style.setProperty('transition', 'none');
-          }
-          const setModaleTransition = (enterDelay) => {
-            document.documentElement.style.setProperty('--modale-enter-delay', `${enterDelay}s`);
-          };
-
-          const zoomToContentPlace = () => {
-            mapState.zoomToPlace(
-              content.value.coordinates.lat ? content.value.coordinates.lat : defaultMapCenter.value.lat,
-              content.value.coordinates.lon ? content.value.coordinates.lon : defaultMapCenter.value.lng
-            );
-          };
-
-          if (animationsAreEnabled.value) {
-            if (isModaleEtape) {
-              if (!wasModaleEtape) {
-                // national -> détail
-                setModaleTransition(animationDuration.value);
-                zoomToContentPlace();
-              } else {
-                // détail -> détail
-                setModaleTransition(animationDuration.value);
-                zoomToContentPlace();
-              }
-            } else {
-              if (wasModaleEtape) {
-                // détail -> national
-                setModaleTransition(animationDuration.value);
-                mapState.resetMap();
-              } else {
-                // national -> national
-                setModaleTransition(0);
-              }
-            }
-          } else {
-            if (isModaleEtape) {
-              // ? -> détail
-              zoomToContentPlace();
-            } else {
-              // ? -> national
-              mapState.resetMap();
-            }
-            disableModaleTransition();
-          }
-
-          scrollTo(0, 0);
-
-          wasModaleEtape = isModaleEtape;
-        }
-    },
-  );
-};
-
-watch(() => contentType.value, () => {
-  if (contentType.value === '') {
-    handleMapLock(false);
-  } else {
-    handleMapLock(true);  
-  }
-});
-
-const handleMapLock = (shoudLock) => {
-  const checkAndExecute = () => {
-    const leafletLayer = document.querySelector('.leaflet-layer');
-    
-    if (leafletLayer) {
-      if (shoudLock) {
-        mapState.lockMap();
-      } else {
-        mapState.unlockMap();
-      }
-    } else {
-      setTimeout(checkAndExecute, 100);
-    }
-  }
-  checkAndExecute();
-}
-
 onMounted(() => {
   nextTick(() => {
+    watch(
+      () => content.value.couleur,
+      () => {
+        if (contentType.value === 'etape' && content.value.couleur) {
+          document.documentElement.style.setProperty('--etape-couleur', content.value.couleur || brandColor);
+        }
+      }
+    );
     isModaleEtape = contentType.value === 'etape';
     wasModaleEtape = isModaleEtape;
-    handleColorChange();
-    handleMapMovement();
+    watch(
+      () => partialLoading.value,
+      () => {
+        if (!partialLoading.value) {
+          isModaleEtape = contentType.value === 'etape';
+          mapState.handleMapMovement(
+            isModaleEtape,
+            wasModaleEtape,
+            content.value.coordinates?.lat,
+            content.value.coordinates?.lon
+          );
+          scrollTo(0, 0);
+          wasModaleEtape = isModaleEtape;
+        }
+      }
+    );
+    watch(
+      () => contentType.value,
+      () => {
+        if (contentType.value === '') {
+          mapState.unlockMap();
+        } else {
+          mapState.lockMap();
+        }
+      }
+    );
   });
 });
 </script>

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

@@ -22,18 +22,13 @@ const props = defineProps({
 import { onMounted } from 'vue';
 import router from '../../router/router';
 
-import { useContentStore } from '../../stores/content';
-import { useMapStore } from '../../stores/map';
-
 import { handleClickableElements } from '../../utils/handle-navigation.js';
 
-const store = useContentStore();
-const mapStore = useMapStore();
 const siteName = document.querySelector('#site_name').innerText;
 
 onMounted(() => {
     const relatedEtapesCards = document.querySelectorAll('.card');
     const baseUrl = window.location.protocol + "//" + window.location.host;
-    handleClickableElements(relatedEtapesCards, store, router, baseUrl, siteName, mapStore);
+    handleClickableElements(relatedEtapesCards, router, baseUrl, siteName);
 });
 </script>

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

@@ -1,7 +1,7 @@
 <template>
     <header :class="{ 'not-etape': contentType !== 'etape' }">
-        <div class="cover">
-            <img v-if="content.vignette" :src="content.vignette.url.medium" :alt="content.vignette.alt">
+        <div v-if="contentType === 'etape'" class="cover" :style="{ backgroundColor: `${couleur.substring(0, 7)}99`, aspectRatio: '3 / 2' }">
+            <img v-if="!loading && content.vignette" :src="content.vignette.url.medium" :alt="content.vignette.alt">
         </div>
         <div v-if="contentType === 'etape' && content.dates" class="cartouche" :style="{ backgroundColor: couleur }">
             <p>Étape n°{{content.etape_number}}</p>
@@ -23,6 +23,7 @@
 
 <script setup>
 const props = defineProps({
+  loading: Boolean,
   contentType: String,
   content: Object,
   couleur: String,

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

@@ -4,12 +4,12 @@
     :id="`ressource-${index}`"
     :class="ressource.promoted ? 'promoted' : ''">
         <figure>
-            <img :src="ressource.vignette.url" :alt="ressource.vignette.alt" />
+            <img :src="ressource?.vignette.url" :alt="ressource?.vignette.alt" />
         </figure>
         <div>
             <h4>{{ ressource.title }}</h4>
-            <p>Le {{ ressource.date.d }} {{ ressource.date.m }} {{ ressource.date.y }}</p>
-            <p>Par {{ ressource.auteurice }}</p>
+            <p>Le {{ ressource?.date.d }} {{ ressource?.date.m }} {{ ressource?.date.y }}</p>
+            <p>Par {{ ressource?.auteurice }}</p>
         </div>
     </div>
 </template>
@@ -19,14 +19,8 @@ import { onMounted } from 'vue';
 import router from '../../router/router';
 import { handleClickableElements } from '../../utils/handle-navigation.js';
 
-import { useContentStore } from '../../stores/content';
-import { useMapStore } from '../../stores/map';
-
-const store = useContentStore();
-const mapStore = useMapStore();
 const siteName = document.querySelector('#site_name').innerText;
 
-
 let relatedItemCards, baseUrl;
 
 onMounted(() => {
@@ -36,7 +30,7 @@ onMounted(() => {
 
 const setClickableElements = () => {
     relatedItemCards = document.querySelector(`#ressource-${props.index}`);
-    handleClickableElements([relatedItemCards], store, router, baseUrl, siteName, mapStore);
+    handleClickableElements([relatedItemCards], router, baseUrl, siteName);
 }
 
 defineExpose({

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

@@ -3,14 +3,16 @@
     <div class="retour">
       <p data-href="/ressources">← Retour au centre de ressources</p>
     </div>
-    <div class="type">{{ content.displayedType }}</div>
+    <div class="type">{{ content?.displayedType }}</div>
     <div class="title">
       <h2
       :style="{ background: `linear-gradient(transparent 70%, ${couleur} 70%)` }">
-        {{ content.contentTitle }}
+        {{ content?.contentTitle }}
       </h2>
     </div>
-    <div class="meta">Par {{ content.auteurice }}, le {{ content.date.d }} {{ content.date.m }} {{ content.date.y }}</div>
+    <div v-if="content.auteurice && content.date" class="meta">
+      Par {{ content?.auteurice }}, le {{ content?.date.d }} {{ content?.date.m }} {{ content?.date.y }}
+    </div>
   </header>
 </template>
 
@@ -18,14 +20,9 @@
 import { onMounted } from 'vue';
 import router from '../../router/router';
 
-import { useContentStore } from '../../stores/content';
-import { useMapStore } from '../../stores/map';
-
 import { handleClickableElements } from '../../utils/handle-navigation.js';
 
-const store = useContentStore();
-const mapStore = useMapStore();
-const siteName = document.querySelector('#site_name').innerText;
+const siteName = document.querySelector('#site_name')?.innerText;
 
 const props = defineProps({
   content: Object,
@@ -33,7 +30,7 @@ const props = defineProps({
 });
 
 function setDisplayedType() {
-    const ressourceType = props.content.ressourceType;
+    const ressourceType = props.content?.ressourceType;
     switch (ressourceType) {
       case 'cartes_blanches':
         props.content.displayedType = 'Carte blanche';
@@ -57,7 +54,7 @@ function setDisplayedType() {
 onMounted(() => {
     const backToRessourcesLink = document.querySelectorAll('.retour > p');
     const baseUrl = window.location.protocol + "//" + window.location.host;
-    handleClickableElements(backToRessourcesLink, store, router, baseUrl, siteName, mapStore);
+    handleClickableElements(backToRessourcesLink, router, baseUrl, siteName);
     setDisplayedType();
 });
 </script>