Mercurial > gemma
annotate client/src/components/map/Zoom.vue @ 3923:50a0b6d3b032
client: hydrological cond diagram: removed updated hook to prevent unintended re-drawing of diagram
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 11 Jul 2019 16:18:25 +0200 |
parents | 85734c763652 |
children | 8f421cd3c746 |
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> |