Use native click for hiding overlay

The pointerup strategy is unsuccessful, as some other overlays
(Firefox's Inspect Element) will pass down pointerup events.
This commit is contained in:
Tusooa Zhu 2021-08-02 20:32:02 -04:00
parent 839627ffc4
commit 9f3a983fef
No known key found for this signature in database
GPG key ID: 7B467EDE43A08224
2 changed files with 24 additions and 5 deletions

View file

@ -53,8 +53,7 @@ const SwipeClick = {
this.$gesture.cancel(event) this.$gesture.cancel(event)
}, },
handleNativeClick (event) { handleNativeClick (event) {
event.stopPropagation() this.$gesture.click(event)
event.preventDefault()
}, },
preview (offsets) { preview (offsets) {
this.$emit('preview-requested', offsets) this.$emit('preview-requested', offsets)

View file

@ -4,6 +4,8 @@ const DIRECTION_RIGHT = [1, 0]
const DIRECTION_UP = [0, -1] const DIRECTION_UP = [0, -1]
const DIRECTION_DOWN = [0, 1] const DIRECTION_DOWN = [0, 1]
const BUTTON_LEFT = 0
const deltaCoord = (oldCoord, newCoord) => [newCoord[0] - oldCoord[0], newCoord[1] - oldCoord[1]] const deltaCoord = (oldCoord, newCoord) => [newCoord[0] - oldCoord[0], newCoord[1] - oldCoord[1]]
const touchCoord = touch => [touch.screenX, touch.screenY] const touchCoord = touch => [touch.screenX, touch.screenY]
@ -23,8 +25,8 @@ const project = (v1, v2) => {
return [scalar * v2[0], scalar * v2[1]] return [scalar * v2[0], scalar * v2[1]]
} }
// const debug = console.log const debug = console.log
const debug = () => {} // const debug = () => {}
// direction: either use the constants above or an arbitrary 2d vector. // direction: either use the constants above or an arbitrary 2d vector.
// threshold: how many Px to move from touch origin before checking if the // threshold: how many Px to move from touch origin before checking if the
@ -100,11 +102,17 @@ class SwipeAndClickGesture {
this._pointerId = -1 this._pointerId = -1
this._swiping = false this._swiping = false
this._swiped = false this._swiped = false
this._preventNextClick = false
} }
start (event) { start (event) {
debug('start() called', event) debug('start() called', event)
// Only handle left click
if (event.button !== BUTTON_LEFT) {
return
}
this._startPos = pointerEventCoord(event) this._startPos = pointerEventCoord(event)
this._pointerId = event.pointerId this._pointerId = event.pointerId
debug('start pos:', this._startPos) debug('start pos:', this._startPos)
@ -124,6 +132,7 @@ class SwipeAndClickGesture {
} }
cancel (event) { cancel (event) {
debug('cancel called')
if (!this._swiping || this._pointerId !== event.pointerId) { if (!this._swiping || this._pointerId !== event.pointerId) {
return return
} }
@ -146,6 +155,8 @@ class SwipeAndClickGesture {
debug('end: is swipe event') debug('end: is swipe event')
debug('button = ', event.button)
// movement too small // movement too small
const coord = pointerEventCoord(event) const coord = pointerEventCoord(event)
const delta = deltaCoord(this._startPos, coord) const delta = deltaCoord(this._startPos, coord)
@ -171,9 +182,18 @@ class SwipeAndClickGesture {
return isPositive ? 1 : -1 return isPositive ? 1 : -1
})() })()
const swiped = this._swiped
if (this._swiped) { if (this._swiped) {
this.swipeEndCallback(sign) this.swipeEndCallback(sign)
} else { }
this._reset()
if (swiped) {
this._preventNextClick = true
}
}
click (event) {
if (!this._preventNextClick) {
this.swipelessClickCallback() this.swipelessClickCallback()
} }
this._reset() this._reset()