Lightbox/modal multi image improvements - #381

This commit is contained in:
Wyatt Benno 2019-11-08 06:16:26 +00:00 committed by Shpuld Shpludson
parent df18ef30d0
commit f66026bf20
2 changed files with 32 additions and 11 deletions

View file

@ -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')
},

View file

@ -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,7 +43,6 @@
.modal-view.media-modal-view {
z-index: 1001;
&:hover {
.modal-view-button-arrow {
opacity: 0.75;
@ -55,7 +56,6 @@
}
}
}
}
.modal-image {
max-width: 90%;