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 55e773fba..7cec50319 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 0ce16a75f..68927a37b 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 92ea9d0a4..72b7d7ef9 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 000000000..2905e3a7d
--- /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>