Assclaw/jfa-go
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add inter-section dependency for settings

Browse Source 
Currently used to hide all email sections when [email]/method is blank
(disabled).
This commit is contained in:
Harvey Tindall
2021-01-31 18:50:04 +00:00
parent ce98b2eb5a
commit 456ef556b1
7 changed files with 136 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ts/modules/settings.ts
+56 -25
View File
@@ -7,6 +7,8 @@ interface settingsBoolEvent extends Event {
interface Meta {
name: string;
description: string;
depends_true?: string;
depends_false?: string;
}
interface Setting {
@@ -16,13 +18,21 @@ interface Setting {
requires_restart: boolean;
type: string;
value: string | boolean | number;
depends_true?: Setting;
depends_false?: Setting;
depends_true?: string;
depends_false?: string;
asElement: () => HTMLElement;
update: (s: Setting) => void;
}
const splitDependant = (section: string, dep: string): string[] => {
let parts = dep.split("|");
if (parts.length == 1) {
parts = [section, parts[0]];
}
return parts
};
class DOMInput {
protected _input: HTMLInputElement;
private _container: HTMLDivElement;
@@ -76,7 +86,7 @@ class DOMInput {
<i class="icon ri-information-line"></i>
<span class="content sm"></span>
</div>
<input type="${inputType}" class="input ~neutral !normal mt-half">
<input type="${inputType}" class="input ~neutral !normal mt-half mb-half">
</label>
`;
this._tooltip = this._container.querySelector("div.setting-tooltip") as HTMLDivElement;
@@ -84,11 +94,15 @@ class DOMInput {
this._restart = this._container.querySelector("span.setting-restart") as HTMLSpanElement;
this._input = this._container.querySelector("input[type=" + inputType + "]") as HTMLInputElement;
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");
}
});
}
const onValueChange = () => {
@@ -206,7 +220,7 @@ class DOMBool implements SBool {
this._container = document.createElement("div");
this._container.classList.add("setting");
this._container.innerHTML = `
<label class="switch">
<label class="switch mb-half">
<input type="checkbox">
<span class="setting-label"></span> <span class="setting-required"></span> <span class="setting-restart"></span>
<div class="setting-tooltip tooltip right unfocused">
@@ -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 += `<option value="${option}">${option}</option>`;
innerHTML += `<option value="${option[0]}">${option[1]}</option>`;
}
this._select.innerHTML = innerHTML;
}
@@ -322,7 +340,7 @@ class DOMSelect implements SSelect {
<i class="icon ri-information-line"></i>
<span class="content sm"></span>
</div>
<div class="select ~neutral !normal mt-half">
<div class="select ~neutral !normal mt-half mb-half">
<select class="settings-select"></select>
</div>
</label>
@@ -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 {
`<span class="badge ~info">R</span>`
);
this.update(setting);
}
update = (s: SSelect) => {
@@ -391,6 +411,7 @@ class sectionPanel {
<span class="heading">${s.meta.name}</span>
<p class="support lg">${s.meta.description}</p>
`;
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;
}
})
}