Mercurial > gemma
annotate client/src/components/map/Zoom.vue @ 5736:55892008ec96 default tip
Fixed a bunch of corner cases in WG import.
author | Sascha Wilde <wilde@sha-bang.de> |
---|---|
date | Wed, 29 May 2024 19:02:42 +0200 |
parents | 84d01a536bec |
children |
rev | line source |
---|---|
3166
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
1 <template> |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3167
diff
changeset
|
2 <div :class="['zoom-buttons shadow-xs', { move: showTimeSlider }]"> |
3166
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 |
5629
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
18 <style> |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
19 .zoom-buttons { |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
20 position: absolute; |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
21 z-index: 1; |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
22 bottom: var(--small-offset); |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
23 left: 50%; |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
24 margin-left: -var(--icon-width); |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
25 margin-bottom: 0; |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
26 transition: margin-bottom 0.3s; |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
27 } |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
28 .zoom-buttons.move { |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
29 bottom: calc(var(--large-offset) * 1.5); |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
30 } |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
31 .zoom-buttons .zoom-button { |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
32 min-height: var(--icon-width); |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
33 min-width: var(--icon-width); |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
34 z-index: 1; |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
35 outline: none; |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
36 color: #666; |
84d01a536bec
Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents:
5627
diff
changeset
|
37 } |
3166
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
38 </style> |
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 <script> |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3167
diff
changeset
|
41 import { mapState } from "vuex"; |
3166
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
42 /* 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
|
43 * 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
|
44 * |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
45 * SPDX-License-Identifier: AGPL-3.0-or-later |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
46 * License-Filename: LICENSES/AGPL-3.0.txt |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
47 * |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
48 * Copyright (C) 2018 by via donau |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
49 * – Österreichische Wasserstraßen-Gesellschaft mbH |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
50 * Software engineering by Intevation GmbH |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
51 * |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
52 * Author(s): |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
53 * Markus Kottländer <markus@intevation.de> |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
54 * Thomas Junk <thomas.junk@intevation.de> |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
55 */ |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
56 export default { |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
57 props: ["map"], |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
58 computed: { |
5036
8f421cd3c746
client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents:
3167
diff
changeset
|
59 ...mapState("application", ["showTimeSlider"]), |
3166
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
60 zoomLevel: { |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
61 get() { |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
62 return this.map.getView().getZoom(); |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
63 }, |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
64 set(value) { |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
65 this.map.getView().animate({ zoom: value, duration: 300 }); |
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 } |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
68 }, |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
69 methods: { |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
70 zoomIn() { |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
71 this.zoomLevel = this.zoomLevel + 1; |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
72 }, |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
73 zoomOut() { |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
74 this.zoomLevel = this.zoomLevel - 1; |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
75 } |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
76 } |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
77 }; |
286c2e3cc105
client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
78 </script> |