fix: syncState opens popup even if the image-viewer was never detached

lib/hooks/use-cosmoz-image-viewer.js

@@ -1,10 +1,10 @@
 import { useSlideList } from '@neovici/cosmoz-slider';
 import { useImperativeApi } from '@neovici/cosmoz-utils/hooks/use-imperative-api';
 import { useNotifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
-import { useEffect, useState } from 'haunted';
+import { useCallback, useEffect, useState } from 'haunted';
 import { html } from 'lit-html';
 import { download } from '../pdf';
-import { popout } from '../popout';
+import { popout, hasWindow } from '../popout';
 import { print } from '../print';
 
 const onImageError = (e) => {
@@ -42,7 +42,13 @@ const onImageError = (e) => {
 			${renderImage(opts)}
 		</div>`,
 	useCosmozImageViewer = (host) => {
-		const { images, showZoom, title, downloadFileName = 'archive' } = host,
+		const {
+				images,
+				showZoom,
+				title,
+				downloadFileName = 'archive',
+				loop,
+			} = host,
 			[isZoomed, setIsZoomed] = useState(false),
 			_onZoomChanged = (ev) => setIsZoomed(ev.detail.value > 1),
 			{ slide, next, prev, goto, index } = useSlideList(images, {
@@ -55,16 +61,23 @@ const onImageError = (e) => {
 			closeFullscreen = () => setIsFullscreen(false),
 			syncImageIndex = (event) => goto(event.detail.value),
 			[detached, setDetached] = useState(false),
-			detach = () =>
-				popout({
-					images,
-					index,
-					syncImageIndex,
-					title,
-					loop: host.loop,
-					onDetach: () => setDetached(true),
-					onClose: () => setDetached(false),
-				}),
+			detach = useCallback(
+				() =>
+					popout({
+						images,
+						index,
+						title,
+						loop,
+						syncImageIndex,
+						onDetach: () => setDetached(true),
+						onClose: () => setDetached(false),
+					}),
+				[images, index, title, loop],
+			),
+			syncState = useCallback(() => {
+				if (!hasWindow) return;
+				detach();
+			}, [detach]),
 			syncDetachedState = (ev) => setDetached(ev.detail.value);
 
 		useNotifyProperty('currentImageIndex', index, [index]);
@@ -73,7 +86,7 @@ const onImageError = (e) => {
 			host.toggleAttribute('hidden', detached);
 		}, [detached]);
 		useNotifyProperty('detached', detached, [detached]);
-		useImperativeApi({ syncState: detach }, [detach]);
+		useImperativeApi({ syncState }, [syncState]);
 
 		return {
 			host,

lib/popout.js

@@ -6,6 +6,8 @@ const toFeatures = (obj) =>
 		.map(([key, value]) => key + '=' + value)
 		.join(',');
 
+export let hasWindow = false;
+
 export const popout = ({
 	images,
 	index,
@@ -42,9 +44,11 @@ export const popout = ({
 			></cosmoz-image-viewer>`,
 		pout.document.body,
 	);
-	pout.onClose?.();
+	pout._onClose?.();
 	onDetach();
-	pout.onClose = onClose;
+	hasWindow = true;
+	pout._onClose = onClose;
 	pout.addEventListener('beforeunload', onClose);
+	pout.addEventListener('beforeunload', () => (hasWindow = false));
 	pout.document.title = title ?? _('Cosmoz image viewer');
 };