Arno Kaimbacher
cd66f318b6
- add NotificationToast for messages - add leaflet map component and zoom control component - change focus:ring to focus:ring-2 inside BaseButton - `@tailwindcss/line-clamp` plugin is now included by default...remove it from tailwind.config.js - npm updates
107 lines
3.2 KiB
Vue
107 lines
3.2 KiB
Vue
<template>
|
|
<div class="gba-control-zoom btn-group-vertical">
|
|
<!-- <button ref="inputPlus" type="button" class="button is-light is-small" :click.prevent="zoomIn">
|
|
<fa-icon [icon]="faPlus"></fa-icon>
|
|
</button> -->
|
|
<!-- <BaseButton ref="inputPlus" :icon="mdiPlus" color="white" rounded small @click.prevent="zoomIn" /> -->
|
|
<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';
|
|
|
|
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();
|
|
|
|
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>
|