mouvement et lock de la carte + prevent refresh homepage

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

@@ -6,9 +6,11 @@ import REST from '../api/rest-axios';
 export const useContentStore = defineStore('content', {
     state: () => ({
         href: '',
+        map: {},
         etape: {
             title: '',
             adresse: {},
+            coordinates: {},
             etape_number: '',
             vignette: {},
             couleur: '',
@@ -37,8 +39,9 @@ export const useContentStore = defineStore('content', {
         error: null,
     }),
     actions: {
-        async fetchEtapeData(nid) {
+        async fetchEtapeData(nid, map) {
             this.resetStore();
+            this.map = map;
             try {
                 const response = await REST.get(`/jsonapi/node/etape/`);
                 for (let etape of response.data.data) {
@@ -48,6 +51,10 @@ export const useContentStore = defineStore('content', {
                             this.href = metatag.attributes.href;                           
                           }
                         }
+                        this.etape.coordinates = {
+                            lat: etape.attributes.field_geofield.lat,
+                            lon: etape.attributes.field_geofield.lon,
+                        };
                         this.etape.title = etape.attributes.title;
                         this.etape.adresse = etape.attributes.field_adresse;
                         this.etape.etape_number = etape.attributes.field_arret_numero;
@@ -205,8 +212,9 @@ export const useContentStore = defineStore('content', {
                 this.loading = false;
             }
         },
-        async fetchStaticData(nid) {
+        async fetchStaticData(nid, map) {
             this.resetStore();
+            this.map = map;
             try {
                 const response = await REST.get(`/jsonapi/node/static/`);
                 for (let page of response.data.data) {
@@ -285,7 +293,9 @@ export const useContentStore = defineStore('content', {
             }
           }
         },
-        emptyAll(nid) {
+        emptyAll(nid, map) {
+          this.href = '';
+          this.map = map;
           this.etape = {};
           this.page = {};
           this.setActiveItemInMenu(nid);
@@ -328,7 +338,6 @@ export const useContentStore = defineStore('content', {
         resetStore() {
             this.loading = true;
             this.error = null;
-            this.href = '';
             this.etape = {};
             this.page = {};
         },

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

@@ -0,0 +1,46 @@
+import { defineStore } from 'pinia';
+
+export const useMapStore = defineStore('mapState', {
+    state: () => ({
+        defaultZoom: Number,
+        defaultMapCenter: Object,
+        currentPlace: Object,
+        maxZoom: Number,
+        currentZoom: Number,
+        duration: 3,
+    }),
+    actions: {
+        zoomToPlace(map, lat, long) {
+            map.flyTo([lat, long], this.maxZoom, { duration: this.duration });
+            this.currentZoom = this.maxZoom;
+        },
+        resetMap(map) {
+            map.flyTo(this.defaultMapCenter, this.defaultZoom, { duration: this.duration });
+            this.currentZoom = this.defaultZoom;
+        },
+        lockMap(map) {
+            setTimeout(() => {
+                map.options.minZoom = this.currentZoom;
+                map.options.maxZoom = this.currentZoom;
+            }, this.duration * 1000 + 100);
+            map.dragging.disable();
+            map.touchZoom.disable();
+            map.doubleClickZoom.disable();
+            map.scrollWheelZoom.disable();
+            map.boxZoom.disable();
+            map.keyboard.disable();
+            // map.tap.disable();
+          },
+          unlockMap(map) {
+            map.options.minZoom = this.defaultZoom;
+            map.options.maxZoom = this.maxZoom;
+            map.dragging.enable();
+            map.touchZoom.enable();
+            map.doubleClickZoom.enable();
+            map.scrollWheelZoom.enable();
+            map.boxZoom.enable();
+            map.keyboard.enable();
+            // map.tap.enable();
+          },
+    },
+});