Mercurial > gemma

annotate client/src/components/map/Zoom.vue @ 3480:965b2fbb1890

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Colorize gauge symbol based on availability of measurements
author Tom Gottfried <tom@intevation.de>
date Mon, 27 May 2019 15:45:55 +0200
parents 85734c763652
children 8f421cd3c746
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
3166
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1 <template>
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
2 <div class="zoom-buttons shadow-xs">
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
3 <button
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
4 class="zoom-button border-0 bg-white rounded-left ui-element"
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
5 @click="zoomOut"
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
6 >
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
7 <font-awesome-icon icon="minus" />
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
8 </button>
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
9 <button
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
10 class="zoom-button border-0 bg-white rounded-right ui-element border-right"
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
11 @click="zoomIn"
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
12 >
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
13 <font-awesome-icon icon="plus" />
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
14 </button>
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
15 </div>
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
16 </template>
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
17
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
18 <style lang="sass">
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
19 .zoom-buttons
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
20 position: absolute
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
21 z-index: 1
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
22 bottom: $small-offset
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
23 left: 50%
3167
85734c763652 client: layers: moved refresh button from zoom controls to layers dialog
Markus Kottlaender <markus@intevation.de>
parents: 3166
diff changeset
24 margin-left: -$icon-width
3166
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
25 margin-bottom: 0
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
26 transition: margin-bottom 0.3s
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
27
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
28 .zoom-button
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
29 min-height: $icon-width
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
30 min-width: $icon-width
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
31 z-index: 1
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32 outline: none
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33 color: #666
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
34 </style>
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
35
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
36 <script>
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
37 /* This is Free Software under GNU Affero General Public License v >= 3.0
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
38 * without warranty, see README.md and license for details.
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
39 *
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
40 * SPDX-License-Identifier: AGPL-3.0-or-later
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
41 * License-Filename: LICENSES/AGPL-3.0.txt
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
42 *
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
43 * Copyright (C) 2018 by via donau
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
44 * – Österreichische Wasserstraßen-Gesellschaft mbH
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
45 * Software engineering by Intevation GmbH
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
46 *
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
47 * Author(s):
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
48 * Markus Kottländer <markus@intevation.de>
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
49 * Thomas Junk <thomas.junk@intevation.de>
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
50 */
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
51 export default {
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
52 props: ["map"],
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 computed: {
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
54 zoomLevel: {
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
55 get() {
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
56 return this.map.getView().getZoom();
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 },
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 set(value) {
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 this.map.getView().animate({ zoom: value, duration: 300 });
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 }
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 }
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 },
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 methods: {
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 zoomIn() {
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 this.zoomLevel = this.zoomLevel + 1;
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 },
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 zoomOut() {
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68 this.zoomLevel = this.zoomLevel - 1;
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69 }
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 }
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 };
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
72 </script>