From 1f3c55a20f696359357d6633d03ddd91e3b9307f Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Wed, 13 Feb 2019 18:14:23 +0100
Subject: [PATCH] Arrow and swipe navigation for popovers

---
 package.json               |  1 +
 src/components/Popover.vue | 15 ++++++++++++++-
 src/main.js                |  4 +++-
 yarn.lock                  |  5 +++++
 4 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index f12ea85..b39683d 100644
--- a/package.json
+++ b/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": {
diff --git a/src/components/Popover.vue b/src/components/Popover.vue
index 48bf1e1..7e9f30f 100644
--- a/src/components/Popover.vue
+++ b/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')
     }
   }
 }
diff --git a/src/main.js b/src/main.js
index d76094c..23b6f8b 100644
--- a/src/main.js
+++ b/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',
diff --git a/yarn.lock b/yarn.lock
index e2e515a..46527c4 100644
--- a/yarn.lock
+++ b/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"