Use pinch-zoom-element for pinch zoom functionality

This commit is contained in:
Tusooa Zhu 2021-08-02 17:42:10 -04:00
parent 544db06294
commit a36673a6a8
No known key found for this signature in database
GPG key ID: 7B467EDE43A08224
8 changed files with 94 additions and 16 deletions

View file

@ -22,6 +22,7 @@
"@fortawesome/free-regular-svg-icons": "5.15.1", "@fortawesome/free-regular-svg-icons": "5.15.1",
"@fortawesome/free-solid-svg-icons": "5.15.1", "@fortawesome/free-solid-svg-icons": "5.15.1",
"@fortawesome/vue-fontawesome": "2.0.0", "@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", "body-scroll-lock": "2.6.4",
"chromatism": "3.0.0", "chromatism": "3.0.0",
"cropperjs": "1.4.3", "cropperjs": "1.4.3",

View file

@ -1,6 +1,7 @@
import StillImage from '../still-image/still-image.vue' import StillImage from '../still-image/still-image.vue'
import VideoAttachment from '../video_attachment/video_attachment.vue' import VideoAttachment from '../video_attachment/video_attachment.vue'
import Modal from '../modal/modal.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 fileTypeService from '../../services/file_type/file_type.service.js'
import GestureService from '../../services/gesture_service/gesture_service' import GestureService from '../../services/gesture_service/gesture_service'
import Flash from 'src/components/flash/flash.vue' import Flash from 'src/components/flash/flash.vue'
@ -26,12 +27,14 @@ const MediaModal = {
components: { components: {
StillImage, StillImage,
VideoAttachment, VideoAttachment,
PinchZoom,
Modal, Modal,
Flash Flash
}, },
data () { data () {
return { return {
loading: false loading: false,
pinchZoomOptions: {}
} }
}, },
computed: { computed: {

View file

@ -3,6 +3,18 @@
v-if="showing" v-if="showing"
class="media-modal-view" class="media-modal-view"
@backdropClicked="hide" @backdropClicked="hide"
>
<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 <img
v-if="type === 'image'" v-if="type === 'image'"
@ -11,13 +23,10 @@
:src="currentMedia.url" :src="currentMedia.url"
:alt="currentMedia.description" :alt="currentMedia.description"
:title="currentMedia.description" :title="currentMedia.description"
:style="{ transform }"
@touchstart.stop.prevent="mediaTouchStart"
@touchmove.stop.prevent="mediaTouchMove"
@touchend.stop.prevent="mediaTouchEnd"
@click="hide"
@load="onImageLoaded" @load="onImageLoaded"
> >
</PinchZoom>
</div>
<VideoAttachment <VideoAttachment
v-if="type === 'video'" v-if="type === 'video'"
class="modal-image" class="modal-image"
@ -105,6 +114,7 @@
opacity: 1; opacity: 1;
} }
} }
overflow: hidden;
} }
.media-modal-view { .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, .description,
.counter { .counter {
/* Hardcoded since background is also hardcoded */ /* Hardcoded since background is also hardcoded */

View file

@ -0,0 +1,6 @@
import PinchZoom from '@kazvmoe-infra/pinch-zoom-element'
export default {
props: {
}
}

View file

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

View file

@ -45,6 +45,8 @@ Vue.use(VueClickOutside)
Vue.use(PortalVue) Vue.use(PortalVue)
Vue.use(VBodyScrollLock) Vue.use(VBodyScrollLock)
Vue.config.ignoredElements = ['pinch-zoom']
Vue.component('FAIcon', FontAwesomeIcon) Vue.component('FAIcon', FontAwesomeIcon)
Vue.component('FALayers', FontAwesomeLayers) Vue.component('FALayers', FontAwesomeLayers)

View file

@ -28,7 +28,7 @@ const mediaViewer = {
commit('setMedia', media) commit('setMedia', media)
dispatch('swipeScaler/reset') dispatch('swipeScaler/reset')
}, },
setCurrentMedia ({ commit, state }, current) { setCurrentMedia ({ commit, state, dispatch }, current) {
const index = state.media.indexOf(current) const index = state.media.indexOf(current)
commit('setCurrentMedia', index || 0) commit('setCurrentMedia', index || 0)
dispatch('swipeScaler/reset') dispatch('swipeScaler/reset')

View file

@ -916,6 +916,12 @@
resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-2.0.0.tgz#63da3e459147cebb0a8d58eed81d6071db9f5973" resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-2.0.0.tgz#63da3e459147cebb0a8d58eed81d6071db9f5973"
integrity sha512-N3VKw7KzRfOm8hShUVldpinlm13HpvLBQgT63QS+aCrIRLwjoEUXY5Rcmttbfb6HkzZaeqjLqd/aZCQ53UjQpg== 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": "@nodelib/fs.scandir@2.1.3":
version "2.1.3" version "2.1.3"
resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz#3a582bdb53804c6ba6d146579c46e52130cf4a3b" 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" resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-5.0.0.tgz#e79dd2b215767fd9c04561c01236df960bce7fbb"
integrity sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw== 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: portal-vue@2.1.7:
version "2.1.7" version "2.1.7"
resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-2.1.7.tgz#ea08069b25b640ca08a5b86f67c612f15f4e4ad4" resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-2.1.7.tgz#ea08069b25b640ca08a5b86f67c612f15f4e4ad4"