initial tabs implementation

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",

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;
+	}
+}