1 // Local js definitions:
3 /* eslint no-var: "error" */
4 /* eslint prefer-const: "error" */
5 /* global getSettingValue, getVirtualKey, onEachLazy, updateLocalStorage, updateSystemTheme */
6 /* global addClass, removeClass */
9 function changeSetting(settingName, value) {
10 updateLocalStorage(settingName, value);
12 switch (settingName) {
14 case "preferred-dark-theme":
15 case "preferred-light-theme":
16 case "use-system-theme":
23 function handleKey(ev) {
24 // Don't interfere with browser shortcuts
25 if (ev.ctrlKey || ev.altKey || ev.metaKey) {
28 switch (getVirtualKey(ev)) {
32 ev.target.checked = !ev.target.checked;
38 function showLightAndDark() {
39 addClass(document.getElementById("theme").parentElement, "hidden");
40 removeClass(document.getElementById("preferred-light-theme").parentElement, "hidden");
41 removeClass(document.getElementById("preferred-dark-theme").parentElement, "hidden");
44 function hideLightAndDark() {
45 addClass(document.getElementById("preferred-light-theme").parentElement, "hidden");
46 addClass(document.getElementById("preferred-dark-theme").parentElement, "hidden");
47 removeClass(document.getElementById("theme").parentElement, "hidden");
50 function updateLightAndDark() {
51 if (getSettingValue("use-system-theme") !== "false") {
58 function setEvents() {
60 onEachLazy(document.getElementsByClassName("slider"), function(elem) {
61 const toggle = elem.previousElementSibling;
62 const settingId = toggle.id;
63 const settingValue = getSettingValue(settingId);
64 if (settingValue !== null) {
65 toggle.checked = settingValue === "true";
67 toggle.onchange = function() {
68 changeSetting(this.id, this.checked);
70 toggle.onkeyup = handleKey;
71 toggle.onkeyrelease = handleKey;
73 onEachLazy(document.getElementsByClassName("select-wrapper"), function(elem) {
74 const select = elem.getElementsByTagName("select")[0];
75 const settingId = select.id;
76 const settingValue = getSettingValue(settingId);
77 if (settingValue !== null) {
78 select.value = settingValue;
80 select.onchange = function() {
81 changeSetting(this.id, this.value);
84 onEachLazy(document.querySelectorAll("input[type=\"radio\"]"), function(elem) {
85 const settingId = elem.name;
86 const settingValue = getSettingValue(settingId);
87 if (settingValue !== null && settingValue !== "null") {
88 elem.checked = settingValue === elem.value;
90 elem.addEventListener("change", function(ev) {
91 changeSetting(ev.target.name, ev.target.value);
94 document.getElementById("back").addEventListener("click", function() {
99 window.addEventListener("DOMContentLoaded", setEvents);