From cd877e7514866886e8f834593e1c558374161398 Mon Sep 17 00:00:00 2001 From: Sam Therapy Date: Tue, 1 Mar 2022 14:04:36 -0600 Subject: [PATCH] Revert old scroll & pan Signed-off-by: Sam Therapy --- package.json | 1 - src/components/media_modal/media_modal.js | 55 ++----- src/components/media_modal/media_modal.vue | 85 ++++------ src/components/pinch_zoom/pinch_zoom.js | 13 -- src/components/pinch_zoom/pinch_zoom.vue | 11 -- src/components/swipe_click/swipe_click.js | 84 ---------- src/components/swipe_click/swipe_click.vue | 14 -- src/main.js | 2 - .../gesture_service/gesture_service.js | 151 +----------------- yarn.lock | 12 -- 10 files changed, 48 insertions(+), 380 deletions(-) delete mode 100644 src/components/pinch_zoom/pinch_zoom.js delete mode 100644 src/components/pinch_zoom/pinch_zoom.vue delete mode 100644 src/components/swipe_click/swipe_click.js delete mode 100644 src/components/swipe_click/swipe_click.vue diff --git a/package.json b/package.json index d25c915d..50a07028 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,6 @@ "@fortawesome/free-regular-svg-icons": "^5.15.1", "@fortawesome/free-solid-svg-icons": "^5.15.1", "@fortawesome/vue-fontawesome": "^2.0.0", - "@kazvmoe-infra/pinch-zoom-element": "^1.2.0", "body-scroll-lock": "^2.6.4", "chromatism": "^3.0.0", "cropperjs": "^1.4.3", diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js index 15cd3964..b3b4928d 100644 --- a/src/components/media_modal/media_modal.js +++ b/src/components/media_modal/media_modal.js @@ -1,10 +1,8 @@ import StillImage from '../still-image/still-image.vue' import VideoAttachment from '../video_attachment/video_attachment.vue' import Modal from '../modal/modal.vue' -import PinchZoom from '../pinch_zoom/pinch_zoom.vue' -import SwipeClick from '../swipe_click/swipe_click.vue' -import GestureService from '../../services/gesture_service/gesture_service' import fileTypeService from '../../services/file_type/file_type.service.js' +import GestureService from '../../services/gesture_service/gesture_service' import { library } from '@fortawesome/fontawesome-svg-core' import { faChevronLeft, @@ -22,9 +20,7 @@ const MediaModal = { components: { StillImage, VideoAttachment, - Modal, - PinchZoom, - SwipeClick + Modal }, computed: { showing () { @@ -49,22 +45,19 @@ const MediaModal = { return this.currentMedia ? this.getType(this.currentMedia) : null } }, - data () { - return { - loading: false, - swipeDirection: GestureService.DIRECTION_LEFT, - swipeThreshold: () => { - const considerableMoveRatio = 1 / 4 - return window.innerWidth * considerableMoveRatio - }, - pinchZoomMinScale: 0.9, - pinchZoomScaleResetLimit: 1.2 - } + created () { + this.mediaSwipeGestureRight = GestureService.swipeGesture( + GestureService.DIRECTION_RIGHT, + this.goPrev, + 50 + ) + this.mediaSwipeGestureLeft = GestureService.swipeGesture( + GestureService.DIRECTION_LEFT, + this.goNext, + 50 + ) }, methods: { - getType (media) { - return fileTypeService.fileType(media.mimetype) - }, mediaTouchStart (e) { GestureService.beginSwipe(e, this.mediaSwipeGestureRight) GestureService.beginSwipe(e, this.mediaSwipeGestureLeft) @@ -74,12 +67,7 @@ const MediaModal = { GestureService.updateSwipe(e, this.mediaSwipeGestureLeft) }, hide () { - // HACK: Closing immediately via a touch will cause the click - // to be processed on the content below the overlay - const transitionTime = 100 // ms - setTimeout(() => { - this.$store.dispatch('closeMediaViewer') - }, transitionTime) + this.$store.dispatch('closeMediaViewer') }, goPrev () { if (this.canNavigate) { @@ -101,21 +89,6 @@ const MediaModal = { this.$store.dispatch('setCurrentMedia', newMedia) } }, - onImageLoaded () { - this.loading = false - }, - handleSwipePreview (offsets) { - this.$refs.pinchZoom.setTransform({ scale: 1, x: offsets[0], y: 0 }) - }, - handleSwipeEnd (sign) { - console.log('handleSwipeEnd:', sign) - this.$refs.pinchZoom.setTransform({ scale: 1, x: 0, y: 0 }) - if (sign > 0) { - this.goNext() - } else if (sign < 0) { - this.goPrev() - } - }, handleKeyupEvent (e) { if (this.showing && e.keyCode === 27) { // escape this.hide() diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue index 33e9c806..2a24a87e 100644 --- a/src/components/media_modal/media_modal.vue +++ b/src/components/media_modal/media_modal.vue @@ -4,37 +4,16 @@ class="media-modal-view" @backdropClicked="hide" > - - - - - PinchZoom)() - } -} diff --git a/src/components/pinch_zoom/pinch_zoom.vue b/src/components/pinch_zoom/pinch_zoom.vue deleted file mode 100644 index 18d69719..00000000 --- a/src/components/pinch_zoom/pinch_zoom.vue +++ /dev/null @@ -1,11 +0,0 @@ - - - diff --git a/src/components/swipe_click/swipe_click.js b/src/components/swipe_click/swipe_click.js deleted file mode 100644 index 238e6df8..00000000 --- a/src/components/swipe_click/swipe_click.js +++ /dev/null @@ -1,84 +0,0 @@ -import GestureService from '../../services/gesture_service/gesture_service' - -/** - * props: - * direction: a vector that indicates the direction of the intended swipe - * threshold: the minimum distance in pixels the swipe has moved on `direction' - * for swipe-finished() to have a non-zero sign - * perpendicularTolerance: see gesture_service - * - * Events: - * preview-requested(offsets) - * Emitted when the pointer has moved. - * offsets: the offsets from the start of the swipe to the current cursor position - * - * swipe-canceled() - * Emitted when the swipe has been canceled due to a pointercancel event. - * - * swipe-finished(sign: 0|-1|1) - * Emitted when the swipe has finished. - * 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 - * - * swipeless-clicked() - * Emitted when there is a click without swipe. - * This and swipe-finished() cannot be emitted for the same pointerup event. - */ -const SwipeClick = { - props: { - direction: { - type: Array - }, - threshold: { - type: Function, - default: () => 30 - }, - perpendicularTolerance: { - type: Number, - default: 1.0 - } - }, - methods: { - handlePointerDown (event) { - this.$gesture.start(event) - }, - handlePointerMove (event) { - this.$gesture.move(event) - }, - handlePointerUp (event) { - this.$gesture.end(event) - }, - handlePointerCancel (event) { - this.$gesture.cancel(event) - }, - handleNativeClick (event) { - this.$gesture.click(event) - }, - preview (offsets) { - this.$emit('preview-requested', offsets) - }, - end (sign) { - this.$emit('swipe-finished', sign) - }, - click () { - this.$emit('swipeless-clicked') - }, - cancel () { - this.$emit('swipe-canceled') - } - }, - created () { - this.$gesture = new GestureService.SwipeAndClickGesture({ - direction: this.direction, - threshold: this.threshold, - perpendicularTolerance: this.perpendicularTolerance, - swipePreviewCallback: this.preview, - swipeEndCallback: this.end, - swipeCancelCallback: this.cancel, - swipelessClickCallback: this.click - }) - } -} - -export default SwipeClick diff --git a/src/components/swipe_click/swipe_click.vue b/src/components/swipe_click/swipe_click.vue deleted file mode 100644 index 5372071d..00000000 --- a/src/components/swipe_click/swipe_click.vue +++ /dev/null @@ -1,14 +0,0 @@ - - - diff --git a/src/main.js b/src/main.js index 03493525..3895da89 100644 --- a/src/main.js +++ b/src/main.js @@ -45,8 +45,6 @@ Vue.use(VueClickOutside) Vue.use(PortalVue) Vue.use(VBodyScrollLock) -Vue.config.ignoredElements = ['pinch-zoom'] - Vue.component('FAIcon', FontAwesomeIcon) Vue.component('FALayers', FontAwesomeLayers) diff --git a/src/services/gesture_service/gesture_service.js b/src/services/gesture_service/gesture_service.js index 741d4a12..88a328f3 100644 --- a/src/services/gesture_service/gesture_service.js +++ b/src/services/gesture_service/gesture_service.js @@ -4,15 +4,9 @@ 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 touchCoord = touch => [touch.screenX, touch.screenY] - -const touchEventCoord = e => touchCoord(e.touches[0]) - -const pointerEventCoord = e => [e.clientX, e.clientY] +const touchEventCoord = e => ([e.touches[0].screenX, e.touches[0].screenY]) const vectorLength = v => Math.sqrt(v[0] * v[0] + v[1] * v[1]) @@ -25,9 +19,6 @@ const project = (v1, v2) => { return [scalar * v2[0], scalar * v2[1]] } -// 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 // callback should be called. @@ -70,143 +61,6 @@ 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 - }) { - const nop = () => { debug('Warning: Not implemented') } - 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.perpendicularTolerance = perpendicularTolerance - this._reset() - } - - _reset () { - this._startPos = [0, 0] - this._pointerId = -1 - this._swiping = false - this._swiped = false - this._preventNextClick = false - } - - start (event) { - debug('start() called', event) - - // Only handle left click - if (event.button !== BUTTON_LEFT) { - return - } - - this._startPos = pointerEventCoord(event) - this._pointerId = event.pointerId - debug('start pos:', this._startPos) - 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) { - debug('cancel called') - if (!this._swiping || this._pointerId !== event.pointerId) { - return - } - - this.swipeCancelCallback() - } - - end (event) { - if (!this._swiping) { - debug('not swiping') - return - } - - if (this._pointerId !== event.pointerId) { - debug('pointer id does not match') - return - } - - this._swiping = false - - debug('end: is swipe event') - - debug('button = ', event.button) - - // movement too small - const coord = pointerEventCoord(event) - const delta = deltaCoord(this._startPos, coord) - - const sign = (() => { - debug( - 'threshold = ', this.threshold(), - 'vector len =', vectorLength(delta)) - 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 - })() - - const swiped = this._swiped - 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 (swiped && event.pointerType === 'mouse') { - this._preventNextClick = true - } - } - - click (event) { - if (!this._preventNextClick) { - this.swipelessClickCallback() - } - this._reset() - } -} - const GestureService = { DIRECTION_LEFT, DIRECTION_RIGHT, @@ -214,8 +68,7 @@ const GestureService = { DIRECTION_DOWN, swipeGesture, beginSwipe, - updateSwipe, - SwipeAndClickGesture + updateSwipe } export default GestureService diff --git a/yarn.lock b/yarn.lock index ad30315a..8b0cebac 100644 --- a/yarn.lock +++ b/yarn.lock @@ -915,13 +915,6 @@ resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-2.0.0.tgz#63da3e459147cebb0a8d58eed81d6071db9f5973" integrity sha512-N3VKw7KzRfOm8hShUVldpinlm13HpvLBQgT63QS+aCrIRLwjoEUXY5Rcmttbfb6HkzZaeqjLqd/aZCQ53UjQpg== -"@kazvmoe-infra/pinch-zoom-element@^1.2.0": - version "1.2.0" - resolved "https://registry.yarnpkg.com/@kazvmoe-infra/pinch-zoom-element/-/pinch-zoom-element-1.2.0.tgz#eb3ca34c53b4410c689d60aca02f4a497ce84aba" - integrity sha512-HBrhH5O/Fsp2bB7EGTXzCsBAVcMjknSagKC5pBdGpKsF8meHISR0kjDIdw4YoE0S+0oNMwJ6ZUZyIBrdywxPPw== - dependencies: - pointer-tracker "^2.0.3" - "@nodelib/fs.scandir@2.1.3": version "2.1.3" resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz#3a582bdb53804c6ba6d146579c46e52130cf4a3b" @@ -6694,11 +6687,6 @@ pngjs@^3.3.0: version "3.3.3" resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.3.3.tgz#85173703bde3edac8998757b96e5821d0966a21b" -pointer-tracker@^2.0.3: - version "2.4.0" - resolved "https://registry.yarnpkg.com/pointer-tracker/-/pointer-tracker-2.4.0.tgz#78721c2d2201486db11ec1094377f03023b621b3" - integrity sha512-pWI2tpaM/XNtc9mUTv42Rmjf6mkHvE8LT5DDEq0G7baPNhxNM9E3CepubPplSoSLk9E5bwQrAMyDcPVmJyTW4g== - portal-vue@^2.1.4: version "2.1.4" resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-2.1.4.tgz#1fc679d77e294dc8d026f1eb84aa467de11b392e"