forked from srxl/akkoma-fe
Scale swipe threshold with viewport width
This commit is contained in:
parent
cb19db1006
commit
6980e4ddf1
3 changed files with 14 additions and 8 deletions
|
@ -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()
|
||||
}
|
||||
},
|
||||
|
|
|
@ -31,8 +31,8 @@ const SwipeClick = {
|
|||
type: Array
|
||||
},
|
||||
threshold: {
|
||||
type: Number,
|
||||
default: 30
|
||||
type: Function,
|
||||
default: () => 30
|
||||
},
|
||||
perpendicularTolerance: {
|
||||
type: Number,
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue