@@ -230,11 +244,15 @@ class DOMBool implements SBool {
document.addEventListener(`settings-loaded`, onValueChange);
if (setting.depends_false || setting.depends_true) {
- let dependant = setting.depends_true || setting.depends_false;
+ let dependant = splitDependant(section, setting.depends_true || setting.depends_false);
let state = true;
if (setting.depends_false) { state = false; }
- document.addEventListener(`settings-${section}-${dependant}`, (event: settingsBoolEvent) => {
- this._input.disabled = (event.detail !== state);
+ document.addEventListener(`settings-${dependant[0]}-${dependant[1]}`, (event: settingsBoolEvent) => {
+ if (Boolean(event.detail) !== state) {
+ this._input.parentElement.classList.add("unfocused");
+ } else {
+ this._input.parentElement.classList.remove("unfocused");
+ }
});
}
this.update(setting);
@@ -251,7 +269,7 @@ class DOMBool implements SBool {
}
interface SSelect extends Setting {
- options: string[];
+ options: string[][];
value: string;
}
class DOMSelect implements SSelect {
@@ -260,7 +278,7 @@ class DOMSelect implements SSelect {
private _tooltip: HTMLDivElement;
private _required: HTMLSpanElement;
private _restart: HTMLSpanElement;
- private _options: string[];
+ private _options: string[][];
type: string = "bool";
get name(): string { return this._container.querySelector("span.setting-label").textContent; }
@@ -301,12 +319,12 @@ class DOMSelect implements SSelect {
get value(): string { return this._select.value; }
set value(v: string) { this._select.value = v; }
- get options(): string[] { return this._options; }
- set options(opt: string[]) {
+ get options(): string[][] { return this._options; }
+ set options(opt: string[][]) {
this._options = opt;
let innerHTML = "";
for (let option of this._options) {
- innerHTML += ``;
+ innerHTML += ``;
}
this._select.innerHTML = innerHTML;
}
@@ -322,7 +340,7 @@ class DOMSelect implements SSelect {
-
+
@@ -332,11 +350,15 @@ class DOMSelect implements SSelect {
this._restart = this._container.querySelector("span.setting-restart") as HTMLSpanElement;
this._select = this._container.querySelector("select.settings-select") as HTMLSelectElement;
if (setting.depends_false || setting.depends_true) {
- let dependant = setting.depends_true || setting.depends_false;
+ let dependant = splitDependant(section, setting.depends_true || setting.depends_false);
let state = true;
if (setting.depends_false) { state = false; }
- document.addEventListener(`settings-${section}-${dependant}`, (event: settingsBoolEvent) => {
- this._input.disabled = (event.detail !== state);
+ document.addEventListener(`settings-${dependant[0]}-${dependant[1]}`, (event: settingsBoolEvent) => {
+ if (Boolean(event.detail) !== state) {
+ this._container.classList.add("unfocused");
+ } else {
+ this._container.classList.remove("unfocused");
+ }
});
}
const onValueChange = () => {
@@ -345,6 +367,7 @@ class DOMSelect implements SSelect {
if (this.requires_restart) { document.dispatchEvent(new CustomEvent("settings-requires-restart")); }
};
this._select.onchange = onValueChange;
+ document.addEventListener(`settings-loaded`, onValueChange);
const message = document.getElementById("settings-message") as HTMLElement;
message.innerHTML = window.lang.var("strings",
@@ -353,9 +376,6 @@ class DOMSelect implements SSelect {
`
R`
);
-
-
-
this.update(setting);
}
update = (s: SSelect) => {
@@ -391,6 +411,7 @@ class sectionPanel {
${s.meta.name}
${s.meta.description}
`;
+
this.update(s);
}
update = (s: Section) => {
@@ -443,8 +464,6 @@ class sectionPanel {
asElement = (): HTMLDivElement => { return this._section; }
}
-
-
interface Settings {
order: string[];
sections: { [sectionName: string]: Section };
@@ -469,6 +488,18 @@ export class settingsList {
button.classList.add("button", "~neutral", "!low", "settings-section-button", "mb-half");
button.textContent = s.meta.name;
button.onclick = () => { this._showPanel(name); };
+ if (s.meta.depends_true || s.meta.depends_false) {
+ let dependant = splitDependant(name, s.meta.depends_true || s.meta.depends_false);
+ let state = true;
+ if (s.meta.depends_false) { state = false; }
+ document.addEventListener(`settings-${dependant[0]}-${dependant[1]}`, (event: settingsBoolEvent) => {
+ if (Boolean(event.detail) !== state) {
+ button.classList.add("unfocused");
+ } else {
+ button.classList.remove("unfocused");
+ }
+ });
+ }
this._buttons[name] = button;
this._sidebar.appendChild(this._buttons[name]);
}
@@ -549,9 +580,9 @@ export class settingsList {
}
}
this._showPanel(settings.order[0]);
- this._needsRestart = false;
document.dispatchEvent(new CustomEvent("settings-loaded"));
this._saveButton.classList.add("unfocused");
+ this._needsRestart = false;
}
})
}