feat: simplify <Image> (#149)

ignatiusmb · Jun 12, 2024 · 2470e3f · 2470e3f
1 parent ff11ad7
commit 2470e3f
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 139 deletions.
diff --git a/src/lib/core/Image.svelte b/src/lib/core/Image.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import Observe from './Observe.svelte';
-	import Overlay from './Overlay.svelte';
 	import { fade } from 'svelte/transition';
 
 	interface Props {
@@ -10,88 +8,66 @@
 		alt?: string;
 		/** image ratio with y/x axis as floating number */
 		ratio?: number;
-		/** lazily load image using intersection observer */
-		lazy?: boolean;
 		/** set object-fit to contain */
 		contain?: boolean;
-		/** enable overlay with default slot */
-		overlay?: boolean;
-		/** position wrapper div as absolute */
-		absolute?: boolean;
 		/** fade in options */
 		transition?: import('svelte/transition').FadeParams;
-		/** class name */
-		class?: string;
-		children: import('svelte').Snippet;
+		children?: import('svelte').Snippet;
 	}
 
 	const {
 		src = '',
 		alt = '',
 		ratio = 9 / 16,
-		lazy = false,
 		contain = false,
-		overlay = false,
-		absolute = false,
 		transition = {},
-		class: className,
 		children,
 	}: Props = $props();
-
-	let show = $state(false);
 </script>
 
-{#snippet image()}
-	<img {src} {alt} in:fade={transition} class:contain />
-	{#if overlay}
-		<Overlay {show}>
+<div style:padding-top="{ratio * 100}%" class="syv-core-image">
+	<img {src} {alt} loading="lazy" in:fade={transition} class:contain />
+	{#if children}
+		<div class="canvas">
 			{@render children()}
-		</Overlay>
-	{/if}
-{/snippet}
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	style:padding-top="{ratio * 100}%"
-	class:absolute
-	class="syv-core-image {className}"
-	onmouseenter={() => (show = true)}
-	onmouseleave={() => (show = false)}
->
-	{#if lazy}
-		<Observe once={true}>
-			{#snippet children(sighted)}
-				{#if sighted}{@render image()}{/if}
-			{/snippet}
-		</Observe>
-	{:else}
-		{@render image()}
+		</div>
 	{/if}
 </div>
 
 <style>
 	div {
 		position: relative;
 		border-radius: inherit;
-	}
-	div.absolute {
-		width: 100%;
-		height: 100%;
-		position: absolute;
-		top: 0;
-		left: 0;
-	}
-	img {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-		position: absolute;
-		top: 0;
-		left: 0;
-		border-radius: inherit;
-		text-align: center;
-	}
-	img.contain {
-		object-fit: contain;
+
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+			position: absolute;
+			top: 0;
+			left: 0;
+			border-radius: inherit;
+			text-align: center;
+
+			&.contain {
+				object-fit: contain;
+			}
+		}
+
+		.canvas {
+			opacity: 0;
+			width: 100%;
+			height: 100%;
+			position: absolute;
+			top: 0;
+			left: 0;
+			border-radius: inherit;
+			background: rgba(0, 0, 0, 0.5);
+			transition: var(--t-duration, 300ms);
+
+			&:hover {
+				opacity: 1;
+			}
+		}
 	}
 </style>
diff --git a/src/lib/core/Observe.svelte b/src/lib/core/Observe.svelte
diff --git a/src/lib/core/Overlay.svelte b/src/lib/core/Overlay.svelte
diff --git a/src/lib/core/index.ts b/src/lib/core/index.ts
@@ -1,8 +1,6 @@
 export { default as Dialog } from './Dialog.svelte';
 export { default as Image } from './Image.svelte';
 export { default as LazyLoad } from './LazyLoad.svelte';
-export { default as Observe } from './Observe.svelte';
-export { default as Overlay } from './Overlay.svelte';
 export { default as Periodical } from './Periodical.svelte';
 export { default as ScrollTop } from './ScrollTop.svelte';
 export { default as SearchBar } from './SearchBar.svelte';