fix: detached zoom should not be on by default

Neovici · Dec 8, 2023 · 798c6f4 · 798c6f4
1 parent 41ca46c
commit 798c6f4
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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',