Revert old scroll & pan

Signed-off-by: Sam Therapy <sam@samtherapy.net>
2022-03-01 14:04:36 -06:00 · 2022-03-01 14:04:36 -06:00 · cd877e7514
commit cd877e7514
parent 4995d61bbb
10 changed files with 48 additions and 380 deletions
--- 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",
--- 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()
--- 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"
  >
-    <SwipeClick
+    <img
      v-if="type === 'image'"
-      class="modal-image-container"
-      :direction="swipeDirection"
-      :threshold="swipeThreshold"
-      @preview-requested="handleSwipePreview"
-      @swipe-finished="handleSwipeEnd"
-      @swipeless-clicked="hide"
-      @load="onImageLoaded"
+      class="modal-image"
+      :src="currentMedia.url"
+      :alt="currentMedia.description"
+      :title="currentMedia.description"
+      @touchstart.stop="mediaTouchStart"
+      @touchmove.stop="mediaTouchMove"
+      @click="hide"
    >
-      <PinchZoom
-        ref="pinchZoom"
-        class="modal-image-container-inner"
-        selector=".modal-image"
-        reach-min-scale-strategy="reset"
-        stop-propagate-handled="stop-propgate-handled"
-        :allow-pan-min-scale="pinchZoomMinScale"
-        :min-scale="pinchZoomMinScale"
-        :reset-to-min-scale-limit="pinchZoomScaleResetLimit"
-      >
-        <img
-          v-if="type === 'image'"
-          :class="{ loading }"
-          class="modal-image"
-          :src="currentMedia.url"
-          :alt="currentMedia.description"
-          :title="currentMedia.description"
-          @load="onImageLoaded"
-        >
-      </PinchZoom>
-    </SwipeClick>
    <VideoAttachment
      v-if="type === 'video'"
      class="modal-image"
@ -116,7 +95,6 @@
      opacity: 1;
    }
  }
-  overflow: hidden;
 }

 .media-modal-view {
@ -138,31 +116,32 @@
    padding: 0.2em 2em;
  }

-  .description {
-    flex: 0 0 auto;
-    overflow-y: auto;
-    min-height: 1em;
-    max-width: 500px;
-    max-height: 9.5em;
-    word-break: break-all;
-  }
+.modal-image {
+  max-width: 90%;
+  max-height: 90%;
+  box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
+  image-orientation: from-image; // NOTE: only FF supports this
+  animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
+}

-  .modal-image {
-    // display: flex;
-    max-width: 90%;
-    max-height: 90%;
-    box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
-    image-orientation: from-image; // NOTE: only FF supports this
-    animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
+.modal-view-button-arrow {
+  position: absolute;
+  display: block;
+  top: 50%;
+  margin-top: -50px;
+  width: 70px;
+  height: 100px;
+  border: 0;
+  padding: 0;
+  opacity: 0;
+  box-shadow: none;
+  background: none;
+  appearance: none;
+  overflow: visible;
+  cursor: pointer;
+  transition: opacity 333ms cubic-bezier(.4,0,.22,1);

-    &.loading {
-      opacity: 0.5;
-    }
-  }
-
-  .loading-spinner {
-    width: 100%;
-    height: 100%;
+  .arrow-icon {
    position: absolute;
    pointer-events: none;
    display: flex;
--- a/src/components/pinch_zoom/pinch_zoom.js
+++ b/src/components/pinch_zoom/pinch_zoom.js
@ -1,13 +0,0 @@
-import PinchZoom from '@kazvmoe-infra/pinch-zoom-element'
-
-export default {
-  methods: {
-    setTransform ({ scale, x, y }) {
-      this.$el.setTransform({ scale, x, y })
-    }
-  },
-  created () {
-    // Make lint happy
-    (() => PinchZoom)()
-  }
-}
--- a/src/components/pinch_zoom/pinch_zoom.vue
+++ b/src/components/pinch_zoom/pinch_zoom.vue
@ -1,11 +0,0 @@
-<template>
-  <pinch-zoom
-    class="pinch-zoom-parent"
-    v-bind="$attrs"
-    v-on="$listeners"
-  >
-    <slot />
-  </pinch-zoom>
-</template>
-
-<script src="./pinch_zoom.js"></script>
--- a/src/components/swipe_click/swipe_click.js
+++ b/src/components/swipe_click/swipe_click.js
@ -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
--- a/src/components/swipe_click/swipe_click.vue
+++ b/src/components/swipe_click/swipe_click.vue
@ -1,14 +0,0 @@
-<template>
-  <div
-    v-bind="$attrs"
-    @pointerdown="handlePointerDown"
-    @pointermove="handlePointerMove"
-    @pointerup="handlePointerUp"
-    @pointercancel="handlePointerCancel"
-    @click="handleNativeClick"
-  >
-    <slot />
-  </div>
-</template>
-
-<script src="./swipe_click.js"></script>
--- 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)

--- 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
--- 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"