diff --git a/scripts/aes.js b/scripts/aes.js index dfecd13..86f3a05 100644 --- a/scripts/aes.js +++ b/scripts/aes.js @@ -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", diff --git a/scripts/interface.js b/scripts/interface.js index 23e3cff..3825757 100644 --- a/scripts/interface.js +++ b/scripts/interface.js @@ -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; + } +}