@hkdigital/lib-core 0.3.11 → 0.3.12

package/dist/ui/components/image-box/ImageBox.svelte

@@ -1,210 +1,210 @@
-<script>
-	import { ImageLoader } from '../../../network/loaders.js';
-	import { ImageVariantsLoader } from '../../../network/loaders.js';
-	import { toSingleImageMeta } from '../../../network/loaders/image/utils/index.js';
-
-	/**
-	 * @type {{
-	 *   base?: string,
-	 *   bg?: string,
-	 *   classes?: string,
-	 *   width?: string,
-	 *   height?: string,
-	 *   aspect?: string,
-	 *   overflow?: string,
-	 *   fit?: 'contain' | 'cover' | 'fill',
-	 *   position?: import('../../../network/typedef.js').ObjectPosition,
-	 *   imageSource?: import('../../../network/typedef.js').ImageSource,
-	 *   imageLoader?: import('../../../network/loaders.js').ImageLoader,
-	 *   alt?: string,
-	 *   id?: string|Symbol
-	 *   onProgress?: (progress: import('../../../network/typedef.js').LoadingProgress, id: string|Symbol) => void,
-	 *   [attr: string]: any
-	 * }}
-	 */
-	let {
-		// Style
-		base,
-		bg,
-		classes,
-		width,
-		height,
-		aspect,
-		overflow = 'overflow-clip',
-
-		// Fitting and positioning of image in its container
-		fit = 'contain',
-		position = 'left top',
-
-		// Image data
-		imageSource,
-		imageLoader,
-
-		// Accessibility
-		alt = '',
-
-		// Identification
-		id = Symbol('ImageBox'),
-
-		// Events
-		onProgress,
-
-		// Additional attributes
-		...attrs
-	} = $props();
-
-	// if (!imageMeta) {
-	// 	throw new Error('Missing [imageMeta]');
-	// }
-
-	/** @type {HTMLDivElement|undefined} */
-	let containerElem = $state();
-
-	let imageMeta_ = $state();
-	let variantsLoader = $state();
-	let variantObjectUrl = $state(null);
-	let objectUrl = $state(null);
-
-	// For single image meta
-	let metaWidth = $state(0);
-	let metaHeight = $state(0);
-
-	/** @type {ImageLoader|undefined} */
-	let imageLoader_ = $state();
-
-	$effect(() => {
-		// Setup variants loader for responsive images
-		if (Array.isArray(imageSource) && !imageLoader && !variantsLoader) {
-			variantsLoader = new ImageVariantsLoader(imageSource, {
-				devicePixelRatio: window.devicePixelRatio
-			});
-		}
-		// Handle single image meta
-		else if (imageSource && !variantsLoader) {
-			imageMeta_ = toSingleImageMeta(imageSource);
-		}
-	});
-
-	// Handle progress reporting
-	$effect(() => {
-		if (!onProgress) return;
-
-		// Report progress from variants loader
-		if (variantsLoader) {
-			onProgress(variantsLoader.progress, id);
-		}
-		// Report progress from single image loader
-		else if (imageLoader_) {
-			onProgress(imageLoader_.progress, id);
-		}
-	});
-
-	$effect(() => {
-		if (imageMeta_) {
-			metaWidth = imageMeta_.width ?? 0;
-			metaHeight = imageMeta_.height ?? 0;
-		}
-	});
-
-	$effect(() => {
-		if (!imageSource && imageLoader && !imageLoader_) {
-			imageLoader_ = imageLoader;
-			imageMeta_ = imageLoader.imageMeta;
-		}
-	});
-
-	$effect(() => {
-		if (imageMeta_ && !imageLoader_) {
-			imageLoader_ = new ImageLoader(imageMeta_);
-		}
-	});
-
-	$effect(() => {
-		if (imageLoader_?.initial) {
-			imageLoader_.load();
-		}
-	});
-
-	$effect(() => {
-		if (imageLoader_?.loaded) {
-			objectUrl = imageLoader_.getObjectURL();
-		}
-
-		return () => {
-			if (objectUrl) {
-				URL.revokeObjectURL(objectUrl);
-				objectUrl = null;
-			}
-		};
-	});
-
-	$effect(() => {
-		if (!containerElem || !variantsLoader) return;
-
-		const resizeObserver = new ResizeObserver((entries) => {
-			for (const entry of entries) {
-				const { width, height } = entry.contentRect;
-				variantsLoader.updateOptimalImageMeta({
-					containerWidth: width,
-					containerHeight: height,
-					fit
-				});
-			}
-		});
-
-		resizeObserver.observe(containerElem);
-		return () => resizeObserver.disconnect();
-	});
-
-	$effect(() => {
-		if (variantsLoader?.loaded) {
-			variantObjectUrl = variantsLoader.getObjectURL();
-		}
-
-		return () => {
-			if (variantObjectUrl) {
-				URL.revokeObjectURL(variantObjectUrl);
-				variantObjectUrl = null;
-			}
-		};
-	});
-</script>
-
-<div
-	data-component="image-box"
-	bind:this={containerElem}
-	class="{base} {bg} {aspect} {overflow} {width} {height} {classes}"
-	style:--fit={fit}
-	style:--pos={position}
-	style:width={width || (height && aspect) ? undefined : '100%'}
-	style:height={height || (width && aspect) ? undefined : '100%'}
-	{...attrs}
->
-	{#if variantsLoader?.loaded && variantObjectUrl}
-		<img
-			src={variantObjectUrl}
-			{alt}
-			width={variantsLoader.variant.width}
-			height={variantsLoader.variant.height}
-		/>
-	{:else if objectUrl && metaWidth && metaHeight}
-		<img src={objectUrl} {alt} width={metaWidth} height={metaHeight} />
-	{/if}
-</div>
-
-<style>
-	[data-component='image-box'] {
-		max-width: 100%;
-		max-height: 100%;
-	}
-
-	img {
-		display: block;
-		width: 100%;
-		height: 100%;
-		max-width: 100%;
-		max-height: 100%;
-		object-fit: var(--fit);
-		object-position: var(--pos);
-	}
-</style>
+<script>
+	import { ImageLoader } from '../../../network/loaders.js';
+	import { ImageVariantsLoader } from '../../../network/loaders.js';
+	import { toSingleImageMeta } from '../../../network/loaders/image/utils/index.js';
+
+	/**
+	 * @type {{
+	 *   base?: string,
+	 *   bg?: string,
+	 *   classes?: string,
+	 *   width?: string,
+	 *   height?: string,
+	 *   aspect?: string,
+	 *   overflow?: string,
+	 *   fit?: 'contain' | 'cover' | 'fill',
+	 *   position?: import('../../../network/typedef.js').ObjectPosition,
+	 *   imageSource?: import('../../../network/typedef.js').ImageSource,
+	 *   imageLoader?: import('../../../network/loaders.js').ImageLoader,
+	 *   alt?: string,
+	 *   id?: string|Symbol
+	 *   onProgress?: (progress: import('../../../network/typedef.js').LoadingProgress, id: string|Symbol) => void,
+	 *   [attr: string]: any
+	 * }}
+	 */
+	let {
+		// Style
+		base,
+		bg,
+		classes,
+		width,
+		height,
+		aspect,
+		overflow = 'overflow-clip',
+
+		// Fitting and positioning of image in its container
+		fit = 'contain',
+		position = 'left top',
+
+		// Image data
+		imageSource,
+		imageLoader,
+
+		// Accessibility
+		alt = '',
+
+		// Identification
+		id = Symbol('ImageBox'),
+
+		// Events
+		onProgress,
+
+		// Additional attributes
+		...attrs
+	} = $props();
+
+	// if (!imageMeta) {
+	// 	throw new Error('Missing [imageMeta]');
+	// }
+
+	/** @type {HTMLDivElement|undefined} */
+	let containerElem = $state();
+
+	let imageMeta_ = $state();
+	let variantsLoader = $state();
+	let variantObjectUrl = $state(null);
+	let objectUrl = $state(null);
+
+	// For single image meta
+	let metaWidth = $state(0);
+	let metaHeight = $state(0);
+
+	/** @type {ImageLoader|undefined} */
+	let imageLoader_ = $state();
+
+	$effect(() => {
+		// Setup variants loader for responsive images
+		if (Array.isArray(imageSource) && !imageLoader && !variantsLoader) {
+			variantsLoader = new ImageVariantsLoader(imageSource, {
+				devicePixelRatio: window.devicePixelRatio
+			});
+		}
+		// Handle single image meta
+		else if (imageSource && !variantsLoader) {
+			imageMeta_ = toSingleImageMeta(imageSource);
+		}
+	});
+
+	// Handle progress reporting
+	$effect(() => {
+		if (!onProgress) return;
+
+		// Report progress from variants loader
+		if (variantsLoader) {
+			onProgress(variantsLoader.progress, id);
+		}
+		// Report progress from single image loader
+		else if (imageLoader_) {
+			onProgress(imageLoader_.progress, id);
+		}
+	});
+
+	$effect(() => {
+		if (imageMeta_) {
+			metaWidth = imageMeta_.width ?? 0;
+			metaHeight = imageMeta_.height ?? 0;
+		}
+	});
+
+	$effect(() => {
+		if (!imageSource && imageLoader && !imageLoader_) {
+			imageLoader_ = imageLoader;
+			imageMeta_ = imageLoader.imageMeta;
+		}
+	});
+
+	$effect(() => {
+		if (imageMeta_ && !imageLoader_) {
+			imageLoader_ = new ImageLoader(imageMeta_);
+		}
+	});
+
+	$effect(() => {
+		if (imageLoader_?.initial) {
+			imageLoader_.load();
+		}
+	});
+
+	$effect(() => {
+		if (imageLoader_?.loaded) {
+			objectUrl = imageLoader_.getObjectURL();
+		}
+
+		return () => {
+			if (objectUrl) {
+				URL.revokeObjectURL(objectUrl);
+				objectUrl = null;
+			}
+		};
+	});
+
+	$effect(() => {
+		if (!containerElem || !variantsLoader) return;
+
+		const resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const { width, height } = entry.contentRect;
+				variantsLoader.updateOptimalImageMeta({
+					containerWidth: width,
+					containerHeight: height,
+					fit
+				});
+			}
+		});
+
+		resizeObserver.observe(containerElem);
+		return () => resizeObserver.disconnect();
+	});
+
+	$effect(() => {
+		if (variantsLoader?.loaded) {
+			variantObjectUrl = variantsLoader.getObjectURL();
+		}
+
+		return () => {
+			if (variantObjectUrl) {
+				URL.revokeObjectURL(variantObjectUrl);
+				variantObjectUrl = null;
+			}
+		};
+	});
+</script>
+
+<div
+	data-component="image-box"
+	bind:this={containerElem}
+	class="{base} {bg} {aspect} {overflow} {width} {height} {classes}"
+	style:--fit={fit}
+	style:--pos={position}
+	style:width={width || (height && aspect) ? undefined : '100%'}
+	style:height={height || (width && aspect) ? undefined : '100%'}
+	{...attrs}
+>
+	{#if variantsLoader?.loaded && variantObjectUrl}
+		<img
+			src={variantObjectUrl}
+			{alt}
+			width={variantsLoader.variant.width}
+			height={variantsLoader.variant.height}
+		/>
+	{:else if objectUrl && metaWidth && metaHeight}
+		<img src={objectUrl} {alt} width={metaWidth} height={metaHeight} />
+	{/if}
+</div>
+
+<style>
+	[data-component='image-box'] {
+		max-width: 100%;
+		max-height: 100%;
+	}
+
+	img {
+		display: block;
+		width: 100%;
+		height: 100%;
+		max-width: 100%;
+		max-height: 100%;
+		object-fit: var(--fit);
+		object-position: var(--pos);
+	}
+</style>

package/dist/ui/components/image-box/index.js

@@ -1,5 +1,5 @@
-/** @typedef {import('../../../config/typedef.js').ImageMeta} ImageMeta */
-
-export { default as ImageBox } from './ImageBox.svelte';
-
-export default {};
+/** @typedef {import('../../../config/typedef.js').ImageMeta} ImageMeta */
+
+export { default as ImageBox } from './ImageBox.svelte';
+
+export default {};

package/dist/ui/components/image-box/typedef.js

@@ -1,32 +1,32 @@
-/**
- * @typedef {(
- *   'contain' |
- *   'cover' |
- *   'fill' |
- *   'none' |
- *   'scale-down'
- * )} ObjectFit
- */
-
-/**
- * @typedef {(
- *   'left' |
- *   'center' |
- *   'right' |
- *   'top' |
- *   'bottom' |
- *   'left top' |
- *   'left center' |
- *   'left bottom' |
- *   'center top' |
- *   'center center' |
- *   'center bottom' |
- *   'right top' |
- *   'right center' |
- *   'right bottom' |
- *   `${number}% ${number}%` |
- *   `${number}px ${number}px`
- * )} ObjectPosition
- */
-
-export default {};
+/**
+ * @typedef {(
+ *   'contain' |
+ *   'cover' |
+ *   'fill' |
+ *   'none' |
+ *   'scale-down'
+ * )} ObjectFit
+ */
+
+/**
+ * @typedef {(
+ *   'left' |
+ *   'center' |
+ *   'right' |
+ *   'top' |
+ *   'bottom' |
+ *   'left top' |
+ *   'left center' |
+ *   'left bottom' |
+ *   'center top' |
+ *   'center center' |
+ *   'center bottom' |
+ *   'right top' |
+ *   'right center' |
+ *   'right bottom' |
+ *   `${number}% ${number}%` |
+ *   `${number}px ${number}px`
+ * )} ObjectPosition
+ */
+
+export default {};

package/dist/ui/components/index.js

@@ -1,23 +1,23 @@
-export { default as ButtonGroup } from './button-group/ButtonGroup.svelte';
-export { default as CompareLeftRight } from './compare-left-right/CompareLeftRight.svelte';
-export { default as GameBox } from './game-box/GameBox.svelte';
-
-export {
-  createOrGetState as createOrGetAppLayoutState,
-  createState as createAppLayoutState,
-  getState as getAppLayoutState
-} from './hk-app-layout/HkAppLayout.state.svelte.js';
-
-export { default as HkAppLayout } from './hk-app-layout/HkAppLayout.svelte';
-
-export { default as ImageBox } from './image-box/ImageBox.svelte';
-
-export { default as Presenter } from './presenter/Presenter.svelte';
-export { default as ImageSlide } from './presenter/ImageSlide.svelte';
-
-export { default as VirtualViewport } from './virtual-viewport/VirtualViewport.svelte';
-
-// > Types
-
-export * from './button-group/typedef.js';
-export * from './presenter/typedef.js';
+export { default as ButtonGroup } from './button-group/ButtonGroup.svelte';
+export { default as CompareLeftRight } from './compare-left-right/CompareLeftRight.svelte';
+export { default as GameBox } from './game-box/GameBox.svelte';
+
+export {
+  createOrGetState as createOrGetAppLayoutState,
+  createState as createAppLayoutState,
+  getState as getAppLayoutState
+} from './hk-app-layout/HkAppLayout.state.svelte.js';
+
+export { default as HkAppLayout } from './hk-app-layout/HkAppLayout.svelte';
+
+export { default as ImageBox } from './image-box/ImageBox.svelte';
+
+export { default as Presenter } from './presenter/Presenter.svelte';
+export { default as ImageSlide } from './presenter/ImageSlide.svelte';
+
+export { default as VirtualViewport } from './virtual-viewport/VirtualViewport.svelte';
+
+// > Types
+
+export * from './button-group/typedef.js';
+export * from './presenter/typedef.js';

package/dist/ui/components/presenter/ImageSlide.svelte

@@ -1,64 +1,64 @@
-<script>
-  import { ImageBox } from '../index.js';
-
-  /**
-   * @type {{
-   *   imageMeta?: import('../../../network/typedef.js').ImageSource,
-   *   slideDuration?: number,
-   *   nextSlideLabel?: string,
-   *   presenter?: { gotoSlide: (name: string) => void, getCurrentSlideName: () => string },
-   *   getLoadingController?: () => { loaded: () => void, cancel: () => void }
-   *   fit?: 'contain' | 'cover' | 'fill',
-   *   position?: string,
-   *   [attr: string]: any
-   * }}
-   */
-  let {
-    imageMeta,
-    slideDuration = 1000,
-    nextSlideLabel,
-    presenter,
-    getLoadingController,
-    fit = 'cover',
-    position = 'center center',
-    ...attrs
-  } = $props();
-
-  let show = $state(false);
-
-  let controller = getLoadingController();
-
-  async function progressListener(progress, id) {
-    // console.log('loadingProgress', { ...progress, id });
-    if (progress.loaded && !show) {
-      setTimeout(() => {
-        show = true;
-        controller.loaded();
-      }, 0);
-    }
-  }
-
-  let timer;
-
-  $effect(() => {
-    if (show && nextSlideLabel && !timer) {
-      timer = setTimeout(() => {
-        presenter.gotoSlide(nextSlideLabel);
-      }, slideDuration);
-    }
-
-    return () => {
-      clearTimeout(timer);
-    };
-  });
-</script>
-
-<div class="justify-self-stretch self-stretch grid" class:invisible={!show}>
-  <ImageBox
-    imageSource={imageMeta}
-    {fit}
-    {position}
-    onProgress={progressListener}
-    {...attrs}
-  />
-</div>
+<script>
+  import { ImageBox } from '../index.js';
+
+  /**
+   * @type {{
+   *   imageMeta?: import('../../../network/typedef.js').ImageSource,
+   *   slideDuration?: number,
+   *   nextSlideLabel?: string,
+   *   presenter?: { gotoSlide: (name: string) => void, getCurrentSlideName: () => string },
+   *   getLoadingController?: () => { loaded: () => void, cancel: () => void }
+   *   fit?: 'contain' | 'cover' | 'fill',
+   *   position?: string,
+   *   [attr: string]: any
+   * }}
+   */
+  let {
+    imageMeta,
+    slideDuration = 1000,
+    nextSlideLabel,
+    presenter,
+    getLoadingController,
+    fit = 'cover',
+    position = 'center center',
+    ...attrs
+  } = $props();
+
+  let show = $state(false);
+
+  let controller = getLoadingController();
+
+  async function progressListener(progress, id) {
+    // console.log('loadingProgress', { ...progress, id });
+    if (progress.loaded && !show) {
+      setTimeout(() => {
+        show = true;
+        controller.loaded();
+      }, 0);
+    }
+  }
+
+  let timer;
+
+  $effect(() => {
+    if (show && nextSlideLabel && !timer) {
+      timer = setTimeout(() => {
+        presenter.gotoSlide(nextSlideLabel);
+      }, slideDuration);
+    }
+
+    return () => {
+      clearTimeout(timer);
+    };
+  });
+</script>
+
+<div class="justify-self-stretch self-stretch grid" class:invisible={!show}>
+  <ImageBox
+    imageSource={imageMeta}
+    {fit}
+    {position}
+    onProgress={progressListener}
+    {...attrs}
+  />
+</div>