From a36673a6a8cace69979605f72bcc4d7a9d439814 Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Mon, 2 Aug 2021 17:42:10 -0400 Subject: [PATCH] Use pinch-zoom-element for pinch zoom functionality --- package.json | 1 + src/components/media_modal/media_modal.js | 5 +- src/components/media_modal/media_modal.vue | 72 +++++++++++++++++----- src/components/pinch_zoom/pinch_zoom.js | 6 ++ src/components/pinch_zoom/pinch_zoom.vue | 11 ++++ src/main.js | 2 + src/modules/media_viewer.js | 2 +- yarn.lock | 11 ++++ 8 files changed, 94 insertions(+), 16 deletions(-) create mode 100644 src/components/pinch_zoom/pinch_zoom.js create mode 100644 src/components/pinch_zoom/pinch_zoom.vue diff --git a/package.json b/package.json index 5dd0e067..34029765 100644 --- 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 index 222e3478..684fbe45 100644 --- 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 index 853dec1d..a3fad4c5 100644 --- 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" > - + + + + + + + diff --git a/src/main.js b/src/main.js index 3895da89..03493525 100644 --- 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 index d62aa7c1..ddcccb79 100644 --- 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 index 2d873c25..176b0c7d 100644 --- 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"