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
|
'use-strict';
let settingsModal;
class Setting {
constructor(name, defaultValue, setter) {
this.name = name;
this.defaultValue = defaultValue;
this.setValue = setter;
}
setElement() {
throw new TypeError('Abstract methods should be implemented.');
}
load() {
let value = JSON.parse(localStorage.getItem(this.name));
this.value = value === null ? this.defaultValue : value;
try {
this.setValue(this.value);
} catch (error) {
console.error(`Failed to apply setting "${this.name}" With value:`, this.value);
console.error(error);
}
}
update() {
throw new TypeError('Abstract methods should be implemented.');
}
}
class CheckboxSetting extends Setting {
setElement() {
let element = document.querySelector(`input[name=${this.name}]`);
element.checked = this.value;
}
update(element) {
localStorage.setItem(this.name, element.checked);
this.setValue(element.checked);
}
}
class RadioSetting extends Setting {
setElement() {
let element = document.querySelector(`input[name=${this.name}][value=${this.value}]`);
element.checked = true;
}
update(element) {
localStorage.setItem(this.name, `"${element.value}"`);
this.setValue(element.value);
}
}
function getRootAttributeToggle(attributeName, valueName) {
function toggleRootAttribute(set) {
if (set) {
document.documentElement.setAttribute(`data-${attributeName}`, valueName);
} else {
document.documentElement.removeAttribute(`data-${attributeName}`);
}
}
return toggleRootAttribute;
}
function setTheme(value) {
if (value === 'automatic') {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.setAttribute('data-theme', 'dark');
} else {
document.documentElement.setAttribute('data-theme', 'light');
}
}
else {
document.documentElement.setAttribute('data-theme', value);
}
}
const settings = [
new CheckboxSetting('useSerifFont', false, getRootAttributeToggle('font', 'serif')),
new RadioSetting('setTheme', 'automatic', setTheme)
]
function updateSetting(element) {
let setting = settings.find((s) => s.name == element.name);
if (setting) {
setting.update(element);
}
}
for (const setting of settings) {
setting.load();
}
document.addEventListener('DOMContentLoaded', () => {
settingsModal = new Modal(document.querySelector('div#settings.modal'));
for (const setting of settings) {
setting.setElement();
}
});
|
