glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/comparison-slider #19

Merged
ilia merged 129 commits from feature/comparison-slider into main 2026-02-02 09:23:46 +00:00
Conversation 0 Commits 129 Files Changed 106 +5 -3
1 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a392b575cc - Show all commits

8
src/entities/Font/ui/FontApplicator/FontApplicator.svelte
View File

@@ -20,6 +20,8 @@ interface Props {
* Font id to load * Font id to load
*/ */
id: string; id: string;
url: string;
/** /**
* Font weight * Font weight
*/ */
@@ -34,7 +36,7 @@ interface Props {
children?: Snippet; children?: Snippet;
} }
let { name, id, weight = 400, className, children }: Props = $props(); let { name, id, url, weight = 400, className, children }: Props = $props();
let element: Element; let element: Element;
// Track if the user has actually scrolled this into view // Track if the user has actually scrolled this into view
@@ -44,7 +46,7 @@ $effect(() => {
const observer = new IntersectionObserver(entries => { const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) { if (entries[0].isIntersecting) {
hasEnteredViewport = true; hasEnteredViewport = true;
appliedFontsManager.touch([{ slug: id, weight }]); appliedFontsManager.touch([{ id, weight, name, url }]);
// Once it has entered, we can stop observing to save CPU // Once it has entered, we can stop observing to save CPU
observer.unobserve(element); observer.unobserve(element);
@@ -54,7 +56,7 @@ $effect(() => {
return () => observer.disconnect(); return () => observer.disconnect();
}); });
const status = $derived(appliedFontsManager.getFontStatus(id, weight, false)); const status = $derived(appliedFontsManager.getFontStatus(id, weight));
// The "Show" condition: Element is in view AND (Font is ready OR it errored out) // The "Show" condition: Element is in view AND (Font is ready OR it errored out)
const shouldReveal = $derived(hasEnteredViewport && (status === 'loaded' || status === 'error')); const shouldReveal = $derived(hasEnteredViewport && (status === 'loaded' || status === 'error'));