Arrow and swipe navigation for popovers

package.json

@@ -20,6 +20,7 @@
     "vue-click-outside": "^1.0.7",
     "vue-resource": "^1.5.1",
     "vue-router": "^3.0.2",
+    "vue2-touch-events": "^1.1.2",
     "vuex": "^3.0.1"
   },
   "devDependencies": {

src/components/Popover.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="popover" @click="close">
+    <div class="popover" @click="close" v-touch:swipe.left="backwards" v-touch:swipe.right="forwards">
       <div class="image-container">
         <img :src="image.url" />
       </div>
@@ -26,6 +26,9 @@ export default {
       required: true,
     }
   },
+  created() {
+    window.addEventListener('keyup', this.arrowNavigation)
+  },
   methods: {
     forwards() {
       eventHub.$emit('iteratePopoverImage', 1)
@@ -33,8 +36,18 @@ export default {
     backwards() {
       eventHub.$emit('iteratePopoverImage', -1)
     },
+    arrowNavigation(event) {
+      if (event.key === 'ArrowLeft') {
+        this.backwards()
+      } else if (event.key === 'ArrowRight') {
+        this.forwards()
+      }
+    },
     close() {
       eventHub.$emit('closePopover')
+    },
+    beforeDestroy() {
+      window.removeEventListener('keyup')
     }
   }
 }

src/main.js

@@ -5,10 +5,12 @@ import App from './App'
 import router from './routes'
 import axios from 'axios'
 import BootstrapVue from 'bootstrap-vue'
+import Vue2TouchEvents from 'vue2-touch-events'
  
 Vue.config.productionTip = false
 
 window.eventHub = new Vue();
+Vue.use(Vue2TouchEvents)
 
 new Vue({
   el: '#app',

yarn.lock

@@ -6288,6 +6288,11 @@ vue2-collapse@^1.0.15:
   version "1.0.15"
   resolved "https://registry.yarnpkg.com/vue2-collapse/-/vue2-collapse-1.0.15.tgz#d80c242f7ba2f5c70515e00dfcfc298f5137cbea"
 
+vue2-touch-events@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/vue2-touch-events/-/vue2-touch-events-1.1.2.tgz#e900eb22ae067c3915976e1d38454be08cec0a7d"
+  integrity sha512-xY5y76R9Rrhjs1ezrJE+GPI5C38JGj1Bz2aB2KAF+COwdVuW9ghaLj77JjOapVUXqqBL36ZObsZ68LD3DZzjmA==
+
 vue@^2.5.2:
   version "2.5.17"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.17.tgz#0f8789ad718be68ca1872629832ed533589c6ada"