Commit 85dd121e authored by Edijs Bov's avatar Edijs Bov

Improve swipe gallery image on mobile

parent a0588e5a
Pipeline #8295 passed with stages
in 3 minutes and 23 seconds
......@@ -61,15 +61,22 @@ const MediaModal = {
this.goPrev()
}
},
handleDragStart (e) {
this.mouseDragStart = e.changedTouches[0].clientX
handleTouchStart (e) {
this.touchStartX = e.changedTouches[0].clientX
this.touchStartY = e.changedTouches[0].clientY
},
handleDragEnd (e) {
// Go to next/prev media if drag movement is more than 30px
if (this.mouseDragStart - e.changedTouches[0].clientX > 30) {
handleTouchEnd (e) {
const deltaY = Math.abs(this.touchStartY - e.changedTouches[0].clientY)
const deltaX = this.touchStartX - e.changedTouches[0].clientX
// Ignore if vertical movement is more than horizontal
if (Math.abs(deltaX) < deltaY) return
// Go to next/prev media if horizontal movement is more than 30px
if (deltaX > 30) {
this.goNext()
}
if (this.mouseDragStart - e.changedTouches[0].clientX < -30) {
if (deltaX < -30) {
this.goPrev()
}
},
......
......@@ -3,8 +3,9 @@
<div
:draggable="canNavigate && draggable"
class="modal-image"
v-on:touchstart="handleDragStart"
v-on:touchend="handleDragEnd"
v-on:touchstart="handleTouchStart"
v-on:touchmove.prevent=""
v-on:touchend="handleTouchEnd"
>
<img v-if="type === 'image'" :src="currentMedia.url"/>
<VideoAttachment
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment