interface.js: refactored API to be more concise

scripts/aes.js

@@ -1,56 +1,23 @@
 let encForm = new Form({id: "encryption", tag: document.getElementById("encryption")});
-let encMsg = new FormElement({
+
-	id: "msg",
+let encMsg = encForm.createTextArea({label: "Message"});
-	type: "textarea",
+let encPass = encForm.createPasswordInput({label: "Password"});
-	label: "Message",
+let encButton = encForm.createButton({label: "Encrypt"});
-	form: encForm
+let encOut = encForm.createOutput({
-});
-let encPass = new FormElement({
-	id: "password",
-	type: "password",
-	label: "Password",
-	form: encForm
-});
-let encButton = new FormElement({
-	id: "button",
-	type: "button",
-	label: "Encrypt",
-	form: encForm
-});
-let encOut = new FormElement({
-	id: "output",
-	type: "output",
 	label: "Output",
 	dataType: "json-b64",
-	form: encForm
 });
 
 let decForm = new Form({id: "decryption", tag: document.getElementById("decryption")});
-let decMsg = new FormElement({
+
-	id: "msg",
+let decMsg = decForm.createTextArea({
-	type: "textarea",
 	label: "Encrypted message",
 	dataType: "json-b64",
-	form: decForm
-});
-let decPass = new FormElement({
-	id: "password",
-	type: "password",
-	label: "Password",
-	form: decForm
-});
-let decButton = new FormElement({
-	id: "button",
-	type: "button",
-	label: "Decrypt",
-	form: decForm
-});
-let decOut = new FormElement({
-	id: "output",
-	type: "output",
-	label: "Output",
-	form: decForm
 });
+let decPass = decForm.createPasswordInput({label: "Password"});
+let decButton = decForm.createButton({label: "Decrypt"});
+let decOut = decForm.createOutput({label: "Output"});
+
 
 function getKeyMaterial(password) {
 	let enc = new TextEncoder();

scripts/interface.js

@@ -1,6 +1,5 @@
 class InterfaceElement {
-	constructor({id, tag}) {
+	constructor({tag}) {
-		this.id = id;
 		if (tag !== undefined) {
 			this.handle = tag;
 		}
@@ -23,15 +22,24 @@ class InterfaceElement {
 
 }
 
+function dataTypeSupports(params, validTypes) {
+	if (params.dataType === undefined) {
+		params.dataType = validTypes[0];
+	}
+	if (!validTypes.includes(params.dataType)) {
+		throw `Element can not support '${params.dataType}' data type`;
+	}
+}
+
 class Form extends InterfaceElement {
-	constructor({id, tag}) {
+	constructor({tag}) {
-		super({id, tag});
+		super({tag});
 
 		if (tag === undefined) {
 			this.handle = document.createElement("div");
 		}
 
-		this.elements = new Map();
+		this.elements = [];
 
 		this.clearAlerts = this.clearAlerts.bind(this);
 	}
@@ -42,7 +50,7 @@ class Form extends InterfaceElement {
 	}
 	set advanced(x) {
 		this.#advanced = x;
-		for (const [id, element] of this.elements.entries()) {
+		for (const element of this.elements) {
 			if (element.advanced === true) {
 				if (this.advanced === true) {
 					element.hidden = false;
@@ -54,10 +62,49 @@ class Form extends InterfaceElement {
 	}
 
 	clearAlerts() {
-		for (const [id, element] of this.elements.entries()) {
+		for (const element of this.elements) {
 			element.clearAlerts();
 		}
 	}
+
+	appendElement(elem) {
+		this.handle.append(elem.fragment);
+		return elem;
+	}
+
+	createTextBox(params) {
+		params.tag = document.createElement("input");
+		dataTypeSupports(params, ["plaintext", "b64", "json-b64"]);
+		return this.appendElement(new FormElement(params));
+	}
+
+	createPasswordInput(params) {
+		params.tag = document.createElement("input");
+		params.tag.setAttribute("type", "password");
+		dataTypeSupports(params, ["plaintext"]);
+		return this.appendElement(new FormElement(params));
+	}
+
+	createTextArea(params) {
+		params.tag = document.createElement("textarea");
+		dataTypeSupports(params, ["plaintext", "b64", "json-b64"]);
+		return this.appendElement(new FormElement(params));
+	}
+
+	createButton(params) {
+		params.tag = document.createElement("button");
+		params.tag.appendChild(document.createTextNode(params.label));
+		params.label = "";
+		dataTypeSupports(params, ["none"]);
+		return this.appendElement(new FormElement(params));
+	}
+
+	createOutput(params) {
+		params.tag = document.createElement("textarea");
+		params.tag.setAttribute("readonly", true);
+		dataTypeSupports(params, ["plaintext", "b64", "json-b64"]);
+		return this.appendElement(new FormElement(params));
+	}
 }
 
 function b64ToBuf (b64) {
@@ -89,40 +136,13 @@ class FormElement extends InterfaceElement {
 		this.handle.disabled = !this.#enabled;
 	}
 
-	constructor({id, type, form, tag, label="", dataType="plaintext", advanced=false, enabled=true}) {
+	constructor({form, tag, label="", dataType, advanced=false, enabled=true}) {
-		super({id});
+		super({tag});
-		this.id = id;
 
 		this.advanced = advanced;
-		this.type = type;
 
 		this.clearAlerts = this.clearAlerts.bind(this);
 
-		switch (type) {
-			case "textbox":
-				this.handle = document.createElement("input");
-				break;
-			case "password":
-				this.handle = document.createElement("input");
-				this.handle.setAttribute("type", "password");
-				break;
-			case "textarea":
-				this.handle = document.createElement("textarea");
-				break;
-			case "button":
-				this.handle = document.createElement("button");
-				this.handle.appendChild(document.createTextNode(label));
-				label = "";
-				dataType = "none"
-				break;
-			case "output":
-				this.handle = document.createElement("textarea");
-				this.handle.setAttribute("readonly", true);
-				break;
-			default:
-				throw `Unknown input type: ${type}`;
-		}
-
 		if (label !== "") {
 			this.label = document.createElement("label");
 			this.label.appendChild(document.createTextNode(label));
@@ -131,53 +151,18 @@ class FormElement extends InterfaceElement {
 		this.dataType = dataType;
 
 		this.enabled = enabled;
-		this.handle.id = this.id;
 
 		if (this.advanced === true) this.hidden = true;
 
-		if (form !== undefined) {
+		this.fragment = new DocumentFragment();
-			this.form = form;
+		if (this.label !== undefined) {
-			if (this.label !== undefined) {
+			this.fragment.appendChild(this.label);
-				this.label.setAttribute("for", this.id);
-				form.handle.appendChild(this.label);
-			}
-			form.handle.appendChild(this.handle);
-			form.elements.set(id, this);
-
-			if (this.advanced === true) this.hidden = !form.advanced;
 		}
+		this.fragment.appendChild(this.handle);
+
+		if (this.advanced === true) this.hidden = !form.advanced;
 	}
 
-	// plaintext is string data
-	// b64 is raw ArrayBuffer data
-	// json-b64 is Object data
-	// or none, which gives undefined
-	#dataType = "none";
-	get dataType() {
-		return this.#dataType;
-	}
-	set dataType(x) {
-		function err(type, x) {
-			throw `'${type}' element can not support '${x}' data type`;
-		}
-
-		switch (x) {
-			case "plaintext":
-			case "b64":
-			case "json-b64":
-				let valid = ["textbox", "password", "textarea", "output"];
-				if (!valid.includes(this.type)) err(this.type, x);
-				break;
-			case "none":
-				if (this.type !== "button") err(this.type, x);
-				break;
-			default:
-				throw `Unknown data type: ${x}`;
-		}
-
-		this.#dataType = x;
-	}
-	
 	get value() {
 		this.clearAlerts();
 		switch (this.dataType) {
@@ -227,11 +212,11 @@ class FormElement extends InterfaceElement {
 		// type is alert-error or alert-info
 		
 		if (this.handle === undefined) {
-			throw `can not add alert for '${this.id}': still undefined`;
+			throw `can not add alert: still undefined`;
 		}
 
 		if (this.hidden === true) {
-			throw `can not add alert for '${this.id}': hidden`;
+			throw `can not add alert: hidden`;
 		}
 
 		if (title === undefined) {