chore: remove unused code
This commit is contained in:
Ilia Mashkov
@@ -1,146 +0,0 @@
|
|||||||
<!--
|
|
||||||
Component: SelectComparedFonts
|
|
||||||
Displays selects that change the compared fonts
|
|
||||||
-->
|
|
||||||
<script lang="ts">
|
|
||||||
import {
|
|
||||||
FontVirtualList,
|
|
||||||
type UnifiedFont,
|
|
||||||
unifiedFontStore,
|
|
||||||
} from '$entities/Font';
|
|
||||||
import { getFontUrl } from '$entities/Font/lib';
|
|
||||||
import FontApplicator from '$entities/Font/ui/FontApplicator/FontApplicator.svelte';
|
|
||||||
import {
|
|
||||||
Content as SelectContent,
|
|
||||||
Item as SelectItem,
|
|
||||||
Root as SelectRoot,
|
|
||||||
Trigger as SelectTrigger,
|
|
||||||
} from '$shared/shadcn/ui/select';
|
|
||||||
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
|
||||||
import { comparisonStore } from '$widgets/ComparisonSlider/model';
|
|
||||||
import { fade } from 'svelte/transition';
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
/**
|
|
||||||
* Position of the slider
|
|
||||||
*/
|
|
||||||
sliderPos: number;
|
|
||||||
}
|
|
||||||
let { sliderPos }: Props = $props();
|
|
||||||
|
|
||||||
const typography = $derived(comparisonStore.typography);
|
|
||||||
const fontA = $derived(comparisonStore.fontA);
|
|
||||||
const fontAUrl = $derived(fontA && getFontUrl(fontA, typography.weight));
|
|
||||||
const fontB = $derived(comparisonStore.fontB);
|
|
||||||
const fontBUrl = $derived(fontB && getFontUrl(fontB, typography.weight));
|
|
||||||
|
|
||||||
const fontList = $derived(unifiedFontStore.fonts);
|
|
||||||
|
|
||||||
function selectFontA(font: UnifiedFont) {
|
|
||||||
if (!font) return;
|
|
||||||
comparisonStore.fontA = font;
|
|
||||||
}
|
|
||||||
|
|
||||||
function selectFontB(font: UnifiedFont) {
|
|
||||||
if (!font) return;
|
|
||||||
comparisonStore.fontB = font;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{#snippet fontSelector(
|
|
||||||
font: UnifiedFont,
|
|
||||||
fonts: UnifiedFont[],
|
|
||||||
url: string,
|
|
||||||
onSelect: (f: UnifiedFont) => void,
|
|
||||||
align: 'start' | 'end',
|
|
||||||
)}
|
|
||||||
<div
|
|
||||||
class="z-50 pointer-events-auto"
|
|
||||||
onpointerdown={(e => e.stopPropagation())}
|
|
||||||
in:fade={{ duration: 300, delay: 300 }}
|
|
||||||
out:fade={{ duration: 300, delay: 300 }}
|
|
||||||
>
|
|
||||||
<SelectRoot type="single" disabled={!fontList.length}>
|
|
||||||
<SelectTrigger
|
|
||||||
class={cn(
|
|
||||||
'w-36 sm:w-44 md:w-52 h-8 sm:h-9 border border-border-muted bg-background-60 backdrop-blur-sm',
|
|
||||||
'px-2 sm:px-3 rounded-lg transition-all flex items-center justify-between gap-2',
|
|
||||||
'font-mono text-[10px] sm:text-[11px] tracking-tight font-medium text-foreground',
|
|
||||||
'hover:bg-background-80 hover:border-border-soft hover:shadow-sm',
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div class="text-left flex-1 min-w-0">
|
|
||||||
<FontApplicator {font} weight={typography.weight}>
|
|
||||||
{font.name}
|
|
||||||
</FontApplicator>
|
|
||||||
</div>
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent
|
|
||||||
class={cn(
|
|
||||||
'bg-background-95 backdrop-blur-xl border border-border-muted shadow-xl',
|
|
||||||
'w-44 sm:w-52 max-h-60 sm:max-h-64 overflow-hidden rounded-lg',
|
|
||||||
)}
|
|
||||||
side="top"
|
|
||||||
{align}
|
|
||||||
sideOffset={8}
|
|
||||||
size="small"
|
|
||||||
>
|
|
||||||
<div class="p-1 sm:p-1.5">
|
|
||||||
<FontVirtualList items={fonts} weight={typography.weight}>
|
|
||||||
{#snippet children({ item: fontListItem })}
|
|
||||||
{@const handleClick = () => onSelect(fontListItem)}
|
|
||||||
<SelectItem
|
|
||||||
value={fontListItem.id}
|
|
||||||
class="data-highlighted:bg-background-muted font-mono text-[10px] sm:text-[11px] px-2 sm:px-3 py-2 sm:py-2.5 rounded-md cursor-pointer transition-colors"
|
|
||||||
onclick={handleClick}
|
|
||||||
>
|
|
||||||
<FontApplicator
|
|
||||||
font={fontListItem}
|
|
||||||
weight={typography.weight}
|
|
||||||
>
|
|
||||||
{fontListItem.name}
|
|
||||||
</FontApplicator>
|
|
||||||
</SelectItem>
|
|
||||||
{/snippet}
|
|
||||||
</FontVirtualList>
|
|
||||||
</div>
|
|
||||||
</SelectContent>
|
|
||||||
</SelectRoot>
|
|
||||||
</div>
|
|
||||||
{/snippet}
|
|
||||||
|
|
||||||
<div class="flex justify-between items-end pointer-events-none z-20">
|
|
||||||
<div
|
|
||||||
class="flex flex-col gap-1.5 sm:gap-2 transition-all duration-500 items-start"
|
|
||||||
style:opacity={sliderPos < 20 ? 0 : 1}
|
|
||||||
style:transform="translateY({sliderPos < 20 ? '8px' : '0px'})"
|
|
||||||
>
|
|
||||||
<div class="flex items-center gap-2 sm:gap-2.5 px-1">
|
|
||||||
<div class="w-1.5 h-1.5 rounded-full bg-indigo-500 shadow-[0_0_6px_rgba(99,102,241,0.6)]"></div>
|
|
||||||
<div class="w-px h-2 sm:h-2.5 bg-border-subtle"></div>
|
|
||||||
<span class="font-mono text-[8px] sm:text-[9px] uppercase tracking-[0.2em] text-text-subtle font-medium">
|
|
||||||
ch_01
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{#if fontB && fontBUrl}
|
|
||||||
{@render fontSelector(fontB, fontList, fontBUrl, selectFontB, 'start')}
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="flex flex-col items-end text-right gap-1.5 sm:gap-2 transition-all duration-500"
|
|
||||||
style:opacity={sliderPos > 80 ? 0 : 1}
|
|
||||||
style:transform="translateY({sliderPos > 80 ? '8px' : '0px'})"
|
|
||||||
>
|
|
||||||
<div class="flex items-center gap-2 sm:gap-2.5 px-1">
|
|
||||||
<span class="font-mono text-[8px] sm:text-[9px] uppercase tracking-[0.2em] text-text-subtle font-medium">
|
|
||||||
ch_02
|
|
||||||
</span>
|
|
||||||
<div class="w-px h-2 sm:h-2.5 bg-border-subtle"></div>
|
|
||||||
<div class="w-1.5 h-1.5 rounded-full bg-foreground shadow-[0_0_6px_rgba(0,0,0,0.4)]"></div>
|
|
||||||
</div>
|
|
||||||
{#if fontA && fontAUrl}
|
|
||||||
{@render fontSelector(fontA, fontList, fontAUrl, selectFontA, 'end')}
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
Reference in New Issue
Block a user