From 37383a53b2dee663db02281dbb48ca977da94191 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Tue, 12 Dec 2017 22:15:50 +0100
Subject: [PATCH] Ensure shortcuts don't collide in inputs
---
front/package.json | 1 -
front/src/components/Sidebar.vue | 2 +-
front/src/components/audio/Player.vue | 2 +-
front/src/components/utils/global-events.vue | 52 ++++++++++++++++++++
4 files changed, 54 insertions(+), 3 deletions(-)
create mode 100644 front/src/components/utils/global-events.vue
diff --git a/front/package.json b/front/package.json
index 55e773fba7..7cec50319a 100644
--- a/front/package.json
+++ b/front/package.json
@@ -18,7 +18,6 @@
"js-logger": "^1.3.0",
"semantic-ui-css": "^2.2.10",
"vue": "^2.3.3",
- "vue-global-events": "^1.0.2",
"vue-resource": "^1.3.4",
"vue-router": "^2.3.1",
"vuedraggable": "^2.14.1"
diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index 0ce16a75f9..68927a37b0 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -94,7 +94,7 @@
</template>
<script>
-import GlobalEvents from 'vue-global-events'
+import GlobalEvents from '@/components/utils/global-events'
import Player from '@/components/audio/Player'
import favoriteTracks from '@/favorites/tracks'
diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue
index 92ea9d0a48..72b7d7ef96 100644
--- a/front/src/components/audio/Player.vue
+++ b/front/src/components/audio/Player.vue
@@ -68,7 +68,7 @@
</template>
<script>
-import GlobalEvents from 'vue-global-events'
+import GlobalEvents from '@/components/utils/global-events'
import queue from '@/audio/queue'
import Track from '@/audio/track'
diff --git a/front/src/components/utils/global-events.vue b/front/src/components/utils/global-events.vue
new file mode 100644
index 0000000000..2905e3a7d3
--- /dev/null
+++ b/front/src/components/utils/global-events.vue
@@ -0,0 +1,52 @@
+<script>
+import $ from 'jquery'
+
+const modifiersRE = /^[~!&]*/
+const nonEventNameCharsRE = /\W+/
+const names = {
+ '!': 'capture',
+ '~': 'once',
+ '&': 'passive'
+}
+
+function extractEventOptions (eventDescriptor) {
+ const [modifiers] = eventDescriptor.match(modifiersRE)
+ return modifiers.split('').reduce((options, modifier) => {
+ options[names[modifier]] = true
+ return options
+ }, {})
+}
+
+export default {
+ render: h => h(),
+
+ mounted () {
+ this._listeners = Object.create(null)
+ Object.keys(this.$listeners).forEach(event => {
+ const handler = this.$listeners[event]
+ let wrapper = function (event) {
+ // we check here the event is not triggered from an input
+ // to avoid collisions
+ if (!$(event.target).is(':input, [contenteditable]')) {
+ handler(event)
+ }
+ }
+ document.addEventListener(
+ event.replace(nonEventNameCharsRE, ''),
+ wrapper,
+ extractEventOptions(event)
+ )
+ this._listeners[event] = handler
+ })
+ },
+
+ beforeDestroy () {
+ for (const event in this._listeners) {
+ document.removeEventListener(
+ event.replace(nonEventNameCharsRE, ''),
+ this._listeners[event]
+ )
+ }
+ }
+}
+</script>
--
GitLab