bachir
/
drupal-caravane
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dézoom map mobile

This commit is contained in:
Valentin 2024-10-19 04:08:11 +02:00
parent 376e0af7a3
commit ec73eabda9
5 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/themes/custom/caravane/assets/js/stores/layout.js
View File

@ -1,4 +1,4 @@
import { defineStore } from 'pinia'; import { defineStore, mapStores } from 'pinia';
export const useLayoutStore = defineStore('layout', { export const useLayoutStore = defineStore('layout', {
state: () => ({ state: () => ({

9
web/themes/custom/caravane/assets/js/stores/mapState.js → web/themes/custom/caravane/assets/js/stores/map.js
View File

@ -4,7 +4,8 @@ import { useLayoutStore } from './layout';
export const useMapStore = defineStore('mapState', { export const useMapStore = defineStore('mapState', {
state: () => ({ state: () => ({
map: Object, map: Object,
defaultZoom: Number, defaultZoomDesktop: Number,
defaultZoomMobile: Number,
defaultMapCenter: Object, defaultMapCenter: Object,
currentPlace: Object, currentPlace: Object,
maxZoom: Number, maxZoom: Number,
@ -18,8 +19,8 @@ export const useMapStore = defineStore('mapState', {
this.currentZoom = this.maxZoom; this.currentZoom = this.maxZoom;
}, },
resetMap() { resetMap() {
this.map.flyTo(this.defaultMapCenter, this.defaultZoom, { duration: this.duration }); this.map.flyTo(this.defaultMapCenter, useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile, { duration: this.duration });
this.currentZoom = this.defaultZoom; this.currentZoom = useLayoutStore().isDesktop ? this.defaultZoomDesktop : this.defaultZoomMobile;
}, },
lockMap() { lockMap() {
setTimeout(() => { setTimeout(() => {
@ -35,7 +36,7 @@ export const useMapStore = defineStore('mapState', {
// map.tap.disable(); // map.tap.disable();
}, },
unlockMap() { 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.options.maxZoom = this.maxZoom;
this.map.dragging.enable(); this.map.dragging.enable();
this.map.touchZoom.enable(); this.map.touchZoom.enable();

6
web/themes/custom/caravane/assets/js/utils/map-setup.js
View File

@ -1,6 +1,10 @@
import { useLayoutStore } from '../stores/layout';
export function setupMapStore(mapStore, map, settings) { export function setupMapStore(mapStore, map, settings) {
mapStore.map = map; mapStore.map = map;
mapStore.defaultMapCenter = map.getCenter(); mapStore.defaultMapCenter = map.getCenter();
mapStore.maxZoom = settings.settings.maxZoom; 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);
} }

2
web/themes/custom/caravane/assets/js/utils/vue-setup.js
View File

@ -6,7 +6,7 @@ import VueImageZoomer from 'vue-image-zoomer';
import 'vue-image-zoomer/dist/style.css'; import 'vue-image-zoomer/dist/style.css';
import { useContentStore } from '../stores/content'; import { useContentStore } from '../stores/content';
import { useMapStore } from '../stores/mapState'; import { useMapStore } from '../stores/map';
export function initVueContentModale() { export function initVueContentModale() {
const app = createApp(Modale) const app = createApp(Modale)

2
web/themes/custom/caravane/assets/js/vuejs/Modale.vue
View File

@ -51,7 +51,7 @@ import { computed, watch, onMounted } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useContentStore } from '../stores/content'; import { useContentStore } from '../stores/content';
import { useMapStore } from '../stores/mapState'; import { useMapStore } from '../stores/map';
import { useLayoutStore } from '../stores/layout'; import { useLayoutStore } from '../stores/layout';
import ModaleHeader from './components/ModaleHeader.vue'; import ModaleHeader from './components/ModaleHeader.vue';