83 lines
2.1 KiB
HTML
83 lines
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>
|