add generic converter and base64 converter

controllers/element-controller.js

@@ -2,6 +2,9 @@ function addElement(type) {
 	if (type == "TextBox") {
 		document.getElementById("playground").appendChild(new TextBox().buildElement());
 	}
+	if (type == "Base64Converter") {
+		document.getElementById("playground").appendChild(new Base64Converter().buildElement());
+	}
 }
 
 class ConnectionController {

elements/Base64Converter.js

@@ -0,0 +1,8 @@
+class Base64Converter extends Converter {
+	constructor() {
+		super("Base64 Converter", [
+			{ label : "Encode", conversionFunction : (d) => btoa(d) },
+			{ label : "Decode", conversionFunction : (d) => atob(d) },
+		]);
+	}
+}

elements/Converter.js

@@ -0,0 +1,54 @@
+class Converter extends Box {
+	optionSelect;
+	options;
+	selectedOption = 0;
+
+
+	/**
+	 * options is array like
+	 * [
+	 *   {"label" : "Encode", "conversionFunction" : btoa},
+	 *   {"label" : "Decode", "conversionFunction" : atob}
+	 * ]
+	 */
+	constructor(label, options) {
+		super(label);
+
+		this.options = options;
+
+		let input = new Connector(Connector.INPUT);
+		let output = new Connector(Connector.OUTPUT);
+
+		input.addListener((data) => {
+			output.send(this.options[this.selectedOption].conversionFunction(data));
+		});
+
+		this.inputs.push(input);
+		this.outputs.push(output);
+	}
+
+	buildElement() {
+		super.buildElement();
+
+		this.optionSelect = document.createElement("select");
+
+		for (let i = 0; i < this.options.length; i++) {
+			let optionElement = document.createElement("option");
+			optionElement.innerText = this.options[i].label;
+			optionElement.value = i;
+			this.optionSelect.appendChild(optionElement);
+		}
+
+		if (this.options.length == 1) {
+			this.optionSelect.style.display = "none";
+		}
+
+		this.optionSelect.addEventListener("input", () => {
+			this.selectedOption = this.optionSelect.value;
+		});
+
+		this.content.appendChild(this.optionSelect);
+		
+		return this.element;
+	}
+}

index.html

@@ -7,6 +7,8 @@
 		<script src="elements/Connector.js"></script>
 		<script src="elements/Box.js"></script>
 		<script src="elements/TextBox.js"></script>
+		<script src="elements/Converter.js"></script>
+		<script src="elements/Base64Converter.js"></script>
 		<script src="controllers/menu-controller.js"></script>
 		<script src="controllers/input-controller.js"></script>
 		<script src="controllers/element-controller.js"></script>