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

Lib: Update lazy components (dropdown + card now lazy)

Browse Source
This commit is contained in:
Christoph Urlacher
2024-12-16 16:44:46 +01:00
parent ecd566b1fa
commit 4d41401905
8 changed files with 136 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/lib/components/DriverCard.svelte
View File

@ -1,11 +1,11 @@
<script lang="ts">
import { get_image_preview_event_handler } from "$lib/image";
import { FileDropzone, SlideToggle } from "@skeletonlabs/skeleton";
import Card from "./Card.svelte";
import LazyCard from "./LazyCard.svelte";
import Button from "./Button.svelte";
import type { Driver } from "$lib/schema";
import Input from "./Input.svelte";
import Dropdown, { type DropdownOption } from "./Dropdown.svelte";
import LazyDropdown, { type DropdownOption } from "./LazyDropdown.svelte";
import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
interface DriverCardProps {
@ -42,7 +42,7 @@
}: DriverCardProps = $props();
</script>
<Card
<LazyCard
imgsrc={driver?.headshot_url ?? headshot_template}
imgwidth={DRIVER_HEADSHOT_WIDTH}
imgheight={DRIVER_HEADSHOT_HEIGHT}
@ -64,8 +64,9 @@
autocomplete="off"
labelwidth="120px"
disabled={disable_inputs}
required={require_inputs}>First Name</Input
>
required={require_inputs}
>First Name
</Input>
<Input
id="driver_last_name_{driver?.id ?? 'create'}"
name="lastname"
@ -73,8 +74,9 @@
autocomplete="off"
labelwidth="120px"
disabled={disable_inputs}
required={require_inputs}>Last Name</Input
>
required={require_inputs}
>Last Name
</Input>
<Input
id="driver_code_{driver?.id ?? 'create'}"
name="code"
@ -84,18 +86,20 @@
maxlength={3}
labelwidth="120px"
disabled={disable_inputs}
required={require_inputs}>Driver Code</Input
>
required={require_inputs}
>Driver Code
</Input>
<!-- Driver team input -->
<Dropdown
<LazyDropdown
name="team"
input_variable={team_select_value}
options={team_select_options}
labelwidth="120px"
disabled={disable_inputs}
required={require_inputs}>Team</Dropdown
>
required={require_inputs}
>Team
</LazyDropdown>
<!-- Headshot upload -->
<FileDropzone
@ -133,4 +137,4 @@
</div>
</div>
</form>
</Card>
</LazyCard>

49
src/lib/components/Card.svelte → src/lib/components/LazyCard.svelte
View File

