From a36673a6a8cace69979605f72bcc4d7a9d439814 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Mon, 2 Aug 2021 17:42:10 -0400
Subject: Use pinch-zoom-element for pinch zoom functionality

---
 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 +-
 6 files changed, 82 insertions(+), 16 deletions(-)
 create mode 100644 src/components/pinch_zoom/pinch_zoom.js
 create mode 100644 src/components/pinch_zoom/pinch_zoom.vue

(limited to 'src')

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"
   >
-    <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
new file mode 100644
index 00000000..75bb6082
--- /dev/null
+++ 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
new file mode 100644
index 00000000..18d69719
--- /dev/null
+++ 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
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')
-- 
cgit v1.2.3-70-g09d2