converter/index.html

83 lines
2.1 KiB
HTML
Raw Normal View History

<!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>