From 798c6f43e7f0ef533ea45c2146f1982104bbb86a 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',