Arno Kaimbacher
005df2e454
Some checks failed
CI Pipeline / japa-tests (push) Failing after 58s
- npm updates - coverage validation: elevation ust be positive, depth must be negative - vinejs-provider.js: get enabled extensions from database, not via validOptions.extnames - vue components for backup codes: e.g.: PersonalSettings.vue - validate spaital coverage in leaflet map: draw.component.vue, map.component.vue - add backup code authentication into Login.vue - preset to use no preferred reviewer: Release.vue - 2 new vinejs validation rules: file_scan.ts and file-length.ts
113 lines
3.1 KiB
Vue
113 lines
3.1 KiB
Vue
<template>
|
|
<div class="gba-control-zoom btn-group-vertical">
|
|
<button
|
|
ref="inputPlus"
|
|
class="disabled:bg-gray-200 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 text-sm p-1"
|
|
type="button"
|
|
@click.stop.prevent="zoomIn"
|
|
>
|
|
<BaseIcon v-if="mdiPlus" :path="mdiPlus" />
|
|
</button>
|
|
|
|
<button
|
|
ref="inputMinus"
|
|
class="disabled:bg-gray-200 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 text-sm p-1"
|
|
type="button"
|
|
@click.stop.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') inputPlus: HTMLButtonElement;
|
|
@Ref('inputMinus') inputMinus: HTMLButtonElement;
|
|
|
|
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.disabled = false;
|
|
this.inputPlus.setAttribute('aria-disabled', 'false');
|
|
|
|
this.inputMinus.disabled = false;
|
|
this.inputMinus.setAttribute('aria-disabled', 'false');
|
|
|
|
if (map.getZoom() === map.getMinZoom()) {
|
|
this.inputMinus.disabled = true;
|
|
this.inputMinus.setAttribute('aria-disabled', 'true');
|
|
}
|
|
if (map.getZoom() === map.getMaxZoom()) {
|
|
this.inputPlus.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: 999;
|
|
}
|
|
|
|
.btn-group-vertical button {
|
|
display: block;
|
|
|
|
margin-left: 0;
|
|
margin-top: 0.5em;
|
|
}
|
|
</style>
|