Mercurial > gemma

annotate client/src/components/KeyboardHandler.vue @ 5629:84d01a536bec 729-node-js-newer-version

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Transformed scss and sass styles into css
author Luisa Beerboom <lbeerboom@intevation.de>
date Thu, 11 May 2023 13:23:52 +0200
parents 2ad3a29e0e14
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
3553
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1 <template>
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
2 <transition name="fade">
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
3 <div class="notice" v-if="showNotice">
5455
2ad3a29e0e14 Merged default into uiimprovements branch.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5442
diff changeset
4 <span @click="stopOperation">{{ noticeText }}</span>
3553
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
5 </div>
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
6 </transition>
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
7 </template>
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
8
5629
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5455
diff changeset
9 <style scoped>
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5455
diff changeset
10 .notice {
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5455
diff changeset
11 position: absolute;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5455
diff changeset
12 top: 0;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5455
diff changeset
13 width: 100%;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5455
diff changeset
14 text-align: center;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5455
diff changeset
15 z-index: 1;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5455
diff changeset
16 font-size: 11px;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5455
diff changeset
17 line-height: 11px;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5455
diff changeset
18 }
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5455
diff changeset
19 .notice > span {
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5455
diff changeset
20 opacity: 0.5;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5455
diff changeset
21 background: white;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5455
diff changeset
22 display: inline-block;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5455
diff changeset
23 border-bottom-right-radius: 0.25rem;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5455
diff changeset
24 border-bottom-left-radius: 0.25rem;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5455
diff changeset
25 padding: 3px 5px;
84d01a536bec Transformed scss and sass styles into css
Luisa Beerboom <lbeerboom@intevation.de>
parents: 5455
diff changeset
26 }
3553
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
27 </style>
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
28
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
29 <script>
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
30 /* This is Free Software under GNU Affero General Public License v >= 3.0
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
31 * without warranty, see README.md and license for details.
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32 *
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33 * SPDX-License-Identifier: AGPL-3.0-or-later
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
34 * License-Filename: LICENSES/AGPL-3.0.txt
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
35 *
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
36 * Copyright (C) 2018 by via donau
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
37 * – Österreichische Wasserstraßen-Gesellschaft mbH
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
38 * Software engineering by Intevation GmbH
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
39 *
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
40 * Author(s):
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
41 * Markus Kottländer <markus.kottlaender@intevation.de>
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
42 */
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
43
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
44 import { mapState } from "vuex";
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
45
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
46 export default {
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
47 computed: {
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
48 ...mapState("application", ["paneSetup"]),
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
49 ...mapState("map", [
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
50 "openLayersMaps",
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
51 "lineToolEnabled",
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
52 "polygonToolEnabled",
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 "cutToolEnabled"
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
54 ]),
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
55 showNotice() {
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
56 return (
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 this.lineToolEnabled ||
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 this.polygonToolEnabled ||
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 this.cutToolEnabled ||
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 this.paneSetup.includes("COMPARESURVEYS")
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 );
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 },
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 noticeText() {
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 if (
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 this.lineToolEnabled ||
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 this.polygonToolEnabled ||
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 this.cutToolEnabled
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68 ) {
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69 return this.$gettext("Press ESC to stop drawing.");
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 } else if (this.paneSetup.includes("COMPARESURVEYS")) {
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 return this.$gettext("Press ESC to close compare view.");
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
72 }
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
73 }
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74 },
5455
2ad3a29e0e14 Merged default into uiimprovements branch.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5442
diff changeset
75 methods: {
2ad3a29e0e14 Merged default into uiimprovements branch.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5442
diff changeset
76 closeCompareView() {
2ad3a29e0e14 Merged default into uiimprovements branch.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5442
diff changeset
77 this.$store.commit("fairwayprofile/additionalSurvey", null);
2ad3a29e0e14 Merged default into uiimprovements branch.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5442
diff changeset
78 },
2ad3a29e0e14 Merged default into uiimprovements branch.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5442
diff changeset
79 stopDrawing() {
2ad3a29e0e14 Merged default into uiimprovements branch.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5442
diff changeset
80 this.$store.commit("map/lineToolEnabled", false);
2ad3a29e0e14 Merged default into uiimprovements branch.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5442
diff changeset
81 this.$store.commit("map/polygonToolEnabled", false);
2ad3a29e0e14 Merged default into uiimprovements branch.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5442
diff changeset
82 this.$store.commit("map/cutToolEnabled", false);
2ad3a29e0e14 Merged default into uiimprovements branch.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5442
diff changeset
83 this.$store.commit("map/setCurrentMeasurement", null);
2ad3a29e0e14 Merged default into uiimprovements branch.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5442
diff changeset
84 this.openLayersMaps.forEach(m => {
2ad3a29e0e14 Merged default into uiimprovements branch.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5442
diff changeset
85 m.getLayer("DRAWTOOL")
2ad3a29e0e14 Merged default into uiimprovements branch.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5442
diff changeset
86 .getSource()
2ad3a29e0e14 Merged default into uiimprovements branch.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5442
diff changeset
87 .clear();
2ad3a29e0e14 Merged default into uiimprovements branch.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5442
diff changeset
88 });
2ad3a29e0e14 Merged default into uiimprovements branch.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5442
diff changeset
89 },
2ad3a29e0e14 Merged default into uiimprovements branch.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5442
diff changeset
90 stopOperation() {
2ad3a29e0e14 Merged default into uiimprovements branch.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5442
diff changeset
91 if (
2ad3a29e0e14 Merged default into uiimprovements branch.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5442
diff changeset
92 this.lineToolEnabled ||
2ad3a29e0e14 Merged default into uiimprovements branch.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5442
diff changeset
93 this.polygonToolEnabled ||
2ad3a29e0e14 Merged default into uiimprovements branch.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5442
diff changeset
94 this.cutToolEnabled
2ad3a29e0e14 Merged default into uiimprovements branch.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5442
diff changeset
95 ) {
2ad3a29e0e14 Merged default into uiimprovements branch.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5442
diff changeset
96 this.stopDrawing();
2ad3a29e0e14 Merged default into uiimprovements branch.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5442
diff changeset
97 } else if (this.paneSetup.includes("COMPARESURVEYS")) {
2ad3a29e0e14 Merged default into uiimprovements branch.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5442
diff changeset
98 this.closeCompareView();
2ad3a29e0e14 Merged default into uiimprovements branch.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5442
diff changeset
99 }
2ad3a29e0e14 Merged default into uiimprovements branch.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5442
diff changeset
100 }
2ad3a29e0e14 Merged default into uiimprovements branch.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5442
diff changeset
101 },
3553
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
102 mounted() {
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
103 window.addEventListener("keydown", e => {
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
104 // Escape
5455
2ad3a29e0e14 Merged default into uiimprovements branch.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5442
diff changeset
105 if (e.key === "Esc" || e.key === "Escape") this.stopOperation();
3553
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
106 });
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
107 }
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
108 };
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
109 </script>