christoph/svelte-formula11
1
Fork 0
Code Issues 23 Actions Packages Projects 1 Activity

Lib: Remove LazyCard component

Browse Source
This commit is contained in:
Christoph Urlacher
2025-01-25 16:27:56 +01:00
parent aad969fc46
commit 999cf5bf16
1 changed files with 0 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/lib/components/cards/LazyCard.svelte
View File

@ -1,77 +0,0 @@
<script lang="ts">
import type { Snippet } from "svelte";
import { LazyImage } from "$lib/components";
import { lazyload } from "$lib/lazyload";
interface LazyCardProps {
children: Snippet;
/** The URL for a possible header image. Leave undefined for no header image. Set to empty string for an image not yet loaded. */
imgsrc?: string | undefined;
/** The id of the header image element for JS access. */
imgid?: string | undefined;
/** The aspect ratio width used to reserve image space (while its loading) */
imgwidth: number;
/** The aspect ratio height used to reserve image space (while its loading) */
imgheight: number;
/** Hide the header image element. It can be shown by removing the "hidden" property using JS and the imgid. */
imghidden?: boolean;
/** The aspect ratio width used to reserve card space (while its loading) */
cardwidth: number;
/** The aspect ratio height used to reserve card space (while its loading) */
cardheight: number;
}
let {
children,
imgsrc = undefined,
imgid = undefined,
imgwidth,
imgheight,
imghidden = false,
cardwidth,
cardheight,
...restProps
}: LazyCardProps = $props();
let load: boolean = $state(false);
const lazy_visible_handler = () => {
load = true;
};
</script>
<div
use:lazyload
onLazyVisible={lazy_visible_handler}
style="aspect-ratio: {cardwidth} / {cardheight};"
>
<div class="card w-full overflow-hidden bg-white shadow">
<!-- Allow empty strings for images that only appear after user action -->
{#if imgsrc !== undefined}
<LazyImage
id={imgid}
src={imgsrc}
{imgwidth}
{imgheight}
alt="Card header"
draggable="false"
class="select-none shadow"
hidden={imghidden}
/>
{/if}
<!-- Only lazyload children, as the image is already lazy (also the image fade would break) -->
{#if load}
<div class="p-2" {...restProps}>
{@render children()}
</div>
{/if}
</div>
</div>