Mercurial > gemma

annotate client/src/components/map/Zoom.vue @ 5679:03dfbe675842 sr-v2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Simplified version handling.
author Sascha L. Teichmann <sascha.teichmann@intevation.de>
date Sun, 11 Feb 2024 12:37:09 +0100
parents 84d01a536bec
children
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>
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>