retour à l'index en cliquant sur la carte depuis une étape

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

@@ -39,8 +39,9 @@ import '../scss/main.scss'
                             generalListLinks,
                             logoLink,
                             mapIcons,
+                            mapContainer,
                         } = processClickableElements();
-                        const clickableElements = [...etapeListLinks, ...generalListLinks, logoLink, ...mapIcons];
+                        const clickableElements = [...etapeListLinks, ...generalListLinks, logoLink, ...mapIcons, mapContainer];                        
 
                         setupMapStore(mapStore, map, settings);
 

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

@@ -16,13 +16,14 @@ export const useMapStore = defineStore('mapState', {
         animationDuration: 3,
     }),
     actions: {
-        zoomToPlace(lat, long) {
+        zoomToPlace(lat, long) {          
             if (useLayoutStore().isDesktop) long = long - 0.03;           
             this.map.flyTo(
               [lat, long],
               this.maxZoom,
               { animate: this.animationsAreEnabled, duration: this.animationDuration });
             this.currentZoom = this.maxZoom;
+            this.lockMap();
         },
         resetMap(animate = this.animationsAreEnabled, duration = this.animationDuration) {
             this.map.flyTo(
@@ -30,6 +31,7 @@ export const useMapStore = defineStore('mapState', {
               useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile,
               { animate, duration });
             this.currentZoom = useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile;
+            this.unlockMap();
         },
         lockMap() {
             setTimeout(() => {
@@ -42,7 +44,7 @@ export const useMapStore = defineStore('mapState', {
             this.map.scrollWheelZoom.disable();
             this.map.boxZoom.disable();
             this.map.keyboard.disable();
-            // map.tap.disable();
+            this.map._controlContainer.style.display = 'none';            
         },
         unlockMap() {
           this.map.options.minZoom = useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile;
@@ -53,7 +55,7 @@ export const useMapStore = defineStore('mapState', {
           this.map.scrollWheelZoom.enable();
           this.map.boxZoom.enable();
           this.map.keyboard.enable();
-          // map.tap.enable();
+          this.map._controlContainer.style.display = 'block';
         },
         toggleAnimation() {
             this.animationsAreEnabled = !this.animationsAreEnabled;

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

@@ -23,11 +23,9 @@ export function handleClickableElements(clickableElements, store, router, baseUr
         if (href.startsWith(baseUrl)) href = href.replace(baseUrl, '');
 
         link.onclick = async function (e) {
-            console.log('click on link, route push');
-            
-            router.push(href);
             if (href !== window.location.pathname) {
-              pageChange(href, store, siteName, mapStore, baseUrl);
+                router.push(href);
+                pageChange(href, store, siteName, mapStore, baseUrl);
             }
         }
     }
@@ -40,7 +38,6 @@ export async function handleBrowserNavigation(store, baseUrl, siteName, mapStore
 }
 
 export async function pageChange(href, store, siteName, mapStore, baseUrl) {
-  console.log('trigger page change');
   if (href === '/') {
       store.resetStore(true);
       document.title = siteName;

web/themes/custom/caravane/assets/js/utils/process-clickable-elements.js

@@ -4,6 +4,7 @@ export function processClickableElements() {
         generalListLinks: processStaticLinks(),
         logoLink: processLogoLink(),
         mapIcons: processMapIcons(),
+        mapContainer: processMapContainer(),
     };
 }
 
@@ -64,3 +65,11 @@ function processMapIcons() {
 
     return icons;
 }
+
+function processMapContainer() {
+    let mapContainer = document.querySelector('.leaflet-layer');
+    mapContainer.style.height = "100vh";
+    mapContainer.style.width = "100vw";
+    mapContainer.dataset.href = "/";
+    return mapContainer;
+}

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

@@ -6,11 +6,7 @@
 
         <div v-if="contentType === 'etape' && (content.previous || content.next)" class="related-etape-links">
             <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>
-                    <div :style="{ backgroundColor: content.previous.couleur }"></div>
-                </div>
+                <div class="icon" :style="{ backgroundColor: content.previous.couleur }"></div>
                 <div class="card-content">
                     <div class="infos">
                         <div class="titre">{{ content.previous.title }} <span>({{ content.previous.postalCode.slice(0, 2) }})</span></div>
@@ -22,11 +18,7 @@
                 </div>
             </div>
             <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>
-                    <div :style="{ backgroundColor: content.next.couleur }"></div>
-                </div>
+                <div class="icon" :style="{ backgroundColor: content.next.couleur }"></div>
                 <div class="card-content">
                     <div class="infos">
                         <div class="titre">{{ content.next.title }} <span>({{ content.next.postalCode.slice(0, 2) }})</span></div>