userscripts/src/Components/Sidebar/Filter.svelte at master · 141141/userscripts · GitHub

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<script>
    import {items, settings, state} from "../../store.js";
    import Dropdown from "../Shared/Dropdown.svelte";
    import IconButton from "../Shared/IconButton.svelte";
    import iconSort from "../../img/icon-sort.svg";
    import iconClear from "../../img/icon-clear.svg";

    $: disabled = !$state.includes("ready") ? true : false;

    $: sortOrder = $settings.sortOrder;

    let query = "";

    $: filter(query);

    function filter(query) {
        $items = $items.map(item => {
            const visible = item.filename.toLowerCase().includes(query.trim().toLowerCase());
            if (visible != item.visible) return {...item, visible};
            return item;
        });
    }

    function updateSortOrder(order) {
        settings.updateSingleSetting("sortOrder", order);
    }
</script>
<style>
    .filter {
        font: var(--text-default);
        position: relative;
        width: 100%;
    }

    input {
        background-color: var(--color-black);
        border: none;
        border-radius: var(--border-radius);
        color: inherit;
        display: block;
        font-size: 87.5%;
        opacity: 0.75;
        padding: 0.25rem 2.5rem;
        width: 100%;
    }

    input:focus {
        opacity: 1;
    }

    input:disabled {
        opacity: var(--opacity-disabled);
    }

    :global(.filter > button) {
        height: 1.25rem;
        position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        width: 1.25rem;
    }

    .filter :global(input + div) {
        left: 0.5rem;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .filter :global(input:disabled + div > button) {
        opacity: calc(var(--opacity-disabled) * 0.5);
    }
</style>

<div class="filter">
    <input
        type="text"
        placeholder="Search and filter here..."
        autocapitalize="off"
        autocomplete="off"
        spellcheck="false"
        autocorrect="off"
        bind:value={query}
        {disabled}
    >
    <Dropdown icon={iconSort} {disabled}>
        <li
            class:selected={sortOrder === "lastModifiedAsc"}
            on:click={() => updateSortOrder("lastModifiedAsc")}
        >
            Last Modified: Asc{sortOrder === "lastModifiedAsc" ? " *" : ""}
        </li>
        <li
            class:selected={sortOrder === "lastModifiedDesc"}
            on:click={() => updateSortOrder("lastModifiedDesc")}
        >
            Last Modified: Desc{sortOrder === "lastModifiedDesc" ? " *" : ""}
        </li>
        <li
            class:selected={sortOrder === "nameAsc"}
            on:click={() => updateSortOrder("nameAsc")}
        >
            Name: Asc{sortOrder === "nameAsc" ? " *" : ""}
        </li>
        <li
            class:selected={sortOrder === "nameDesc"}
            on:click={() => updateSortOrder("nameDesc")}
        >
            Name: Desc{sortOrder === "nameDesc" ? " *" : ""}
        </li>
    </Dropdown>
    {#if query}
        <IconButton icon={iconClear} on:click={() => query = ""} {disabled}/>
    {/if}
</div>