Arno Kaimbacher
a744ae7e5b
- add draw.component.vue - only load needed leaflet classes into map.component.vue an Submitter/Create.vue - rename js/store.Map.ts to js/Stores/map.service.ts -
113 lines
3.2 KiB
Vue
113 lines
3.2 KiB
Vue
<template>
|
|
<div class="gba-control-zoom btn-group-vertical">
|
|
<button
|
|
ref="inputPlus"
|
|
class="inline-flex cursor-pointer justify-center items-center whitespace-nowrap focus:outline-none transition-colors duration-150 border rounded ring-blue-700 bg-teal-50 text-black border-teal-50 hover:bg-gray-200 text-sm p-1"
|
|
type="button"
|
|
@click.prevent="zoomIn"
|
|
>
|
|
<BaseIcon v-if="mdiPlus" :path="mdiPlus" />
|
|
</button>
|
|
|
|
<button
|
|
ref="inputMinus"
|
|
class="inline-flex cursor-pointer justify-center items-center whitespace-nowrap focus:outline-none transition-colors duration-150 border rounded ring-blue-700 bg-teal-50 text-black border-teal-50 hover:bg-gray-200 text-sm p-1"
|
|
type="button"
|
|
@click.prevent="zoomOut"
|
|
>
|
|
<BaseIcon v-if="mdiMinus" :path="mdiMinus" />
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue, Prop, Ref } from 'vue-facing-decorator';
|
|
import { MapService } from '@/Stores/map.service';
|
|
|
|
import BaseIcon from '@/Components/BaseIcon.vue';
|
|
import { mdiPlus, mdiMinus } from '@mdi/js';
|
|
|
|
@Component({
|
|
name: 'zoom-control',
|
|
components: {
|
|
BaseIcon,
|
|
},
|
|
})
|
|
export default class ZoomControlComponent extends Vue {
|
|
mdiPlus = mdiPlus;
|
|
mdiMinus = mdiMinus;
|
|
|
|
/**
|
|
* Connect map id.
|
|
*/
|
|
@Prop() public mapId: string;
|
|
|
|
@Ref('inputPlus') private _inputPlus: HTMLElement;
|
|
@Ref('inputMinus') private _inpuMinus: HTMLElement;
|
|
|
|
mapService = MapService();
|
|
map;
|
|
|
|
// mounted() {
|
|
// let map = (this.map = this.mapService.getMap(this.mapId));
|
|
// map.on('zoomend zoomlevelschange', this.updateDisabled, this);
|
|
// }
|
|
|
|
// unmounted() {
|
|
// this.map.off('zoomend zoomlevelschange');
|
|
// }
|
|
|
|
public zoomIn() {
|
|
let map = this.mapService.getMap(this.mapId);
|
|
map && map.zoomIn();
|
|
}
|
|
|
|
public zoomOut() {
|
|
let map = this.mapService.getMap(this.mapId);
|
|
map && map.zoomOut();
|
|
}
|
|
|
|
public updateDisabled() {
|
|
let map = this.mapService.getMap(this.mapId);
|
|
// let className = 'leaflet-disabled';
|
|
|
|
// this._inputPlus.nativeElement.disabled = false;
|
|
this._inputPlus.setAttribute('aria-disabled', 'false');
|
|
|
|
// this._inpuMinus.nativeElement.disabled = false;
|
|
this._inpuMinus.setAttribute('aria-disabled', 'false');
|
|
|
|
if (map.getZoom() === map.getMinZoom()) {
|
|
// this._inpuMinus.nativeElement.disabled = true;
|
|
this._inpuMinus.setAttribute('aria-disabled', 'true');
|
|
}
|
|
if (map.getZoom() === map.getMaxZoom()) {
|
|
// this._inputPlus.nativeElement.disabled = true;
|
|
this._inputPlus.setAttribute('aria-disabled', 'true');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="css">
|
|
.gba-control-zoom {
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 10px;
|
|
z-index: 500;
|
|
}
|
|
|
|
.btn-group-vertical button {
|
|
display: block;
|
|
|
|
margin-left: 0;
|
|
margin-top: 0.5em;
|
|
}
|
|
</style>
|