blob: 0e59df6abf823ae7159964844eb6a0551133025c (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
<script lang="ts">
import { page } from '$app/state';
import { SortDirection } from '$gql/graphql';
import { navigate, type SortData } from '$lib/Navigation';
import { slideXFast } from '$lib/Transitions';
import { getRandomInt } from '$lib/Utils';
import { slide } from 'svelte/transition';
let { sort, labels }: { sort: SortData<string>; labels: Record<string, string> } = $props();
function apply(sort: SortData<string>) {
navigate({ sort }, page.url.searchParams);
}
function toggle() {
if (sort.direction === SortDirection.Ascending) {
apply({ ...sort, direction: SortDirection.Descending });
} else {
apply({ ...sort, direction: SortDirection.Ascending });
}
}
function newSeed() {
return getRandomInt(0, 1000000000);
}
function shuffle() {
apply({ ...sort, seed: newSeed() });
}
function onchange(e: Event & { currentTarget: EventTarget & HTMLSelectElement }) {
let seed: number | undefined = undefined;
if (e.currentTarget.value === 'RANDOM') {
seed = newSeed();
}
apply({ ...sort, on: e.currentTarget.value, seed });
}
</script>
<div class="rounded-group flex flex-row">
<select class="btn-slate" value={sort.on} {onchange} title="Sort on...">
{#each Object.entries(labels) as [value, label]}
<option {value}>{label}</option>
{/each}
</select>
<button type="button" class="btn-slate" title="Toggle sort direction" onclick={toggle}>
{#if sort.direction === SortDirection.Ascending}
<span class="icon-base icon-[material-symbols--sort] -scale-y-100"></span>
{:else}
<span class="icon-base icon-[material-symbols--sort]"></span>
{/if}
</button>
{#if sort.on === 'RANDOM'}
<button
type="button"
class="btn-slate"
title="Reshuffle"
aria-label="Reshuffle"
onclick={shuffle}
transition:slide={slideXFast}
>
<div class="flex">
<span class="icon-base icon-[material-symbols--shuffle]"></span>
</div>
</button>
{/if}
</div>
|
