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

feat(Page): render ComparisonSlider directly

Browse Source
This commit is contained in:
Ilia Mashkov
2026-01-26 12:54:40 +03:00
parent 75a9c16070
commit 5973d241aa
1 changed files with 12 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/routes/Page.svelte
View File

@@ -1,5 +1,9 @@
<script lang="ts"> <script lang="ts">
import { appliedFontsManager } from '$entities/Font';
import { displayedFontsStore } from '$features/DisplayFont';
import FontDisplay from '$features/DisplayFont/ui/FontDisplay/FontDisplay.svelte'; import FontDisplay from '$features/DisplayFont/ui/FontDisplay/FontDisplay.svelte';
import { controlManager } from '$features/SetupFont';
import ComparisonSlider from '$widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte';
import { FontSearch } from '$widgets/FontSearch'; import { FontSearch } from '$widgets/FontSearch';
/** /**
@@ -9,6 +13,12 @@ import { FontSearch } from '$widgets/FontSearch';
let searchContainer: HTMLElement; let searchContainer: HTMLElement;
let isExpanded = $state(false); let isExpanded = $state(false);
$effect(() => {
appliedFontsManager.touch(
displayedFontsStore.fonts.map(font => ({ slug: font.id, weight: controlManager.weight })),
);
});
</script> </script>
<!-- Font List --> <!-- Font List -->
@@ -17,6 +27,8 @@ let isExpanded = $state(false);
<FontSearch bind:showFilters={isExpanded} /> <FontSearch bind:showFilters={isExpanded} />
</div> </div>
<ComparisonSlider />
<div class="will-change-tranform transition-transform content"> <div class="will-change-tranform transition-transform content">
<FontDisplay /> <FontDisplay />
</div> </div>