emir/settings.js at master · sineway/emir · 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
import Page from '/ui/Page.js';

chrome.storage.local.get().then(async (settings) => {
    let page = new Page(settings);

    await page.render(() => {
        return {
            title: chrome.i18n.getMessage('name'),
            header: {
                title: chrome.i18n.getMessage('settings'),
                navButton: {
                    label: chrome.i18n.getMessage('go_back'),
                    url: new URL(location).searchParams.get('return'),
                },
            },
            appearance: {
                title: chrome.i18n.getMessage('settings__appearance'),
                colorScheme: (() => {
                    let [title, description, ...rest] = chrome.i18n
                        .getMessage('settings__color_scheme')
                        .split('\\');
                    let options = ['light', 'dark'].map((value, index) => ({
                        label: rest[index],
                        value,
                        checked: settings.colorScheme == value,
                        autofocus: settings.colorScheme == value,
                    }));
                    return {title, description, options};
                })(),
                hue: (() => {
                    let [title, description] = chrome.i18n
                        .getMessage('settings__hue')
                        .split('\\');
                    return {
                        title,
                        description,
                        placeholder: settings.hue,
                        value: settings.hue,
                    };
                })(),
                authorBadges: (() => {
                    let [title, description, ...rest] = chrome.i18n
                        .getMessage('settings__author_badges')
                        .split('\\');
                    let options = Object.keys(settings)
                        .filter((key) => key.endsWith('Badge'))
                        .map((name, index) => ({
                            label: rest[index],
                            name,
                            checked: settings[name],
                        }));
                    return {title, description, options};
                })(),
            },
            calculations: {
                title: chrome.i18n.getMessage('settings__calculations'),
                usBuyersPercent: (() => {
                    let [title, description] = chrome.i18n
                        .getMessage('settings__us_buyers_percent')
                        .split('\\');
                    return {
                        title,
                        description,
                        placeholder: settings.usBuyersPercent,
                        value: settings.usBuyersPercent,
                    };
                })(),
            },
        };
    });
    addEventListener('input', ({target}) => {
        if (target.value == '') {
            chrome.storage.local.set({
                [target.name]: settings[target.name],
            });
        } else if (target.checkValidity?.()) {
            let key = 'value';
            if (target.type == 'number') {
                key = 'valueAsNumber';
            } else if (target.type == 'checkbox') {
                key = 'checked';
            }
            chrome.storage.local.set({
                [target.name]: target[key],
            });
        }
    });
});