Mercurial > gemma

annotate client/src/components/KeyboardHandler.vue @ 3553:869505c5087b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: fairway profile: close compare view with ESC key also added a notice at the top of the screen that indicates when ESC key can be used to either cancel drawing (line, polygon, crosscut) or to close the compare split view for two sounding results
author Markus Kottlaender <markus@intevation.de>
date Fri, 31 May 2019 14:32:24 +0200
parents
children 0fa20662ca66
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">
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
4 <span>{{ noticeText }}</span>
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
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
9 <style lang="sass" scoped>
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
10 .notice
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
11 position: absolute
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
12 top: 0
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
13 width: 100%
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
14 text-align: center
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
15 z-index: 1
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
16 font-size: 11px
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
17 line-height: 11px
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
18 > span
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
19 opacity: 0.5
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
20 background: white
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
21 display: inline-block
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
22 border-bottom-right-radius: 0.25rem
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
23 border-bottom-left-radius: 0.25rem
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
24 padding: 3px 5px
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
25 </style>
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
26
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
27 <script>
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
28 /* 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
29 * 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
30 *
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
31 * 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
32 * 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
33 *
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
34 * Copyright (C) 2018 by via donau
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
35 * – Österreichische Wasserstraßen-Gesellschaft mbH
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
36 * Software engineering by Intevation GmbH
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
37 *
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
38 * Author(s):
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
39 * 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
40 */
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
41
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
42 import { mapState } from "vuex";
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 export default {
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
45 computed: {
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
46 ...mapState("application", ["paneSetup"]),
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
47 ...mapState("map", [
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
48 "openLayersMaps",
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
49 "lineToolEnabled",
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
50 "polygonToolEnabled",
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
51 "cutToolEnabled"
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
52 ]),
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 showNotice() {
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
54 return (
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
55 this.lineToolEnabled ||
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
56 this.polygonToolEnabled ||
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 this.cutToolEnabled ||
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 this.paneSetup.includes("COMPARESURVEYS")
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 );
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 },
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 noticeText() {
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 if (
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 this.lineToolEnabled ||
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 this.polygonToolEnabled ||
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 this.cutToolEnabled
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 ) {
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 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
68 } else if (this.paneSetup.includes("COMPARESURVEYS")) {
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 close compare view.");
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 }
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 }
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 mounted() {
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74 window.addEventListener("keydown", e => {
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
75 // Escape
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
76 if (e.keyCode === 27) {
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
77 if (
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
78 this.lineToolEnabled ||
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
79 this.polygonToolEnabled ||
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
80 this.cutToolEnabled
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
81 ) {
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
82 this.$store.commit("map/lineToolEnabled", false);
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
83 this.$store.commit("map/polygonToolEnabled", false);
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
84 this.$store.commit("map/cutToolEnabled", false);
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
85 this.$store.commit("map/setCurrentMeasurement", null);
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
86 this.openLayersMaps.forEach(m => {
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
87 m.getLayer("DRAWTOOL")
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
88 .getSource()
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
89 .clear();
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
90 });
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
91 } else if (this.paneSetup.includes("COMPARESURVEYS")) {
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
92 this.$store.commit("fairwayprofile/additionalSurvey", null);
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
93 }
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
94 }
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
95 });
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
96 }
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
97 };
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
98 </script>