Mercurial > gemma

annotate client/src/components/map/Zoom.vue @ 1272:bc55ffaeb639

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
cleaned up client/src directory better organization of files and directories, better naming, separation of admin and map context
author Markus Kottlaender <markus@intevation.de>
date Thu, 22 Nov 2018 07:07:12 +0100
parents
children 60e15c2d26a2
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1 <template>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
2 <div class="d-flex buttoncontainer shadow-xs mb-3 position-absolute" :style="showSplitscreen ? 'margin-bottom: 51vh !important' : ''">
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
3 <button class="zoomButton border-0 bg-white rounded-left ui-element border-right" @click="zoomIn">
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
4 <i class="fa fa-plus"></i>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
5 </button>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
6 <button class="zoomButton border-0 bg-white rounded-right ui-element" @click="zoomOut">
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
7 <i class="fa fa-minus"></i>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
8 </button>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
9 </div>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
10 </template>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
11
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
12 <style lang="sass" scoped>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
13 .buttoncontainer
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
14 bottom: 0
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
15 left: 50%
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
16 margin-left: -$icon-width
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
17
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
18 .zoomButton
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
19 min-height: $icon-width
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
20 min-width: $icon-width
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
21 z-index: 2
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
22 outline: none
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
23 color: #666
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
24 </style>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
25 <script>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
26 import { mapState } from "vuex";
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
27
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
28 export default {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
29 name: "zoom",
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
30 computed: {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
31 ...mapState("map", ["openLayersMap"]),
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32 ...mapState("application", ["showSplitscreen"]),
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33 zoomLevel: {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
34 get() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
35 return this.openLayersMap.getView().getZoom();
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
36 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
37 set(value) {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
38 this.openLayersMap.getView().animate({ zoom: value, duration: 300 });
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
39 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
40 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
41 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
42 methods: {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
43 zoomIn() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
44 this.zoomLevel = this.zoomLevel + 1;
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
45 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
46 zoomOut() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
47 this.zoomLevel = this.zoomLevel - 1;
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
48 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
49 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
50 };
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
51 </script>