mfr: support more de- and encodings

dencoder.js

@@ -1,15 +1,89 @@
 (function($) {
+	var plugins = [
+		{
+			"id": "CHOOSE",
+			"name": "Please choose your conversion ...",
+			"convert": function(input) {
+				return "";
+			}
+		},
+		{
+			"id": "base64encode",
+			"name": "Base64 encode",
+			"convert": function(input) {
+				return btoa(input);
+			}
+		},
+		{
+			"id": "base64decode",
+			"name": "Base64 decode",
+			"convert": function(input) {
+				try {
+					return atob(input);
+				} catch (exception) {
+					return "Invalid base64 input string.";
+				}
+			}
+		},
+		{
+			"id": "encodeuri",
+			"name": "Encode URI",
+			"convert": function(input) {
+				return encodeURI(input).replace(/%5B/g, '[').replace(/%5D/g, ']');
+			}
+		},
+		{
+			"id": "decodeuri",
+			"name": "Decode URI",
+			"convert": function(input) {
+				return decodeURI(input)
+			}
+		},
+		{
+			"id": "encodeuricomponent",
+			"name": "Encode URI component",
+			"convert": function(input) {
+				return encodeURIComponent(input).replace(/[!'()*]/g, function(c) {
+					return '%' + c.charCodeAt(0).toString(16);
+				});
+			}
+		},
+		{
+			"id": "decodeuricomponent",
+			"name": "Decode URI component",
+			"convert": function(input) {
+				return decodeURIComponent(input)
+			}
+		}
+	];
+	var optiontemplate = "<option name='{identifier}'>{name}</option>";
 	var template = "<div id='wrapper-{index}'><textarea id='input-{index}' class='input'>{content}</textarea>"
 		+ "<select id='type-{index}' class='conversion' onchange='den.convert(this);'>"
-		+ "<option name='CHOOSE'>Please choose your method ...</option>"
+		+ "{options}"
-		+ "<option name='base64encode'>Base64 encode</option>"
-		+ "<option name='base64decode'>Base64 decode</option>"
 		+ "</select></div>";
+	var options = "";
+	var i, plugin, option;
+	for (i = 0; i < plugins.length; i++) {
+		plugin = plugins[i];
+		option = optiontemplate.replace(/\{identifier\}/g, plugin.id).replace(/\{name\}/g, plugin.name);
+		options += option;
+	}
+	template = template.replace(/\{options\}/g, options);
+
 	$(document).ready(function() {
 		var $new = $(template.replace(/\{index\}/g, "0").replace(/\{content\}/g, "Please enter your input here."));
 		$("body").append($new);
 	});
-	
+
+	function getPluginById(id) {
+		for (i = 0; i < plugins.length; i++) {
+			if (plugins[i].id === id) {
+				return plugins[i];
+			}
+		}
+		return null;
+	}
+
 	function convert(select) {
 		var $select = $(select);
 		var selectid = $select.attr("id");
@@ -21,23 +95,15 @@
 		var input = $input.val();
 		var conversion = $select.find(":selected").attr("name");
 		var output;
+		var plugin;
 		if ($output.length == 0) {
 			appendNewOutput = true;
 		}
-		switch (conversion) {
+		plugin = getPluginById(conversion);
-			case "CHOOSE":
+		if (plugin !== null) {
-				output = "";
+			output = plugin.convert(input);
-				break;
+		} else {
-			case "base64encode":
+			output = "internal error. Sorry.";
-				output = btoa(input);
-				break;
-			case "base64decode":
-				output = atob(input);
-				break;
-			default:
-				alert("Unknown: " + conversion);
-				output = "ERROR!";
-				break;
 		}
 		if (appendNewOutput) {
 			$output = $(template.replace(/\{index\}/g, "" + outputIndex).replace(/\{content\}/g, output));