From 5f57291418c545b55126fcf4a6988b540ed31b28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Olgu=20=C3=96rs=20Ba=C5=9Fak?= <olguors@gmail.com>
Date: Mon, 10 Apr 2023 13:35:15 +0300
Subject: [PATCH] ZoomIn and zoomOut props added

---
 api-generator/components/image.js | 12 +++++++++++
 components/lib/image/Image.d.ts   | 10 +++++++++
 components/lib/image/Image.vue    | 36 ++++++++++++++++++++++++++-----
 3 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/api-generator/components/image.js b/api-generator/components/image.js
index d5966f3a6..dc7205074 100644
--- a/api-generator/components/image.js
+++ b/api-generator/components/image.js
@@ -10,6 +10,18 @@ const ImageProps = [
         type: 'string',
         default: 'pi pi-eye',
         description: 'Custom indicator icon.'
+    },
+    {
+        name: 'zoomInDisabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'Disable the zoom-in button'
+    },
+    {
+        name: 'zoomOutDisabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'Disable the zoom-out button'
     }
 ];
 
diff --git a/components/lib/image/Image.d.ts b/components/lib/image/Image.d.ts
index b753a1b43..d03035c99 100644
--- a/components/lib/image/Image.d.ts
+++ b/components/lib/image/Image.d.ts
@@ -32,6 +32,16 @@ export interface ImageProps {
      * @defaultValue pi pi-eye
      */
     indicatorIcon?: string;
+    /**
+     * Disable the zoom-in button
+     * @defaultValue false
+     */
+    zoomInDisabled?: boolean | undefined;
+    /**
+     * Disable the zoom-out button
+     * @defaultValue false
+     */
+    zoomOutDisabled?: boolean | undefined;
 }
 
 /**
diff --git a/components/lib/image/Image.vue b/components/lib/image/Image.vue
index 0084b3aca..2479992d4 100644
--- a/components/lib/image/Image.vue
+++ b/components/lib/image/Image.vue
@@ -21,13 +21,13 @@
                         </slot>
                     </button>
 
-                    <button class="p-image-action p-link" @click="zoomOut" type="button" :disabled="zoomDisabled" :aria-label="zoomOutAriaLabel">
+                    <button class="p-image-action p-link" @click="zoomOut" type="button" :disabled="isZoomOutDisabled" :aria-label="zoomOutAriaLabel">
                         <slot name="zoomout">
                             <SearchMinusIcon />
                         </slot>
                     </button>
 
-                    <button class="p-image-action p-link" @click="zoomIn" type="button" :disabled="zoomDisabled" :aria-label="zoomInAriaLabel">
+                    <button class="p-image-action p-link" @click="zoomIn" type="button" :disabled="isZoomInDisabled" :aria-label="zoomInAriaLabel">
                         <slot name="zoomin">
                             <SearchPlusIcon />
                         </slot>
@@ -92,6 +92,14 @@ export default {
         indicatorIcon: {
             type: String,
             default: undefined
+        },
+        zoomInDisabled: {
+            type: Boolean,
+            default: false
+        },
+        zoomOutDisabled: {
+            type: Boolean,
+            default: false
         }
     },
     mask: null,
@@ -126,7 +134,13 @@ export default {
         onPreviewImageClick() {
             this.previewClick = true;
         },
-        onMaskClick() {
+        onMaskClick(event) {
+            const isActionbarTarget = [event.target.classList].includes('p-image-action') || event.target.closest('.p-image-action');
+
+            if (isActionbarTarget) {
+                return;
+            }
+
             if (!this.previewClick) {
                 this.previewVisible = false;
                 this.rotate = 0;
@@ -192,6 +206,11 @@ export default {
             if (focusTarget) {
                 focusTarget.focus();
             }
+        },
+        hidePreview() {
+            this.previewVisible = false;
+            this.rotate = 0;
+            this.scale = 1;
         }
     },
     computed: {
@@ -213,8 +232,11 @@ export default {
         imagePreviewStyle() {
             return { transform: 'rotate(' + this.rotate + 'deg) scale(' + this.scale + ')' };
         },
-        zoomDisabled() {
-            return this.scale <= 0.5 || this.scale >= 1.5;
+        isZoomInDisabled() {
+            return this.zoomInDisabled || this.scale >= 1.5;
+        },
+        isZoomOutDisabled() {
+            return this.zoomOutDisabled || this.scale <= 0.5;
         },
         rightAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.rotateRight : undefined;
@@ -298,6 +320,10 @@ export default {
     align-items: center;
 }
 
+.p-image-action.p-link[disabled] {
+    opacity: 0.5;
+}
+
 .p-image-preview {
     transition: transform 0.15s;
     max-width: 100vw;