diff --git a/front/package.json b/front/package.json index 55e773fba7b52c6d61655d4e1e80c71349203457..7cec50319a142649dedfb00645418b195c9bf339 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 0ce16a75f94a6b597a2ea0e3d120c336533232c7..68927a37b09a5e302a9dfb7ce9be44b9e7750b96 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 92ea9d0a48297ac1be4f65a894c584fd801e6282..72b7d7ef96ab78c72b933dca150d7e8eef4ecd02 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 0000000000000000000000000000000000000000..2905e3a7d337dddc3b66ecc528e0d4f9c607dd9f --- /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>