From 1579fd62990ab452bfd448fd318afbf8263693e9 Mon Sep 17 00:00:00 2001
From: Cristian Necula <virusz@gmail.com>
Date: Sat, 9 Dec 2023 00:17:14 +0200
Subject: [PATCH] fix: detached zoom should not be on by default

---
 cosmoz-image-viewer.js                 |  1 +
 lib/hooks/use-cosmoz-image-viewer.js   |  2 ++
 lib/popout.js                          |  3 +-
 stories/cosmoz-image-viewer.stories.js | 46 +++++++++++++++++++-------
 4 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/cosmoz-image-viewer.js b/cosmoz-image-viewer.js
index 8598a02..43804d7 100644
--- a/cosmoz-image-viewer.js
+++ b/cosmoz-image-viewer.js
@@ -186,6 +186,7 @@ customElements.define(
 			'show-nav',
 			'show-page-number',
 			'show-zoom',
+			'detached-show-zoom',
 			'loop',
 			'title',
 		],
diff --git a/lib/hooks/use-cosmoz-image-viewer.js b/lib/hooks/use-cosmoz-image-viewer.js
index 78b62fe..11bb835 100644
--- a/lib/hooks/use-cosmoz-image-viewer.js
+++ b/lib/hooks/use-cosmoz-image-viewer.js
@@ -48,6 +48,7 @@ const onImageError = (e) => {
 				title,
 				downloadFileName = 'archive',
 				loop,
+				detachedShowZoom,
 			} = host,
 			[isZoomed, setIsZoomed] = useState(false),
 			_onZoomChanged = (ev) => setIsZoomed(ev.detail.value > 1),
@@ -69,6 +70,7 @@ const onImageError = (e) => {
 						title,
 						loop,
 						syncImageIndex,
+						detachedShowZoom,
 						onDetach: () => setDetached(true),
 						onClose: () => setDetached(false),
 					}),
diff --git a/lib/popout.js b/lib/popout.js
index 7216b92..94513cf 100644
--- a/lib/popout.js
+++ b/lib/popout.js
@@ -14,6 +14,7 @@ export const popout = ({
 	syncImageIndex,
 	title,
 	loop,
+	detachedShowZoom,
 	onDetach,
 	onClose,
 }) => {
@@ -37,7 +38,7 @@ export const popout = ({
 				.currentImageIndex=${index}
 				@current-image-index-changed=${syncImageIndex}
 				show-nav
-				show-zoom
+				?show-zoom=${detachedShowZoom}
 				show-close
 				?loop=${loop}
 				@close=${() => pout.close()}
diff --git a/stories/cosmoz-image-viewer.stories.js b/stories/cosmoz-image-viewer.stories.js
index ec4bc9b..50fcd40 100644
--- a/stories/cosmoz-image-viewer.stories.js
+++ b/stories/cosmoz-image-viewer.stories.js
@@ -8,26 +8,48 @@ export default {
 	component: 'cosmoz-image-viewer',
 };
 
-export const Basic = () => html`
+export const Basic = ({
+	showDetach,
+	showFullscreen,
+	showPageNumber,
+	showNav,
+	loop,
+	showZoom,
+	detachedShowZoom,
+}) => html`
 	<cosmoz-image-viewer
-		show-detach
-		show-fullscreen
-		show-page-number
-		show-nav
-		loop
+		?show-detach=${showDetach}
+		?show-fullscreen=${showFullscreen}
+		?show-page-number=${showPageNumber}
+		?show-nav=${showNav}
+		?loop=${loop}
+		?show-zoom=${showZoom}
+		?detached-show-zoom=${detachedShowZoom}
 		.images=${images}
 	></cosmoz-image-viewer>
-	
+
 	<cosmoz-image-viewer
-		show-detach
-		show-fullscreen
-		show-page-number
-		show-nav
-		loop
+		?show-detach=${showDetach}
+		?show-fullscreen=${showFullscreen}
+		?show-page-number=${showPageNumber}
+		?show-nav=${showNav}
+		?loop=${loop}
+		?show-zoom=${showZoom}
+		?detached-show-zoom=${detachedShowZoom}
 		.images=${['stories/images/cosmos1.jpg', 'stories/images/cosmos2.jpg']}
 	></cosmoz-image-viewer>
 `;
 
+Basic.args = {
+	showDetach: true,
+	showFullscreen: true,
+	showPageNumber: true,
+	showNav: true,
+	loop: true,
+	showZoom: false,
+	detachedShowZoom: false,
+};
+
 export const Issue21 = () => {
 	const images1 = [
 			'stories/images/stockholm.jpg',