@ -1,6 +1,7 @@
<script lang="ts">
import type { Snippet } from "svelte";
import LazyImage from "./LazyImage.svelte";
import { lazyload } from "$lib/lazyload";
interface CardProps {
children: Snippet;
@ -12,10 +13,10 @@
imgid?: string | undefined;
/** The aspect ratio width used to reserve image space (while its loading) */
imgwidth?: number;
imgwidth: number;
/** The aspect ratio height used to reserve image space (while its loading) */
imgheight?: number;
imgheight: number;
/** Hide the header image element. It can be shown by removing the "hidden" property using JS and the imgid. */
imghidden?: boolean;
@ -28,29 +29,39 @@
children,
imgsrc = undefined,
imgid = undefined,
imgwidth = undefined,
imgheight = undefined,
imgwidth,
imgheight,
imghidden = false,
fullwidth = false,
...restProps
}: CardProps = $props();
let load: boolean = $state(false);
const lazy_visible_handler = () => {
load = true;
};
</script>
<div class="card overflow-hidden bg-white shadow {fullwidth ? 'w-full' : 'w-auto'}">
<!-- Allow empty strings for images that only appear after user action -->
{#if imgsrc !== undefined}
<div style="width: auto; aspect-ratio: {imgwidth} / {imgheight};">
<LazyImage
id={imgid}
src={imgsrc}
alt="Card header"
draggable="false"
class="select-none shadow"
hidden={imghidden}
/>
<div use:lazyload onLazyVisible={lazy_visible_handler}>
{#if load}
<div class="card overflow-hidden bg-white shadow {fullwidth ? 'w-full' : 'w-auto'}">
<!-- 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}
<div class="p-2" {...restProps}>
{@render children()}
</div>
</div>
{/if}
<div class="p-2" {...restProps}>
{@render children()}
</div>
</div>

68
src/lib/components/Dropdown.svelte → src/lib/components/LazyDropdown.svelte
View File

@ -4,13 +4,26 @@
import type { Action } from "svelte/action";
import type { HTMLInputAttributes } from "svelte/elements";
import { v4 as uuid } from "uuid";
import LazyImage from "./LazyImage.svelte";
export interface DropdownOption {
export interface LazyDropdownOption {
/** The label displayed in the list of options. */
label: string;
/** The value assigned to the dropdown value variable */
value: string;
/** An optional icon displayed left to the label */
icon_url?: string;
/** The aspect ratio width of the optional icon */
icon_width?: number;
/** The aspect ratio height of the optional icon */
icon_height?: number;
}
interface SearchProps extends HTMLInputAttributes {
interface LazyDropdownProps extends HTMLInputAttributes {
children: Snippet;
/** Placeholder for the empty input element */
@ -37,7 +50,7 @@
/** The options this autocomplete component allows to choose from.
* Example: [[{ label: "Aston", value: "0" }, { label: "VCARB", value: "1" }]].
*/
options: DropdownOption[];
options: LazyDropdownOption[];
}
let {
@ -56,7 +69,7 @@
},
options,
...restProps
}: SearchProps = $props();
}: LazyDropdownProps = $props();
/** Find the "label" of an option by its "value" */
const get_label = (value: string): string | undefined => {
@ -78,6 +91,12 @@
if (input) input.dispatchEvent(new CustomEvent("DropdownChange"));
});
let load: boolean = $state(false);
const lazy_click_handler = () => {
load = true;
};
</script>
<div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
@ -87,6 +106,7 @@
>
{@render children()}
</div>
<!-- TODO: How to assign use: conditionally? I don't wan't to repeat the entire input... -->
{#if action}
<input
use:popup={popup_settings}
@ -95,6 +115,7 @@
style="height: 42px; text-align: start; text-indent: 12px; border-top-left-radius: 0; border-bottom-left-radius: 0;"
use:obtain_input
use:action
onmousedown={lazy_click_handler}
onkeypress={(event: Event) => event.preventDefault()}
value={get_label(input_variable) ?? placeholder}
{...restProps}
@ -106,6 +127,7 @@
autocomplete="off"
style="height: 42px; text-align: start; text-indent: 12px; border-top-left-radius: 0; border-bottom-left-radius: 0;"
use:obtain_input
onmousedown={lazy_click_handler}
onkeypress={(event: Event) => event.preventDefault()}
value={get_label(input_variable) ?? placeholder}
{...restProps}
@ -118,21 +140,25 @@
class="card z-10 w-auto overflow-y-scroll p-2 shadow"
style="max-height: 350px;"
>
<ListBox>
{#each options as option}
<ListBoxItem bind:group={input_variable} {name} value={option.value}>
<div class="flex flex-nowrap">
{#if option.icon_url}
<img
src={option.icon_url}
alt=""
class="mr-2 rounded"
style="height: 24px; max-width: 64px;"
/>
{/if}
{option.label}
</div>
</ListBoxItem>
{/each}
</ListBox>
{#if load}
<ListBox>
{#each options as option}
<ListBoxItem bind:group={input_variable} {name} value={option.value}>
<div class="flex flex-nowrap">
{#if option.icon_url}
<LazyImage
src={option.icon_url}
alt=""
imgwidth={option.icon_width ?? 1}
imgheight={option.icon_height ?? 1}
class="mr-2 rounded"
style="height: 24px; max-width: 64px;"
/>
{/if}
{option.label}
</div>
</ListBoxItem>
{/each}
</ListBox>
{/if}
</div>

21
src/lib/components/LazyImage.svelte
View File

@ -6,19 +6,30 @@
interface LazyImageProps extends HTMLImgAttributes {
/** The URL to the image resource to lazyload */
src: string;
/** 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;
}
let { src, ...restProps }: LazyImageProps = $props();
let { src, imgwidth, imgheight, ...restProps }: LazyImageProps = $props();
// Once the image is visible, this will be set to true, triggering the loading
let load: boolean = $state(false);
const lazy_visible_handler = () => {
load = true;
};
// Once the image is visible, this will be set to true, triggering the loading
let load: boolean = $state(false);
</script>
<div use:lazyload onLazyVisible={lazy_visible_handler}>
<!-- Show a correctly sized div so the layout doesn't jump. -->
<div
use:lazyload
onLazyVisible={lazy_visible_handler}
style="width: 100%; aspect-ratio: {imgwidth} / {imgheight};"
>
{#if load}
{#await fetch_image_base64(src) then data}
<img src={data} style="width: 100%" {...restProps} />

6
src/lib/components/RaceCard.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import { get_image_preview_event_handler } from "$lib/image";
import { FileDropzone } from "@skeletonlabs/skeleton";
import Card from "./Card.svelte";
import LazyCard from "./LazyCard.svelte";
import Button from "./Button.svelte";
import type { Race } from "$lib/schema";
import Input from "./Input.svelte";
@ -55,7 +55,7 @@
};
</script>
<Card
<LazyCard
imgsrc={race?.pictogram_url ?? pictogram_template}
imgwidth={RACE_PICTOGRAM_WIDTH}
imgheight={RACE_PICTOGRAM_HEIGHT}
@ -175,4 +175,4 @@
</div>
</div>
</form>
</Card>
</LazyCard>

28
src/lib/components/SubstitutionCard.svelte
View File

@ -1,9 +1,9 @@
<script lang="ts">
import Card from "./Card.svelte";
import LazyCard from "./LazyCard.svelte";
import Button from "./Button.svelte";
import type { Driver, Substitution } from "$lib/schema";
import { get_by_value } from "$lib/database";
import Dropdown, { type DropdownOption } from "./Dropdown.svelte";
import LazyDropdown, { type DropdownOption } from "./LazyDropdown.svelte";
import type { Action } from "svelte/action";
import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
@ -76,7 +76,7 @@
};
</script>
<Card
<LazyCard
imgsrc={get_by_value(drivers, "id", substitution?.substitute ?? "")?.headshot_url ??
headshot_template}
imgwidth={DRIVER_HEADSHOT_WIDTH}
@ -92,35 +92,39 @@
<div class="flex flex-col gap-2">
<!-- Substitute select -->
<Dropdown
<LazyDropdown
name="substitute"
input_variable={substitute_select_value}
action={register_substitute_preview_handler}
options={driver_select_options}
labelwidth="120px"
disabled={disable_inputs}
required={require_inputs}>Substitute</Dropdown
required={require_inputs}
>
Substitute
</LazyDropdown>
<!-- Driver select -->
<Dropdown
<LazyDropdown
name="for"
input_variable={driver_select_value}
options={driver_select_options}
labelwidth="120px"
disabled={disable_inputs}
required={require_inputs}>For</Dropdown
>
required={require_inputs}
>For
</LazyDropdown>
<!-- Race select -->
<Dropdown
<LazyDropdown
name="race"
input_variable={race_select_value}
options={race_select_options}
labelwidth="120px"
disabled={disable_inputs}
required={require_inputs}>Race</Dropdown
>
required={require_inputs}
>Race
</LazyDropdown>
<!-- Save/Delete buttons -->
<div class="flex justify-end gap-2">
@ -145,4 +149,4 @@
</div>
</div>
</form>
</Card>
</LazyCard>

6
src/lib/components/TeamCard.svelte
View File

@ -1,11 +1,11 @@
<script lang="ts">
import { get_image_preview_event_handler } from "$lib/image";
import { FileDropzone } from "@skeletonlabs/skeleton";
import Card from "./Card.svelte";
import Button from "./Button.svelte";
import type { Team } from "$lib/schema";
import Input from "./Input.svelte";
import { TEAM_LOGO_HEIGHT, TEAM_LOGO_WIDTH } from "$lib/config";
import LazyCard from "./LazyCard.svelte";
interface TeamCardProps {
/** The [Team] object used to prefill values. */
@ -29,7 +29,7 @@
}: TeamCardProps = $props();
</script>
<Card
<LazyCard
imgsrc={team?.logo_url ?? logo_template}
imgwidth={TEAM_LOGO_WIDTH}
imgheight={TEAM_LOGO_HEIGHT}
@ -83,4 +83,4 @@
</div>
</div>
</form>
</Card>
</LazyCard>

8
src/lib/components/index.ts
View File

@ -1,8 +1,8 @@
import Button from "./Button.svelte";
import Card from "./Card.svelte";
import DriverCard from "./DriverCard.svelte";
import Dropdown from "./Dropdown.svelte";
import Input from "./Input.svelte";
import LazyCard from "./LazyCard.svelte";
import LazyDropdown from "./LazyDropdown.svelte";
import LazyImage from "./LazyImage.svelte";
import LoadingIndicator from "./LoadingIndicator.svelte";
import RaceCard from "./RaceCard.svelte";
@ -17,10 +17,10 @@ import UserIcon from "./svg/UserIcon.svelte";
export {
// Components
Button,
Card,
DriverCard,
Dropdown,
Input,
LazyCard,
LazyDropdown,
LazyImage,
LoadingIndicator,
RaceCard,