mmk2410/morse-converter-web
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Fixes and Design Improvements

Browse source
This commit is contained in:
mmk2410 2015-04-16 22:30:23 +02:00
parent 945b5838e1
commit 4d6006e99b
6 changed files with 55 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
index.html
View file

@ -11,8 +11,8 @@
<link href="http://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet" type="text/css"> <link href="http://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet" type="text/css">
<script src="js/web/web.js"></script> <script src="js/web/web.js"></script>
<script src="js/engine/DecodeWrittenMorse.js"></script> <script src="js/engine/EncryptWrittenMorse.js"></script>
<script src="js/engine/EncodeWrittenMorse.js"></script> <script src="js/engine/DecryptWrittenMorse.js"></script>
</head> </head>
<body> <body>
@ -32,8 +32,8 @@
<textarea class="input" id="textarea">Enter your text.</textarea> <textarea class="input" id="textarea">Enter your text.</textarea>
<div class="carddivider"></div> <div class="carddivider"></div>
<div class="cardbuttons"> <div class="cardbuttons">
<span class="cardbutton" onclick="encode()">ENCODE</span> <span class="cardbutton" onclick="encrypt()">ENCRYPT</span>
<span class="cardbutton" onclick="decode()">DECODE</span> <span class="cardbutton" onclick="decrypt()">DECRYPT</span>
</div> </div>
</div> </div>
<div class="card" id="outputcard"> <div class="card" id="outputcard">

10
js/engine/EncodeWrittenMorse.js → js/engine/DecryptWrittenMorse.js
View file

@ -1,4 +1,4 @@
function encodeWrittenMorseManager(inputMessage) { function decryptWrittenMorseManager(inputMessage) {
if(inputMessage === ""){ if(inputMessage === ""){
return "Please enter at least one character"; return "Please enter at least one character";
} else { } else {
@ -6,7 +6,13 @@ function encodeWrittenMorseManager(inputMessage) {
inputMessage = inputMessage.substring(0, message.length() - 1); inputMessage = inputMessage.substring(0, message.length() - 1);
} }
// Variables // Variables
var input = inputMessage.toUpperCase() + "#"; var input = inputMessage.toUpperCase();
if(input.endsWith('#') == false){
input = input + "#";
}
while(input.indexOf('\n') != -1){
input = input.replace("\n","")
}
var inputToSign = input; var inputToSign = input;
var output = ""; var output = "";
var d = 0; var d = 0;

5
js/engine/DecodeWrittenMorse.js → js/engine/EncryptWrittenMorse.js
View file

@ -1,4 +1,4 @@
function decodeWrittenMorseManager(message) { function encryptWrittenMorseManager(message) {
if(message == ""){ if(message == ""){
return "Please enter at least one character" return "Please enter at least one character"
} else { } else {
@ -7,6 +7,9 @@ function decodeWrittenMorseManager(message) {
} }
// Variables // Variables
var input = message.toUpperCase() var input = message.toUpperCase()
while(input.indexOf('\n') != -1){
input = input.replace("\n","")
}
var output = "" var output = ""
if (input == "LETTERSPACE") { if (input == "LETTERSPACE") {
output = "#" output = "#"

26
js/web/web.js
View file

@ -18,10 +18,10 @@ function drawer(){
} }
} }
function encode(){ function encrypt(){
var input = $('#textarea').val() var input = $('#textarea').val()
if(wm){ if(wm){
$("#output").text(encodeWrittenMorseManager(input)) $("#output").text(encryptWrittenMorseManager(input))
} else { } else {
//TODO port the normal morse decode engine //TODO port the normal morse decode engine
$("#output").text("The normal morse engine is not ported jet.") $("#output").text("The normal morse engine is not ported jet.")
@ -29,10 +29,10 @@ function encode(){
$('#outputcard').fadeIn(dur) $('#outputcard').fadeIn(dur)
} }
function decode(){ function decrypt(){
var input = $('#textarea').val() var input = $('#textarea').val()
if(wm){ if(wm){
$('#output').text(decodeWrittenMorseManager(input)) $('#output').text(decryptWrittenMorseManager(input))
} else { } else {
//TODO port the normal morse decode engine //TODO port the normal morse decode engine
$("#output").text("The normal morse engine is not ported jet.") $("#output").text("The normal morse engine is not ported jet.")
@ -59,3 +59,21 @@ function about(){
window.location = "http://marcel-kapfer.de/writtenmorse" window.location = "http://marcel-kapfer.de/writtenmorse"
}) })
} }
window.onload = function() {
var t = document.getElementsByTagName('textarea')[0];
var offset= !window.opera ? (t.offsetHeight - t.clientHeight) : (t.offsetHeight + parseInt(window.getComputedStyle(t, null).getPropertyValue('border-top-width'))) ;
var resize = function(t) {
t.style.height = 'auto';
t.style.height = (t.scrollHeight + offset ) + 'px';
}
t.addEventListener && t.addEventListener('input', function(event) {
resize(t);
});
t['attachEvent'] && t.attachEvent('onkeyup', function() {
resize(t);
});
}

9
res/css/main.css
View file

@ -84,16 +84,19 @@ body {
box-shadow: 0px 0px 2px 2px #cecece; box-shadow: 0px 0px 2px 2px #cecece;
display: inline-block; display: inline-block;
margin: 16px; margin: 16px;
float: left; } float: left;
height: auto; }
.input { .input {
width: 100%; width: 100%;
resize: none; resize: none;
border: 0px; border: 0px;
height: 100px; height: auto;
min-height: 100px;
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
font-size: 16px; font-size: 16px;
padding: 20px; } padding: 20px;
clear: both; }
.carddivider { .carddivider {
width: 100%; } width: 100%; }

16
res/css/main.sass
View file

@ -21,6 +21,12 @@ $card-padding: 20px
-ms-box-shadow: $horizontal $vertical $blur $spread $color -ms-box-shadow: $horizontal $vertical $blur $spread $color
box-shadow: $horizontal $vertical $blur $spread $color box-shadow: $horizontal $vertical $blur $spread $color
=hyphens($value)
-moz-hyphens: $value
-ms-hyphens: $value
-webkit-hyphens: $value
hyphens: $value
body body
font-family: $font-stack font-family: $font-stack
background: $body-color background: $body-color
@ -101,15 +107,18 @@ body
display: inline-block display: inline-block
margin: 16px margin: 16px
float: left float: left
height: auto
.input .input
width: 100% width: 100%
resize: none resize: none
border: 0px border: 0px
height: 100px height: auto
min-height: 100px
font-family: $font-stack font-family: $font-stack
font-size: 16px font-size: 16px
padding: $card-padding padding: $card-padding
clear: both
.carddivider .carddivider
@extend .drawerdivider @extend .drawerdivider
@ -140,10 +149,7 @@ body
z-index: 30 z-index: 30
#output #output
-moz-hyphens: auto +hyphens(auto)
-ms-hyphens: auto
-webkit-hyphens: auto
hyphens: auto
word-wrap: break-word word-wrap: break-word