mouvement et lock de la carte + prevent refresh homepage

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

@@ -5,7 +5,7 @@
         </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 v-if="content.previous" class="card previous" @click="store.fetchEtapeData(content.previous.nid, map)">
                 <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="store.fetchEtapeData(content.next.nid)">
+            <div v-if="content.next" class="card next" @click="store.fetchEtapeData(content.next.nid, map)">
                 <div class="icon">
                     <div :style="{ backgroundColor: content.next.couleur }"></div>
                     <div :style="{ backgroundColor: content.next.couleur }"></div>
@@ -50,5 +50,6 @@ const store = useContentStore();
 const props = defineProps({
   content: Object,
   couleur: String,
+  map: Object,
 });
 </script>

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

@@ -26,6 +26,7 @@
 </template>
 
 <script setup>
+import { onMounted } from 'vue';
 import { useImageModal } from '../../composables/useImageModale';
 import ImageModale from '../ImageModale.vue';
 // WebComponent
@@ -34,7 +35,8 @@ import { register } from 'swiper/element/bundle';
 register();
 
 const props = defineProps({
-    partie: Object
+    partie: Object,
+    couleur: String,
 });
 
 const { 
@@ -62,6 +64,10 @@ const handleImageClick = (event) => {
     openImageModale(img.src, img.alt, swiperMedia);
   }
 };
+
+onMounted(() => {
+  document.documentElement.style.setProperty('--etape-couleur', props.couleur);
+});
 </script>
 
 <style>

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

@@ -1,6 +1,12 @@
 <template>
     <div class="videos">
-        <iframe v-for="video in partie.videos" :src="video" frameborder="0" width="100%" style="aspect-ratio: 16 / 9;"></iframe>
+        <iframe 
+            v-for="video in partie.videos" 
+            :src="video" 
+            frameborder="0" 
+            width="100%" 
+            style="aspect-ratio: 16 / 9;">
+        </iframe>
     </div>
 </template>