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
|
/* eslint-env es6 */
/* eslint no-var: "error" */
/* eslint prefer-const: "error" */
// Local js definitions:
/* global getSettingValue, getVirtualKey, onEachLazy, updateLocalStorage, updateSystemTheme */
/* global addClass, removeClass */
(function () {
function changeSetting(settingName, value) {
updateLocalStorage(settingName, value);
switch (settingName) {
case "theme":
case "preferred-dark-theme":
case "preferred-light-theme":
case "use-system-theme":
updateSystemTheme();
updateLightAndDark();
break;
}
}
function handleKey(ev) {
// Don't interfere with browser shortcuts
if (ev.ctrlKey || ev.altKey || ev.metaKey) {
return;
}
switch (getVirtualKey(ev)) {
case "Enter":
case "Return":
case "Space":
ev.target.checked = !ev.target.checked;
ev.preventDefault();
break;
}
}
function showLightAndDark() {
addClass(document.getElementById("theme").parentElement, "hidden");
removeClass(document.getElementById("preferred-light-theme").parentElement, "hidden");
removeClass(document.getElementById("preferred-dark-theme").parentElement, "hidden");
}
function hideLightAndDark() {
addClass(document.getElementById("preferred-light-theme").parentElement, "hidden");
addClass(document.getElementById("preferred-dark-theme").parentElement, "hidden");
removeClass(document.getElementById("theme").parentElement, "hidden");
}
function updateLightAndDark() {
if (getSettingValue("use-system-theme") !== "false") {
showLightAndDark();
} else {
hideLightAndDark();
}
}
function setEvents() {
updateLightAndDark();
onEachLazy(document.getElementsByClassName("slider"), function(elem) {
const toggle = elem.previousElementSibling;
const settingId = toggle.id;
const settingValue = getSettingValue(settingId);
if (settingValue !== null) {
toggle.checked = settingValue === "true";
}
toggle.onchange = function() {
changeSetting(this.id, this.checked);
};
toggle.onkeyup = handleKey;
toggle.onkeyrelease = handleKey;
});
onEachLazy(document.getElementsByClassName("select-wrapper"), function(elem) {
const select = elem.getElementsByTagName("select")[0];
const settingId = select.id;
const settingValue = getSettingValue(settingId);
if (settingValue !== null) {
select.value = settingValue;
}
select.onchange = function() {
changeSetting(this.id, this.value);
};
});
onEachLazy(document.querySelectorAll("input[type=\"radio\"]"), function(elem) {
const settingId = elem.name;
const settingValue = getSettingValue(settingId);
if (settingValue !== null && settingValue !== "null") {
elem.checked = settingValue === elem.value;
}
elem.addEventListener("change", function(ev) {
changeSetting(ev.target.name, ev.target.value);
});
});
document.getElementById("back").addEventListener("click", function() {
history.back();
});
}
window.addEventListener("DOMContentLoaded", setEvents);
})();
|
