mirror of https://github.com/hrfee/jfa-go.git
settings: initial search function
not really plugged into anything yet.
This commit is contained in:
parent
3143d32b45
commit
635c2be32c
GPG Key ID:
BBC65952848FB1A2
|
|
@ -729,6 +729,10 @@
|
|||
</div>
|
||||
<div class="flex flex-col md:flex-row gap-3">
|
||||
<div class="card @low dark:~d_neutral col" id="settings-sidebar">
|
||||
<div class="flex-expand">
|
||||
<input type="search" class="field ~neutral @low input settings-section-button justify-between mb-2" id="settings-search" placeholder="{{ .strings.search }}">
|
||||
<span class="button ~neutral @low center -ml-8 mb-2" id=settings-search-clear" aria-label="{{ .strings.clearSearch }}" text="{{ .strings.clearSearch }}"><i class="ri-close-line"></i></span>
|
||||
</div>
|
||||
<aside class="aside sm ~urge dark:~d_info mb-2 @low" id="settings-message">Note: <span class="badge ~critical">*</span> indicates a required field, <span class="badge ~info dark:~d_warning">R</span> indicates changes require a restart.</aside>
|
||||
<span class="button ~neutral @low settings-section-button justify-between mb-2" id="setting-about"><span class="flex">{{ .strings.aboutProgram }} <i class="ri-information-line ml-2"></i></span></span>
|
||||
<span class="button ~neutral @low settings-section-button justify-between mb-2" id="setting-profiles"><span class="flex">{{ .strings.userProfiles }} <i class="ri-user-line ml-2"></i></span></span>
|
||||
|
|
|
|||
|
|
@ -102,6 +102,7 @@ class DOMInput {
|
|||
constructor(inputType: string, setting: Setting, section: string, name: string) {
|
||||
this._container = document.createElement("div");
|
||||
this._container.classList.add("setting");
|
||||
this._container.setAttribute("data-name", name)
|
||||
this._container.innerHTML = `
|
||||
<label class="label">
|
||||
<span class="setting-label"></span> <span class="setting-required"></span> <span class="setting-restart"></span>
|
||||
|
|
@ -262,6 +263,7 @@ class DOMBool implements SBool {
|
|||
constructor(setting: SBool, section: string, name: string) {
|
||||
this._container = document.createElement("div");
|
||||
this._container.classList.add("setting");
|
||||
this._container.setAttribute("data-name", name)
|
||||
this._container.innerHTML = `
|
||||
<label class="switch mb-2">
|
||||
<input type="checkbox">
|
||||
|
|
@ -396,6 +398,7 @@ class DOMSelect implements SSelect {
|
|||
this._options = [];
|
||||
this._container = document.createElement("div");
|
||||
this._container.classList.add("setting");
|
||||
this._container.setAttribute("data-name", name)
|
||||
this._container.innerHTML = `
|
||||
<label class="label">
|
||||
<span class="setting-label"></span> <span class="setting-required"></span> <span class="setting-restart"></span>
|
||||
|
|
@ -544,6 +547,7 @@ class sectionPanel {
|
|||
this._settings = {};
|
||||
this._section = document.createElement("div") as HTMLDivElement;
|
||||
this._section.classList.add("settings-section", "unfocused");
|
||||
this._section.setAttribute("data-section", sectionName);
|
||||
this._section.innerHTML = `
|
||||
<span class="heading">${s.meta.name}</span>
|
||||
<p class="support lg my-2">${s.meta.description}</p>
|
||||
|
|
@ -622,6 +626,12 @@ export class settingsList {
|
|||
private _buttons: { [name: string]: HTMLSpanElement }
|
||||
private _needsRestart: boolean = false;
|
||||
private _messageEditor = new MessageEditor();
|
||||
private _settings: Settings;
|
||||
private _advanced: boolean = false;
|
||||
|
||||
private _searchbox: HTMLElement = document.getElementById("settings-search");
|
||||
private _clearSearchbox: HTMLElement = document.getElementById("settings-search-clear");
|
||||
|
||||
|
||||
addSection = (name: string, s: Section, subButton?: HTMLElement) => {
|
||||
const section = new sectionPanel(s, name);
|
||||
|
|
@ -637,6 +647,7 @@ export class settingsList {
|
|||
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");
|
||||
document.dispatchEvent(new CustomEvent(`settings-${name}`, { detail: false }));
|
||||
|
|
@ -659,6 +670,7 @@ export class settingsList {
|
|||
} else {
|
||||
button.classList.remove("unfocused");
|
||||
}
|
||||
// FIXME: Re-call search
|
||||
});
|
||||
}
|
||||
this._buttons[name] = button;
|
||||
|
|
@ -736,7 +748,8 @@ export class settingsList {
|
|||
advancedEnableToggle.onchange = () => {
|
||||
document.dispatchEvent(new CustomEvent("settings-advancedState", { detail: advancedEnableToggle.checked }));
|
||||
const parent = advancedEnableToggle.parentElement;
|
||||
if (advancedEnableToggle.checked) {
|
||||
this._advanced = advancedEnableToggle.checked;
|
||||
if (this._advanced) {
|
||||
parent.classList.add("~urge");
|
||||
parent.classList.remove("~neutral");
|
||||
} else {
|
||||
|
|
@ -745,6 +758,9 @@ export class settingsList {
|
|||
}
|
||||
};
|
||||
advancedEnableToggle.checked = false;
|
||||
|
||||
// FIXME: Remove this!
|
||||
(window as any).sSearch = this.search;
|
||||
}
|
||||
|
||||
private _addMatrix = () => {
|
||||
|
|
@ -787,10 +803,10 @@ export class settingsList {
|
|||
window.notifications.customError("settingsLoadError", window.lang.notif("errorLoadSettings"));
|
||||
return;
|
||||
}
|
||||
let settings = req.response as Settings;
|
||||
for (let name of settings.order) {
|
||||
this._settings = req.response as Settings;
|
||||
for (let name of this._settings.order) {
|
||||
if (name in this._sections) {
|
||||
this._sections[name].update(settings.sections[name]);
|
||||
this._sections[name].update(this._settings.sections[name]);
|
||||
} else {
|
||||
if (name == "messages" || name == "user_page") {
|
||||
const editButton = document.createElement("div");
|
||||
|
|
@ -806,7 +822,7 @@ export class settingsList {
|
|||
(editButton.querySelector("span.button") as HTMLSpanElement).onclick = () => {
|
||||
this._messageEditor.showList(name == "messages" ? "email" : "user");
|
||||
};
|
||||
this.addSection(name, settings.sections[name], editButton);
|
||||
this.addSection(name, this._settings.sections[name], editButton);
|
||||
} else if (name == "updates") {
|
||||
const icon = document.createElement("span") as HTMLSpanElement;
|
||||
if (window.updater.updateAvailable) {
|
||||
|
|
@ -814,7 +830,7 @@ export class settingsList {
|
|||
icon.innerHTML = `<i class="ri-download-line" title="${window.lang.strings("update")}"></i>`;
|
||||
icon.onclick = () => window.updater.checkForUpdates(window.modals.updateInfo.show);
|
||||
}
|
||||
this.addSection(name, settings.sections[name], icon);
|
||||
this.addSection(name, this._settings.sections[name], icon);
|
||||
} else if (name == "matrix" && !window.matrixEnabled) {
|
||||
const addButton = document.createElement("div");
|
||||
addButton.classList.add("tooltip", "left");
|
||||
|
|
@ -825,19 +841,58 @@ export class settingsList {
|
|||
</span>
|
||||
`;
|
||||
(addButton.querySelector("span.button") as HTMLSpanElement).onclick = this._addMatrix;
|
||||
this.addSection(name, settings.sections[name], addButton);
|
||||
this.addSection(name, this._settings.sections[name], addButton);
|
||||
} else {
|
||||
this.addSection(name, settings.sections[name]);
|
||||
this.addSection(name, this._settings.sections[name]);
|
||||
}
|
||||
}
|
||||
}
|
||||
this._showPanel(settings.order[0]);
|
||||
this._showPanel(this._settings.order[0]);
|
||||
document.dispatchEvent(new CustomEvent("settings-loaded"));
|
||||
document.dispatchEvent(new CustomEvent("settings-advancedState", { detail: false }));
|
||||
this._saveButton.classList.add("unfocused");
|
||||
this._needsRestart = false;
|
||||
}
|
||||
})
|
||||
|
||||
// FIXME: Create & bind to this._searchbox
|
||||
// FXME: this._clearSearchbox clears search
|
||||
search = (query: string) => {
|
||||
query = query.toLowerCase();
|
||||
let firstVisibleSection = "";
|
||||
for (let section of this._settings.order) {
|
||||
// hide button, unhide if matched
|
||||
this._buttons[section].classList.add("unfocused");
|
||||
|
||||
if (section.toLowerCase().includes(query) ||
|
||||
this._settings.sections[section].meta.name.toLowerCase().includes(query) ||
|
||||
this._settings.sections[section].meta.description.toLowerCase().includes(query)) {
|
||||
if ((this._settings.sections[section].meta.advanced && this._advanced) || !(this._settings.sections[section].meta.advanced)) {
|
||||
this._buttons[section].classList.remove("unfocused");
|
||||
firstVisibleSection = firstVisibleSection || section;
|
||||
}
|
||||
}
|
||||
for (let setting of this._settings.sections[section].order) {
|
||||
if (setting.toLowerCase().includes(query) ||
|
||||
this._settings.sections[section].settings[setting].name.toLowerCase().includes(query) ||
|
||||
this._settings.sections[section].settings[setting].description.toLowerCase().includes(query) ||
|
||||
String(this._settings.sections[section].settings[setting].value).toLowerCase().includes(query)) {
|
||||
if ((this._settings.sections[section].meta.advanced && this._advanced) || !(this._settings.sections[section].meta.advanced)) {
|
||||
this._buttons[section].classList.remove("unfocused");
|
||||
firstVisibleSection = firstVisibleSection || section;
|
||||
}
|
||||
if ((this._settings.sections[section].settings[setting].advanced && this._advanced) || !(this._settings.sections[section].settings[setting].advanced)) {
|
||||
// FIXME: Highlight setting somehow
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (firstVisibleSection) {
|
||||
this._buttons[firstVisibleSection].onclick(null);
|
||||
} else {
|
||||
// FIXME: Show "no results found" in right panel (mention enabling advanced settings
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export interface templateEmail {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
