83 lines
		
	
	
		
			No EOL
		
	
	
		
			2.1 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			83 lines
		
	
	
		
			No EOL
		
	
	
		
			2.1 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <!DOCTYPE html>
 | |
| <html>
 | |
| <head>
 | |
| <title>encoder-decoder</title>
 | |
| <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
 | |
| <script type="text/javascript">
 | |
| (function($) {
 | |
| 	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>"
 | |
| 		+ "<option name='base64encode'>Base64 encode</option>"
 | |
| 		+ "<option name='base64decode'>Base64 decode</option>"
 | |
| 		+ "</select></div>";
 | |
| 	$(document).ready(function() {
 | |
| 		var $new = $(template.replace(/\{index\}/g, "0").replace(/\{content\}/g, "Please enter your input here."));
 | |
| 		$("body").append($new);
 | |
| 	});
 | |
| 	
 | |
| 	function convert(select) {
 | |
| 		var $select = $(select);
 | |
| 		var selectid = $select.attr("id");
 | |
| 		var inputIndex = +selectid.split("-")[1];
 | |
| 		var outputIndex = inputIndex + 1;
 | |
| 		var $input = $("#input-" + inputIndex);
 | |
| 		var $output = $("#input-" + outputIndex);
 | |
| 		var appendNewOutput = false;
 | |
| 		var input = $input.val();
 | |
| 		var conversion = $select.find(":selected").attr("name");
 | |
| 		var output;
 | |
| 		if ($output.length == 0) {
 | |
| 			appendNewOutput = true;
 | |
| 		}
 | |
| 		switch (conversion) {
 | |
| 			case "CHOOSE":
 | |
| 				output = "";
 | |
| 				break;
 | |
| 			case "base64encode":
 | |
| 				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));
 | |
| 			$("body").append($output);
 | |
| 		} else {
 | |
| 		$output.val(output);
 | |
| 		}
 | |
| 
 | |
| 		clean(outputIndex);
 | |
| 	}
 | |
| 
 | |
| 	function clean(index) {
 | |
| 		var found = true;
 | |
| 		var $wrapper;
 | |
| 		$("#type-" + index + " option[name=CHOOSE]").prop("selected", true);
 | |
| 		index++;
 | |
| 		do {
 | |
| 			$wrapper = $("#wrapper-" + index);
 | |
| 			if ($wrapper.length > 0) {
 | |
| 				$wrapper.remove();
 | |
| 				index++;
 | |
| 			} else {
 | |
| 				found = false;
 | |
| 			}
 | |
| 		} while (found);
 | |
| 	}
 | |
| 
 | |
| 	var den = {};
 | |
| 	den.convert = convert;
 | |
| 	window.den = window.den || den;
 | |
| 	
 | |
| })(jQuery);
 | |
| </script>
 | |
| </head>
 | |
| <body>
 | |
| </body>
 | |
| </html> |