userscripts/src/Components/Sidebar/Item.svelte at master · isonium/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
<script>
    import Tag from "../Shared/Tag.svelte";
    import Toggle from "../Shared/Toggle.svelte";

    // the data that will populate the item contents in sidebar
    export let data = {};

    // used to target and disable checkbox on toggle
    let el;

    function toggle(e, data) {
        // prevent default b/c checked will change depending on message response
        e.preventDefault();
        // disable toggle on temp files
        if (data.temp) return;
        // disable the checkbox to prevent multiple toggle messages from being sent
        el.querySelector("input").disabled = true;
        // send filename and target file state (disabled or enabled)
        const obj = {filename: data.filename, action: data.disabled ? "enable" : "disable"};
        safari.extension.dispatchMessage("REQ_TOGGLE_FILE", obj);
    }
</script>

<style>
    .item {
        background-color: var(--color-bg-secondary);
        border-bottom: 1px solid var(--color-black);
        cursor: pointer;
        padding: 1rem 1rem calc(1rem - 1px);
    }

    .item:hover {
        background-color: var(--color-bg-primary);
    }

    .item.active {
        background-color: var(--color-script-highlighted);
        cursor: default;
    }

    .item__header {
        align-items: center;
        display: flex;
    }

    .item__title {
        flex: 1 0 0;
        font-weight: 500;
        letter-spacing: var(--letter-spacing-default);
        padding-right: 0.25rem;
    }

    .item__description {
        color: var(--text-color-secondary);
        font: var(--text-small);
        letter-spacing: var(--letter-spacing-small);
    }

    :global(.sidebar--compact) .item__description {
        display: none;
    }

    .disabled .item__title,
    .disabled :global(.item__tag),
    .disabled .item__description {
        opacity: 0.65;
    }
</style>

<div
    class="item {data.class || ""}"
    class:active={data.active}
    class:disabled={data.disabled}
    data-filename={data.filename}
    data-last-modified={data.lastModified}
    data-type={data.type}
    bind:this={el}
    on:click
>
    <div class="item__header">
        <Tag type={data.type}/>
        <div class="item__title truncate">{data.name}</div>
        <Toggle
            checked={!data.disabled}
            on:click={e => toggle(e, data)}
        />
    </div>
    <div class="item__description">{data.description || "No description provided"}</div>
</div>