Prevent hiding media viewer if swiped over SwipeClick

This commit is contained in:
Tusooa Zhu 2022-02-20 22:45:58 -05:00
parent 90b066a744
commit 7dd1a0dd30
No known key found for this signature in database
GPG key ID: 7B467EDE43A08224
3 changed files with 16 additions and 4 deletions

View file

@ -76,6 +76,15 @@ const MediaModal = {
this.$store.dispatch('closeMediaViewer')
}, transitionTime)
},
hideIfNotSwiped (event) {
// If we have swiped over SwipeClick, do not trigger hide
const comp = this.$refs.swipeClick
if (!comp) {
this.hide()
} else {
comp.$gesture.click(event)
}
},
goPrev () {
if (this.canNavigate) {
const prevIndex = this.currentIndex === 0 ? this.media.length - 1 : (this.currentIndex - 1)

View file

@ -2,10 +2,11 @@
<Modal
v-if="showing"
class="media-modal-view"
@backdropClicked="hide"
@backdropClicked="hideIfNotSwiped"
>
<SwipeClick
v-if="type === 'image'"
ref="swipeClick"
class="modal-image-container"
:direction="swipeDirection"
:threshold="swipeThreshold"

View file

@ -81,7 +81,9 @@ class SwipeAndClickGesture {
swipeEndCallback,
swipeCancelCallback,
swipelessClickCallback,
threshold = 30, perpendicularTolerance = 1.0
threshold = 30,
perpendicularTolerance = 1.0,
disableClickThreshold = 1
}) {
const nop = () => {}
this.direction = direction
@ -90,6 +92,7 @@ class SwipeAndClickGesture {
this.swipeCancelCallback = swipeCancelCallback || nop
this.swipelessClickCallback = swipelessClickCallback || nop
this.threshold = typeof threshold === 'function' ? threshold : () => threshold
this.disableClickThreshold = typeof disableClickThreshold === 'function' ? disableClickThreshold : () => disableClickThreshold
this.perpendicularTolerance = perpendicularTolerance
this._reset()
}
@ -169,7 +172,6 @@ class SwipeAndClickGesture {
return isPositive ? 1 : -1
})()
const swiped = this._swiped
if (this._swiped) {
this.swipeEndCallback(sign)
}
@ -178,7 +180,7 @@ class SwipeAndClickGesture {
// the end point is far from the starting point
// so for other kinds of pointers do not check
// whether we have swiped
if (swiped && event.pointerType === 'mouse') {
if (vectorLength(delta) >= this.disableClickThreshold() && event.pointerType === 'mouse') {
this._preventNextClick = true
}
}