commit: a36673a6a8cace69979605f72bcc4d7a9d439814
parent 544db06294e3bb1948aec97d870d7506bf34252f
Author: Tusooa Zhu <tusooa@kazv.moe>
Date: Mon, 2 Aug 2021 17:42:10 -0400
Use pinch-zoom-element for pinch zoom functionality
Diffstat:
8 files changed, 94 insertions(+), 16 deletions(-)
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
"@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": "https://lily.kazv.moe/infra/pinch-zoom-element.git",
"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
@@ -1,6 +1,7 @@
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 fileTypeService from '../../services/file_type/file_type.service.js'
import GestureService from '../../services/gesture_service/gesture_service'
import Flash from 'src/components/flash/flash.vue'
@@ -26,12 +27,14 @@ const MediaModal = {
components: {
StillImage,
VideoAttachment,
+ PinchZoom,
Modal,
Flash
},
data () {
return {
- loading: false
+ loading: false,
+ pinchZoomOptions: {}
}
},
computed: {
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
@@ -4,20 +4,29 @@
class="media-modal-view"
@backdropClicked="hide"
>
- <img
- v-if="type === 'image'"
- :class="{ loading }"
- class="modal-image"
- :src="currentMedia.url"
- :alt="currentMedia.description"
- :title="currentMedia.description"
- :style="{ transform }"
- @touchstart.stop.prevent="mediaTouchStart"
- @touchmove.stop.prevent="mediaTouchMove"
- @touchend.stop.prevent="mediaTouchEnd"
- @click="hide"
- @load="onImageLoaded"
- >
+ <div class="modal-image-container">
+ <PinchZoom
+ options="pinchZoomOptions"
+ class="modal-image-container-inner"
+ selector=".modal-image"
+ allow-pan-min-scale="1"
+ min-scale="1"
+ reset-to-min-scale-limit="1.2"
+ reach-min-scale-strategy="reset"
+ stop-propagate-handled="stop-propgate-handled"
+ :inner-class="'modal-image-container-inner'"
+ >
+ <img
+ v-if="type === 'image'"
+ :class="{ loading }"
+ class="modal-image"
+ :src="currentMedia.url"
+ :alt="currentMedia.description"
+ :title="currentMedia.description"
+ @load="onImageLoaded"
+ >
+ </PinchZoom>
+ </div>
<VideoAttachment
v-if="type === 'video'"
class="modal-image"
@@ -105,6 +114,7 @@
opacity: 1;
}
}
+ overflow: hidden;
}
.media-modal-view {
@@ -117,6 +127,40 @@
}
}
+.modal-image-container {
+ display: flex;
+ overflow: hidden;
+ align-items: center;
+ flex-direction: column;
+ max-width: 90%;
+ max-height: 95%;
+ flex-grow: 1;
+
+ &-inner {
+ width: 100%;
+ height: 100%;
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+}
+
+.modal-image {
+ max-width: 100%;
+ max-height: 100%;
+ min-width: 0;
+ min-height: 0;
+ 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 {
+// height: 90vh;
+// width: 100%;
+//}
+
.description,
.counter {
/* Hardcoded since background is also hardcoded */
diff --git a/src/components/pinch_zoom/pinch_zoom.js b/src/components/pinch_zoom/pinch_zoom.js
@@ -0,0 +1,6 @@
+import PinchZoom from '@kazvmoe-infra/pinch-zoom-element'
+
+export default {
+ props: {
+ }
+}
diff --git a/src/components/pinch_zoom/pinch_zoom.vue b/src/components/pinch_zoom/pinch_zoom.vue
@@ -0,0 +1,11 @@
+<template>
+ <pinch-zoom
+ class="pinch-zoom-parent"
+ v-bind="$attrs"
+ v-on="$listeners"
+ >
+ <slot />
+ </pinch-zoom>
+</template>
+
+<script src="./pinch_zoom.js"></script>
diff --git a/src/main.js b/src/main.js
@@ -45,6 +45,8 @@ 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/modules/media_viewer.js b/src/modules/media_viewer.js
@@ -28,7 +28,7 @@ const mediaViewer = {
commit('setMedia', media)
dispatch('swipeScaler/reset')
},
- setCurrentMedia ({ commit, state }, current) {
+ setCurrentMedia ({ commit, state, dispatch }, current) {
const index = state.media.indexOf(current)
commit('setCurrentMedia', index || 0)
dispatch('swipeScaler/reset')
diff --git a/yarn.lock b/yarn.lock
@@ -916,6 +916,12 @@
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@https://lily.kazv.moe/infra/pinch-zoom-element.git":
+ version "1.1.1"
+ resolved "https://lily.kazv.moe/infra/pinch-zoom-element.git#de150c01057f0de0c3ef669917399fe370e36f40"
+ 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"
@@ -6995,6 +7001,11 @@ pngjs@^5.0.0:
resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-5.0.0.tgz#e79dd2b215767fd9c04561c01236df960bce7fbb"
integrity sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==
+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.7:
version "2.1.7"
resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-2.1.7.tgz#ea08069b25b640ca08a5b86f67c612f15f4e4ad4"
