Lightbox/modal multi image improvements - #381

src/components/media_modal/media_modal.js

@@ -2,6 +2,7 @@ import StillImage from '../still-image/still-image.vue'
 import VideoAttachment from '../video_attachment/video_attachment.vue'
 import Modal from '../modal/modal.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
+import GestureService from '../../services/gesture_service/gesture_service'
 
 const MediaModal = {
   components: {
@@ -29,7 +30,27 @@ const MediaModal = {
       return this.currentMedia ? fileTypeService.fileType(this.currentMedia.mimetype) : null
     }
   },
+  created () {
+    this.mediaSwipeGestureRight = GestureService.swipeGesture(
+      GestureService.DIRECTION_RIGHT,
+      this.goPrev,
+      50
+    )
+    this.mediaSwipeGestureLeft = GestureService.swipeGesture(
+      GestureService.DIRECTION_LEFT,
+      this.goNext,
+      50
+    )
+  },
   methods: {
+    mediaTouchStart (e) {
+      GestureService.beginSwipe(e, this.mediaSwipeGestureRight)
+      GestureService.beginSwipe(e, this.mediaSwipeGestureLeft)
+    },
+    mediaTouchMove (e) {
+      GestureService.updateSwipe(e, this.mediaSwipeGestureRight)
+      GestureService.updateSwipe(e, this.mediaSwipeGestureLeft)
+    },
     hide () {
       this.$store.dispatch('closeMediaViewer')
     },

src/components/media_modal/media_modal.vue

@@ -8,6 +8,8 @@
       v-if="type === 'image'"
       class="modal-image"
       :src="currentMedia.url"
+      @touchstart.stop="mediaTouchStart"
+      @touchmove.stop="mediaTouchMove"
     >
     <VideoAttachment
       v-if="type === 'video'"
@@ -41,18 +43,16 @@
 .modal-view.media-modal-view {
   z-index: 1001;
 
-  &:hover {
-    .modal-view-button-arrow {
-      opacity: 0.75;
+  .modal-view-button-arrow {
+    opacity: 0.75;
 
-      &:focus,
-      &:hover {
-        outline: none;
-        box-shadow: none;
-      }
-      &:hover {
-        opacity: 1;
-      }
+    &:focus,
+    &:hover {
+      outline: none;
+      box-shadow: none;
+    }
+    &:hover {
+      opacity: 1;
     }
   }
 }