Mercurial > gemma

annotate client/src/components/map/Zoom.vue @ 1279:60e15c2d26a2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
licensing info updated
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 22 Nov 2018 09:50:13 +0100
parents bc55ffaeb639
children 2738a6ae9ad8
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>
1279
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
2 <div
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
3 class="d-flex buttoncontainer shadow-xs mb-3 position-absolute"
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
4 :style="showSplitscreen ? 'margin-bottom: 51vh !important' : ''"
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
5 >
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
6 <button
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
7 class="zoomButton border-0 bg-white rounded-left ui-element border-right"
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
8 @click="zoomIn"
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
9 >
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
10 <i class="fa fa-plus"></i>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
11 </button>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
12 <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
13 <i class="fa fa-minus"></i>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
14 </button>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
15 </div>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
16 </template>
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 <style lang="sass" scoped>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
19 .buttoncontainer
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
20 bottom: 0
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
21 left: 50%
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
22 margin-left: -$icon-width
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
23
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
24 .zoomButton
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
25 min-height: $icon-width
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
26 min-width: $icon-width
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
27 z-index: 2
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
28 outline: none
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
29 color: #666
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
30 </style>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
31 <script>
1279
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
32 /* This is Free Software under GNU Affero General Public License v >= 3.0
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
33 * without warranty, see README.md and license for details.
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
34 *
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
35 * SPDX-License-Identifier: AGPL-3.0-or-later
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
36 * License-Filename: LICENSES/AGPL-3.0.txt
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
37 *
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
38 * Copyright (C) 2018 by via donau
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
39 * – Österreichische Wasserstraßen-Gesellschaft mbH
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
40 * Software engineering by Intevation GmbH
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
41 *
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
42 * Author(s):
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
43 * Thomas Junk <thomas.junk@intevation.de>
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
44 */
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
45 import { mapState } from "vuex";
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
46
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
47 export default {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
48 name: "zoom",
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
49 computed: {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
50 ...mapState("map", ["openLayersMap"]),
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
51 ...mapState("application", ["showSplitscreen"]),
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
52 zoomLevel: {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 get() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
54 return this.openLayersMap.getView().getZoom();
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
55 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
56 set(value) {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 this.openLayersMap.getView().animate({ zoom: value, duration: 300 });
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 methods: {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 zoomIn() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 this.zoomLevel = this.zoomLevel + 1;
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 zoomOut() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 this.zoomLevel = this.zoomLevel - 1;
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69 };
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 </script>