blob: fdcb057d5e145c74ae349ffe47eea9f6c5287c84 (
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
|
<script lang="ts">
import { page } from '$app/stores';
import { SortDirection } from '$gql/graphql';
import { getSortContext } from '$lib/Sort';
import { slideXFast } from '$lib/Transitions';
import { getRandomInt } from '$lib/Utils';
import { slide } from 'svelte/transition';
const sort = getSortContext();
function toggle() {
if ($sort.direction === SortDirection.Ascending) {
$sort.direction = SortDirection.Descending;
} else {
$sort.direction = SortDirection.Ascending;
}
apply();
}
function apply() {
if ($sort.on === 'RANDOM' && $sort.seed === undefined) {
$sort.seed = getRandomInt(0, 1000000000);
}
$sort.apply($page.url.searchParams);
}
function reshuffle() {
$sort.seed = undefined;
apply();
}
</script>
<div class="rounded-group flex flex-row">
<select class="btn-slate" bind:value={$sort.on} on:change={apply} title="Sort on...">
{#each Object.entries($sort.labels) as [value, label]}
<option {value}>{label}</option>
{/each}
</select>
<button type="button" class="btn-slate" title="Toggle sort direction" on:click={toggle}>
{#if $sort.direction === SortDirection.Ascending}
<span class="icon-base icon-[material-symbols--sort] -scale-y-100" />
{:else}
<span class="icon-base icon-[material-symbols--sort]" />
{/if}
</button>
{#if $sort.on === 'RANDOM'}
<button
type="button"
class="btn-slate"
title="Reshuffle"
on:click={reshuffle}
transition:slide={slideXFast}
>
<div class="flex">
<span class="icon-base icon-[material-symbols--shuffle]" />
</div>
</button>
{/if}
</div>
|
