Add pinch to zoom back

Signed-off-by: Sam Therapy <sam@samtherapy.net>

src/components/media_modal/media_modal.js

@@ -22,9 +22,9 @@ const MediaModal = {
   components: {
     StillImage,
     VideoAttachment,
+    Modal,
     PinchZoom,
-    SwipeClick,
-    Modal
+    SwipeClick
   },
   computed: {
     showing () {
@@ -57,7 +57,7 @@ const MediaModal = {
         const considerableMoveRatio = 1 / 4
         return window.innerWidth * considerableMoveRatio
       },
-      pinchZoomMinScale: 1,
+      pinchZoomMinScale: 0.9,
       pinchZoomScaleResetLimit: 1.2
     }
   },

src/components/media_modal/media_modal.vue

@@ -4,18 +4,37 @@
     class="media-modal-view"
     @backdropClicked="hide"
   >
-    <img
+    <SwipeClick
       v-if="type === 'image'"
-      :class="{ loading }"
-      class="modal-image"
-      :src="currentMedia.url"
-      :alt="currentMedia.description"
-      :title="currentMedia.description"
-      @touchstart.stop="mediaTouchStart"
-      @touchmove.stop="mediaTouchMove"
-      @click="hide"
+      class="modal-image-container"
+      :direction="swipeDirection"
+      :threshold="swipeThreshold"
+      @preview-requested="handleSwipePreview"
+      @swipe-finished="handleSwipeEnd"
+      @swipeless-clicked="hide"
       @load="onImageLoaded"
     >
+      <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"
@@ -30,13 +49,6 @@
       :title="currentMedia.description"
       controls
     />
-    <Flash
-      v-if="type === 'flash'"
-      class="modal-image"
-      :src="currentMedia.url"
-      :alt="currentMedia.description"
-      :title="currentMedia.description"
-    />
     <button
       v-if="canNavigate"
       :title="$t('media_modal.previous')"
@@ -86,6 +98,7 @@
 <script src="./media_modal.js"></script>
 
 <style lang="scss">
+
 .modal-view.media-modal-view {
   z-index: 1001;
   flex-direction: column;
@@ -135,6 +148,7 @@
   }
 
   .modal-image {
+    // display: flex;
     max-width: 90%;
     max-height: 90%;
     box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
@@ -204,4 +218,7 @@
     }
   }
 }
+pinch-zoom {
+    display: inline;
+}
 </style>