Mercurial > gemma
annotate client/src/components/KeyboardHandler.vue @ 3553:869505c5087b
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 |
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> |