Merge remote-tracking branch 'origin/develop' into expert-settings-and-serverside
* origin/develop: (83 commits) Make media modal buttons larger Add English translation for hide tooltip Add hide button to media modal Lint Prevent hiding media viewer if swiped over SwipeClick Fix webkit image blurs Fix video in media modal not displaying properly Add changelog for https://git.pleroma.social/pleroma/pleroma-fe/-/merge_requests/1403 Remove image box-shadow in media modal Clean up debug code for image pinch zoom Bump @kazvmoe-infra/pinch-zoom-element to 1.2.0 on npm Bump pinch-zoom-element version Clean up Check whether we swiped only for mouse pointer Scale swipe threshold with viewport width Update pinch-zoom-element Allow pinch-zoom to fill the whole screen Use native click for hiding overlay Reset position on swipe end even if we cannot navigate Make lint happy ...
This commit is contained in:
commit
a97db1efd6
32 changed files with 1620 additions and 156 deletions
src/services/gesture_service
|
@ -4,9 +4,15 @@ const DIRECTION_RIGHT = [1, 0]
|
|||
const DIRECTION_UP = [0, -1]
|
||||
const DIRECTION_DOWN = [0, 1]
|
||||
|
||||
const BUTTON_LEFT = 0
|
||||
|
||||
const deltaCoord = (oldCoord, newCoord) => [newCoord[0] - oldCoord[0], newCoord[1] - oldCoord[1]]
|
||||
|
||||
const touchEventCoord = e => ([e.touches[0].screenX, e.touches[0].screenY])
|
||||
const touchCoord = touch => [touch.screenX, touch.screenY]
|
||||
|
||||
const touchEventCoord = e => touchCoord(e.touches[0])
|
||||
|
||||
const pointerEventCoord = e => [e.clientX, e.clientY]
|
||||
|
||||
const vectorLength = v => Math.sqrt(v[0] * v[0] + v[1] * v[1])
|
||||
|
||||
|
@ -61,6 +67,132 @@ const updateSwipe = (event, gesture) => {
|
|||
gesture._swiping = false
|
||||
}
|
||||
|
||||
class SwipeAndClickGesture {
|
||||
// swipePreviewCallback(offsets: Array[Number])
|
||||
// offsets: the offset vector which the underlying component should move, from the starting position
|
||||
// swipeEndCallback(sign: 0|-1|1)
|
||||
// sign: if the swipe does not meet the threshold, 0
|
||||
// if the swipe meets the threshold in the positive direction, 1
|
||||
// if the swipe meets the threshold in the negative direction, -1
|
||||
constructor ({
|
||||
direction,
|
||||
// swipeStartCallback
|
||||
swipePreviewCallback,
|
||||
swipeEndCallback,
|
||||
swipeCancelCallback,
|
||||
swipelessClickCallback,
|
||||
threshold = 30,
|
||||
perpendicularTolerance = 1.0,
|
||||
disableClickThreshold = 1
|
||||
}) {
|
||||
const nop = () => {}
|
||||
this.direction = direction
|
||||
this.swipePreviewCallback = swipePreviewCallback || nop
|
||||
this.swipeEndCallback = swipeEndCallback || nop
|
||||
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()
|
||||
}
|
||||
|
||||
_reset () {
|
||||
this._startPos = [0, 0]
|
||||
this._pointerId = -1
|
||||
this._swiping = false
|
||||
this._swiped = false
|
||||
this._preventNextClick = false
|
||||
}
|
||||
|
||||
start (event) {
|
||||
// Only handle left click
|
||||
if (event.button !== BUTTON_LEFT) {
|
||||
return
|
||||
}
|
||||
|
||||
this._startPos = pointerEventCoord(event)
|
||||
this._pointerId = event.pointerId
|
||||
this._swiping = true
|
||||
this._swiped = false
|
||||
}
|
||||
|
||||
move (event) {
|
||||
if (this._swiping && this._pointerId === event.pointerId) {
|
||||
this._swiped = true
|
||||
|
||||
const coord = pointerEventCoord(event)
|
||||
const delta = deltaCoord(this._startPos, coord)
|
||||
|
||||
this.swipePreviewCallback(delta)
|
||||
}
|
||||
}
|
||||
|
||||
cancel (event) {
|
||||
if (!this._swiping || this._pointerId !== event.pointerId) {
|
||||
return
|
||||
}
|
||||
|
||||
this.swipeCancelCallback()
|
||||
}
|
||||
|
||||
end (event) {
|
||||
if (!this._swiping) {
|
||||
return
|
||||
}
|
||||
|
||||
if (this._pointerId !== event.pointerId) {
|
||||
return
|
||||
}
|
||||
|
||||
this._swiping = false
|
||||
|
||||
// movement too small
|
||||
const coord = pointerEventCoord(event)
|
||||
const delta = deltaCoord(this._startPos, coord)
|
||||
|
||||
const sign = (() => {
|
||||
if (vectorLength(delta) < this.threshold()) {
|
||||
return 0
|
||||
}
|
||||
// movement is opposite from direction
|
||||
const isPositive = dotProduct(delta, this.direction) > 0
|
||||
|
||||
// movement perpendicular to direction is too much
|
||||
const towardsDir = project(delta, this.direction)
|
||||
const perpendicularDir = perpendicular(this.direction)
|
||||
const towardsPerpendicular = project(delta, perpendicularDir)
|
||||
if (
|
||||
vectorLength(towardsDir) * this.perpendicularTolerance <
|
||||
vectorLength(towardsPerpendicular)
|
||||
) {
|
||||
return 0
|
||||
}
|
||||
|
||||
return isPositive ? 1 : -1
|
||||
})()
|
||||
|
||||
if (this._swiped) {
|
||||
this.swipeEndCallback(sign)
|
||||
}
|
||||
this._reset()
|
||||
// Only a mouse will fire click event when
|
||||
// the end point is far from the starting point
|
||||
// so for other kinds of pointers do not check
|
||||
// whether we have swiped
|
||||
if (vectorLength(delta) >= this.disableClickThreshold() && event.pointerType === 'mouse') {
|
||||
this._preventNextClick = true
|
||||
}
|
||||
}
|
||||
|
||||
click (event) {
|
||||
if (!this._preventNextClick) {
|
||||
this.swipelessClickCallback()
|
||||
}
|
||||
this._reset()
|
||||
}
|
||||
}
|
||||
|
||||
const GestureService = {
|
||||
DIRECTION_LEFT,
|
||||
DIRECTION_RIGHT,
|
||||
|
@ -68,7 +200,8 @@ const GestureService = {
|
|||
DIRECTION_DOWN,
|
||||
swipeGesture,
|
||||
beginSwipe,
|
||||
updateSwipe
|
||||
updateSwipe,
|
||||
SwipeAndClickGesture
|
||||
}
|
||||
|
||||
export default GestureService
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue