diff --git a/web/themes/custom/caravane/assets/js/stores/layout.js b/web/themes/custom/caravane/assets/js/stores/layout.js index 3b24f3e..0ca197f 100644 --- a/web/themes/custom/caravane/assets/js/stores/layout.js +++ b/web/themes/custom/caravane/assets/js/stores/layout.js @@ -1,4 +1,4 @@ -import { defineStore } from 'pinia'; +import { defineStore, mapStores } from 'pinia'; export const useLayoutStore = defineStore('layout', { state: () => ({ diff --git a/web/themes/custom/caravane/assets/js/stores/mapState.js b/web/themes/custom/caravane/assets/js/stores/map.js similarity index 76% rename from web/themes/custom/caravane/assets/js/stores/mapState.js rename to web/themes/custom/caravane/assets/js/stores/map.js index b10701b..fb26011 100644 --- a/web/themes/custom/caravane/assets/js/stores/mapState.js +++ b/web/themes/custom/caravane/assets/js/stores/map.js @@ -4,7 +4,8 @@ import { useLayoutStore } from './layout'; export const useMapStore = defineStore('mapState', { state: () => ({ map: Object, - defaultZoom: Number, + defaultZoomDesktop: Number, + defaultZoomMobile: Number, defaultMapCenter: Object, currentPlace: Object, maxZoom: Number, @@ -18,8 +19,8 @@ export const useMapStore = defineStore('mapState', { this.currentZoom = this.maxZoom; }, resetMap() { - this.map.flyTo(this.defaultMapCenter, this.defaultZoom, { duration: this.duration }); - this.currentZoom = this.defaultZoom; + this.map.flyTo(this.defaultMapCenter, useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile, { duration: this.duration }); + this.currentZoom = useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile; }, lockMap() { setTimeout(() => { @@ -35,7 +36,7 @@ export const useMapStore = defineStore('mapState', { // map.tap.disable(); }, unlockMap() { - this.map.options.minZoom = this.defaultZoom; + this.map.options.minZoom = useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile; this.map.options.maxZoom = this.maxZoom; this.map.dragging.enable(); this.map.touchZoom.enable(); diff --git a/web/themes/custom/caravane/assets/js/utils/map-setup.js b/web/themes/custom/caravane/assets/js/utils/map-setup.js index 06a905e..4b9413f 100644 --- a/web/themes/custom/caravane/assets/js/utils/map-setup.js +++ b/web/themes/custom/caravane/assets/js/utils/map-setup.js @@ -1,6 +1,10 @@ +import { useLayoutStore } from '../stores/layout'; + export function setupMapStore(mapStore, map, settings) { mapStore.map = map; mapStore.defaultMapCenter = map.getCenter(); mapStore.maxZoom = settings.settings.maxZoom; - mapStore.defaultZoom = settings.settings.minZoom; + mapStore.defaultZoomDesktop = settings.settings.minZoom; + mapStore.defaultZoomMobile = settings.settings.minZoom - 1; + mapStore.map.flyTo([mapStore.defaultMapCenter.lat, mapStore.defaultMapCenter.lng], useLayoutStore().isDesktop ? mapStore.defaultZoomDesktop : mapStore.defaultZoomMobile); } \ No newline at end of file diff --git a/web/themes/custom/caravane/assets/js/utils/vue-setup.js b/web/themes/custom/caravane/assets/js/utils/vue-setup.js index d9be8e1..e0cf6d2 100644 --- a/web/themes/custom/caravane/assets/js/utils/vue-setup.js +++ b/web/themes/custom/caravane/assets/js/utils/vue-setup.js @@ -6,7 +6,7 @@ import VueImageZoomer from 'vue-image-zoomer'; import 'vue-image-zoomer/dist/style.css'; import { useContentStore } from '../stores/content'; -import { useMapStore } from '../stores/mapState'; +import { useMapStore } from '../stores/map'; export function initVueContentModale() { const app = createApp(Modale) diff --git a/web/themes/custom/caravane/assets/js/vuejs/Modale.vue b/web/themes/custom/caravane/assets/js/vuejs/Modale.vue index 0286ab9..079b7fa 100644 --- a/web/themes/custom/caravane/assets/js/vuejs/Modale.vue +++ b/web/themes/custom/caravane/assets/js/vuejs/Modale.vue @@ -51,7 +51,7 @@ import { computed, watch, onMounted } from 'vue'; import { storeToRefs } from 'pinia'; import { useContentStore } from '../stores/content'; -import { useMapStore } from '../stores/mapState'; +import { useMapStore } from '../stores/map'; import { useLayoutStore } from '../stores/layout'; import ModaleHeader from './components/ModaleHeader.vue';