initial tabs implementation

This commit is contained in:
dogeystamp 2023-01-21 14:26:34 -05:00
parent 49a775087a
commit 937a802f54
Signed by: dogeystamp
GPG Key ID: 7225FE3592EFFA38
2 changed files with 103 additions and 8 deletions

View File

@ -1,4 +1,6 @@
let encForm = new Form({label: "Encryption"});
let tabs = new TabList({});
let encForm = tabs.createForm({label: "Encryption"});
let encMsg = encForm.createTextArea({label: "Message"});
let encPass = encForm.createPasswordInput({
@ -56,7 +58,7 @@ let encOutRaw = encForm.createOutput({
advanced: true
});
let decForm = new Form({label: "Decryption"});
let decForm = tabs.createForm({label: "Decryption"});
let decMsg = decForm.createTextArea({
label: "Encrypted message",

View File

@ -70,18 +70,16 @@ class Form extends InterfaceElement {
this.handle = tag;
}
if (label !== undefined) {
let labelTag = document.createElement("h2");
labelTag.appendChild(document.createTextNode(label));
this.fragment.appendChild(labelTag);
this.rootNodes.push(labelTag);
}
this.fragment.appendChild(this.handle);
this.elements = [];
this.clearAlerts = this.clearAlerts.bind(this);
if (label !== undefined) {
this.createHeader({label: label});
}
let advancedToggle = this.createCheckBox({label: "Advanced settings"});
advancedToggle.handle.addEventListener('change', function() {
this.advanced = advancedToggle.value;
@ -90,6 +88,24 @@ class Form extends InterfaceElement {
par.appendChild(this.fragment);
}
#hidden = false;
get hidden() {
return this.#hidden;
}
set hidden(x) {
this.#hidden = x;
for (const element of this.elements) {
if (element.advanced === true) {
element.hidden = !this.advanced || this.hidden;
} else {
element.hidden = this.hidden;
}
}
if (this.hidden === true) this.clearAlerts();
}
#advanced = false;
get advanced() {
return this.#advanced;
@ -120,9 +136,19 @@ class Form extends InterfaceElement {
if (elem.advanced) {
elem.hidden = !this.advanced;
}
if (this.hidden) elem.hidden = true;
return elem;
}
createHeader(params) {
params.tag = document.createElement("h2");
dataTypeSupports(params, ["none"]);
let labelTag = document.createTextNode(params.label);
params.tag.appendChild(labelTag);
params.label = undefined;
return this.appendElement(new FormElement(params));
}
createTextBox(params) {
params.tag = document.createElement("input");
dataTypeSupports(params, ["plaintext", "b64", "json-b64"]);
@ -345,3 +371,70 @@ class FormElement extends InterfaceElement {
this.alerts = [];
}
}
class Tab extends InterfaceElement {
constructor({form, label=""}) {
super({});
this.form = form;
this.handle = document.createElement("button");
this.fragment.appendChild(this.handle);
this.handle.appendChild(document.createTextNode(label));
}
}
class TabList extends InterfaceElement {
constructor({tag, par=document.body}) {
super({})
this.par = par;
if (tag === undefined) {
this.handle = document.createElement("div");
} else {
this.handle = tag;
}
this.fragment.appendChild(this.handle);
par.appendChild(this.fragment);
}
forms = []
#activeForm;
set activeForm(x) {
this.#activeForm = x;
for (const form of this.forms) {
if (form !== x) {
form.hidden = true;
} else {
form.hidden = false;
}
}
}
get activeForm() {
return this.#activeForm;
}
createForm(params) {
if (params.par === undefined) params.par = this.par;
let form = new Form(params);
this.forms.push(form);
let tab = new Tab({
label: params.label,
form: form
});
tab.handle.addEventListener('click', function() {
this.activeForm = form;
}.bind(this));
this.handle.appendChild(tab.fragment);
if (this.activeForm === undefined) this.activeForm = form;
else form.hidden = true;
return form;
}
}