115 lines
4.3 KiB
Svelte
115 lines
4.3 KiB
Svelte
<!--
|
|
Component: SampleList
|
|
Renders a list of fonts in a virtualized list to improve performance.
|
|
- Includes pagination with auto-loading when scrolling near the bottom.
|
|
- Provides a typography menu for font setup.
|
|
-->
|
|
<script lang="ts">
|
|
import {
|
|
FontVirtualList,
|
|
appliedFontsManager,
|
|
createFontRowSizeResolver,
|
|
fontStore,
|
|
} from '$entities/Font';
|
|
import { FontSampler } from '$features/DisplayFont';
|
|
import {
|
|
TypographyMenu,
|
|
typographySettingsStore,
|
|
} from '$features/SetupFont';
|
|
import { throttle } from '$shared/lib/utils';
|
|
import { Skeleton } from '$shared/ui';
|
|
import { layoutManager } from '../../model';
|
|
|
|
// FontSampler chrome heights — derived from Tailwind classes in FontSampler.svelte.
|
|
// Header: py-3 (12+12px padding) + ~32px content row ≈ 56px.
|
|
// Only the header is counted; the mobile footer (md:hidden) is excluded because
|
|
// on desktop, where container widths are wide and estimates matter most, it is invisible.
|
|
// Over-estimating chrome is safe (row is slightly taller than text needs, never cut off).
|
|
const SAMPLER_CHROME_HEIGHT = 56;
|
|
|
|
// p-4 = 16px per side = 32px total horizontal padding in FontSampler's content area.
|
|
// Using the smallest breakpoint (mobile) ensures contentWidth is never over-estimated:
|
|
// wider actual padding → more text wrapping → pretext height ≥ rendered height → safe.
|
|
const SAMPLER_CONTENT_PADDING_X = 32;
|
|
|
|
// Fallback row height used when the font has not loaded yet.
|
|
// Matches the previous hardcoded itemHeight={220} value to avoid regressions.
|
|
const SAMPLER_FALLBACK_HEIGHT = 220;
|
|
|
|
let text = $state('The quick brown fox jumps over the lazy dog...');
|
|
let wrapper = $state<HTMLDivElement | null>(null);
|
|
// Binds to the actual window height
|
|
let innerHeight = $state(0);
|
|
// Is the component above the middle of the viewport?
|
|
let isAboveMiddle = $state(false);
|
|
// Inner width of the wrapper div — updated by bind:clientWidth on mount and resize.
|
|
let containerWidth = $state(0);
|
|
|
|
const checkPosition = throttle(() => {
|
|
if (!wrapper) return;
|
|
|
|
const rect = wrapper.getBoundingClientRect();
|
|
const viewportMiddle = innerHeight / 2;
|
|
|
|
isAboveMiddle = rect.top < viewportMiddle;
|
|
}, 100);
|
|
|
|
// Resolver recreated when typography values change. The returned closure reads
|
|
// appliedFontsManager.statuses (a SvelteMap) on every call, so any font status
|
|
// change triggers a full offsets recompute in createVirtualizer — no DOM snap.
|
|
const fontRowHeight = $derived.by(() =>
|
|
createFontRowSizeResolver({
|
|
getFonts: () => fontStore.fonts,
|
|
getWeight: () => typographySettingsStore.weight,
|
|
getPreviewText: () => text,
|
|
getContainerWidth: () => containerWidth,
|
|
getFontSizePx: () => typographySettingsStore.renderedSize,
|
|
getLineHeightPx: () => typographySettingsStore.height * typographySettingsStore.renderedSize,
|
|
getStatus: key => appliedFontsManager.statuses.get(key),
|
|
contentHorizontalPadding: SAMPLER_CONTENT_PADDING_X,
|
|
chromeHeight: SAMPLER_CHROME_HEIGHT,
|
|
fallbackHeight: SAMPLER_FALLBACK_HEIGHT,
|
|
})
|
|
);
|
|
</script>
|
|
|
|
{#snippet skeleton()}
|
|
<div class="flex flex-col gap-3 sm:gap-4 p-3 sm:p-4">
|
|
{#each Array(5) as _, i}
|
|
<div class="flex flex-col gap-1.5 sm:gap-2 p-3 sm:p-4 border rounded-lg sm:rounded-xl border-border-subtle bg-background-40">
|
|
<div class="flex items-center justify-between mb-3 sm:mb-4">
|
|
<Skeleton class="h-6 sm:h-8 w-1/3" />
|
|
<Skeleton class="h-6 sm:h-8 w-6 sm:w-8 rounded-full" />
|
|
</div>
|
|
<Skeleton class="h-24 sm:h-32 w-full" />
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/snippet}
|
|
|
|
<svelte:window
|
|
bind:innerHeight
|
|
onscroll={checkPosition}
|
|
onresize={checkPosition}
|
|
/>
|
|
|
|
<div bind:this={wrapper} bind:clientWidth={containerWidth}>
|
|
<FontVirtualList
|
|
itemHeight={fontRowHeight}
|
|
useWindowScroll={true}
|
|
weight={typographySettingsStore.weight}
|
|
columns={layoutManager.columns}
|
|
gap={layoutManager.gap}
|
|
{skeleton}
|
|
>
|
|
{#snippet children({ item: font, index })}
|
|
<FontSampler bind:text {font} {index} />
|
|
{/snippet}
|
|
</FontVirtualList>
|
|
|
|
<TypographyMenu
|
|
class="fixed bottom-4 sm:bottom-5 right-4 sm:left-1/2 sm:right-[unset] sm:-translate-x-1/2 z-50"
|
|
hidden={!isAboveMiddle}
|
|
/>
|
|
</div>
|