Scale swipe threshold with viewport width

This commit is contained in:
Tusooa Zhu 2021-08-02 21:19:04 -04:00
parent cb19db1006
commit 6980e4ddf1
No known key found for this signature in database
GPG key ID: 7B467EDE43A08224
3 changed files with 14 additions and 8 deletions

View file

@ -33,7 +33,10 @@ const MediaModal = {
return {
loading: false,
swipeDirection: GestureService.DIRECTION_LEFT,
swipeThreshold: 50,
swipeThreshold: () => {
const considerableMoveRatio = 1 / 4
return window.innerWidth * considerableMoveRatio
},
pinchZoomMinScale: 1,
pinchZoomScaleResetLimit: 1.2
}
@ -104,7 +107,7 @@ const MediaModal = {
this.$refs.pinchZoom.setTransform({ scale: 1, x: 0, y: 0 })
if (sign > 0) {
this.goNext()
} else {
} else if (sign < 0) {
this.goPrev()
}
},

View file

@ -31,8 +31,8 @@ const SwipeClick = {
type: Array
},
threshold: {
type: Number,
default: 30
type: Function,
default: () => 30
},
perpendicularTolerance: {
type: Number,

View file

@ -25,8 +25,8 @@ const project = (v1, v2) => {
return [scalar * v2[0], scalar * v2[1]]
}
const debug = console.log
// const debug = () => {}
// const debug = console.log
const debug = () => {}
// direction: either use the constants above or an arbitrary 2d vector.
// threshold: how many Px to move from touch origin before checking if the
@ -92,7 +92,7 @@ class SwipeAndClickGesture {
this.swipeEndCallback = swipeEndCallback || nop
this.swipeCancelCallback = swipeCancelCallback || nop
this.swipelessClickCallback = swipelessClickCallback || nop
this.threshold = threshold
this.threshold = typeof threshold === 'function' ? threshold : () => threshold
this.perpendicularTolerance = perpendicularTolerance
this._reset()
}
@ -162,7 +162,10 @@ class SwipeAndClickGesture {
const delta = deltaCoord(this._startPos, coord)
const sign = (() => {
if (vectorLength(delta) < this.threshold) {
debug(
'threshold = ', this.threshold(),
'vector len =', vectorLength(delta))
if (vectorLength(delta) < this.threshold()) {
return 0
}
// movement is opposite from direction