fix: allow right-click to save image (#962)

fixes #961

src/routes/_components/dialog/components/MediaDialog.html

@@ -11,8 +11,8 @@
         <li class="media-scroll-item">
           <div class="media-scroll-item-inner">
             <div class="media-scroll-item-inner-inner">
-                {#if canPinchZoom}
+                {#if canPinchZoom && pinchZoomMode}
-                  <PinchZoomable className='media-pinch-zoom' disabled={!pinchZoomMode} >
+                  <PinchZoomable className='media-pinch-zoom' >
                     <MediaInDialog {media} />
                   </PinchZoomable>
                 {:else}

src/routes/_components/dialog/components/PinchZoomable.html

@@ -1,4 +1,4 @@
-<div class="pinch-zoom {disabled ? 'pinch-zoom-disabled' : ''} {className ? className : ''}" >
+<div class="pinch-zoom {className ? className : ''}" >
   <pinch-zoom class="pinch-zoom-inner" ref:node>
     <slot></slot>
   </pinch-zoom>
@@ -8,7 +8,6 @@
     label="Zoom out"
     href="#fa-search-minus"
     on:click="zoomOut()"
-    ariaHidden={disabled}
   />
   <IconButton
     className="pinch-zoom-button pinch-zoom-button-zoom-in"
@@ -16,16 +15,12 @@
     label="Zoom in"
     href="#fa-search-plus"
     on:click="zoomIn()"
-    ariaHidden={disabled}
   />
 </div>
 <style>
   .pinch-zoom {
     position: relative;
   }
-  .pinch-zoom-disabled {
-    pointer-events: none;
-  }
   .pinch-zoom-inner {
     width: 100%;
     height: 100%;
@@ -62,34 +57,18 @@
       padding-right: 5px;
     }
   }
-
-  :global(.pinch-zoom-disabled .pinch-zoom-button) {
-    visibility: hidden;
-  }
 </style>
 <script>
   import IconButton from '../../IconButton.html'
   import 'pinch-zoom-element/dist/pinch-zoom.js'
-  import { observe } from 'svelte-extras'
 
   const ZOOM_INCREMENT = 0.1
 
   export default {
-    oncreate () {
-      this.observe('disabled', disabled => {
-        if (disabled) {
-          this.resetZoom()
-        }
-      }, { init: false })
-    },
-    data: () => ({
-      disabled: false
-    }),
     components: {
       IconButton
     },
     methods: {
-      observe,
       zoomIn () {
         this.zoomBy(ZOOM_INCREMENT)
       },
@@ -103,14 +82,6 @@
           originX: '50%',
           originY: '50%'
         })
-      },
-      resetZoom () {
-        let { node } = this.refs
-        node.setTransform({
-          scale: 1,
-          x: 0,
-          y: 0
-        })
       }
     }
   }