diff --git a/web/emoticons/1.png b/web/emoticons/1.png new file mode 100644 index 0000000..81a8396 Binary files /dev/null and b/web/emoticons/1.png differ diff --git a/web/emoticons/2.png b/web/emoticons/2.png new file mode 100644 index 0000000..756766d Binary files /dev/null and b/web/emoticons/2.png differ diff --git a/web/index.html b/web/index.html index e421bcc..a245f70 100755 --- a/web/index.html +++ b/web/index.html @@ -1,6 +1,7 @@ + diff --git a/web/main.js b/web/main.js index 2a658a6..ca93b6f 100644 --- a/web/main.js +++ b/web/main.js @@ -73,8 +73,12 @@ function showOverview(){ */ function onSubmitMessage(){ var msg = document.getElementById('message').value.replace(/\r?\n/g, "
"); - var namm = document.getElementById('name').value || "anonymous"; + var namm = document.getElementById('name').value; + if ( !namm || namm === "" ) { + namm = "anonymous"; + } addOutboxItem( namm, msg ); + return false; } function addOutboxItem( namm, message ){ @@ -99,7 +103,6 @@ function addOutboxItem( namm, message ){ document.getElementById('message').value = ''; showOverview(); - return false; } function checkOutbox() { @@ -195,12 +198,32 @@ var localStorageArray = []; contentString += '
  • '+ '
    On ' + datereadable + ' ' + orderStorage[i].user +' wrote:
    ' + - '
    ' + orderStorage[i].message + '
    ' + + '
    ' + parseEmoticons( orderStorage[i].message ) + '
    ' + ' from '+orderStorage[i].node + '' + ' via '+orderStorage[i].hops+' nodes
    • '; } document.getElementById( 'inbox' ).innerHTML = contentString; } +function parseEmoticons( inputStr ){ + //if ( inputStr.indexOf( ' -1 ) { + // return inputStr; + //} + + var emoticons = [ + { + text: ':)', + image: '1.png' + }, + { + text:';)', + image: '2.png' + } + ]; + for ( var i = 0; i < emoticons.length; i++ ){ + inputStr = inputStr.split(emoticons[i].text).join(''); + } + return inputStr; +} function getReadableDate( date ) { var day = date.getDate(); if (day < 10) day = '0' + day; @@ -354,28 +377,19 @@ function initPhotoStuff(){ function submitImage(){ - - // convert canvas to html/base64 image var image = new Image(); //create new image holder - image.id = "outputImage"; //id it var canvas = document.getElementById('canvas3'); // choose canvas element to convert var dataURL = canvas.toDataURL(); // convert cabvas to data url we can handle image.src = dataURL; - //var outputImg = document.createElement("img"); // create img tag - //outputImg.src = dataURL; // assign dataurl to image tag 'src' option - //document.body.appendChild(outputImg); // append img to body (to be assigned to place holder div) - - // append data to text area...not working yet.. - //var photo = document.getElementById('message'); // add data url to message field... not working yet - //outputImg.src = "" // construct image tag + img data... - //photo += outputImg.src; - //photo.innerHTML += outputImg.src; - - //sendMessage( new Date().getTime(), dataURL ); - //sendMessage( new Date().getTime(), "random "+Math.random()*1000 ); - var namm = document.getElementById('photo-name').value || "anonymous"; + image.className = 'photo-message'; + + var namm = document.getElementById('photo-name').value; + if( !namm || namm == "" ){ + namm = "anonymous"; + } addOutboxItem( namm, image.outerHTML ); + showOverview(); return false; } @@ -386,11 +400,11 @@ function initCanvas(context){ context.fill(); context.beginPath(); context.rect(0,0, imgDim, imgDim); - context.fillStyle = 'yellow'; + context.fillStyle = 'white'; context.fill(); - context.lineWidth = 7; - context.strokeStyle = 'black'; - context.stroke(); + // context.lineWidth = 7; + // context.strokeStyle = 'black'; + // context.stroke(); } // create file reader diff --git a/web/style.css b/web/style.css index 09d613e..8089d4c 100755 --- a/web/style.css +++ b/web/style.css @@ -13,7 +13,7 @@ body{ padding:20px; } -img{ +img.photo-message{ /* disable anti aliasing */ image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; @@ -23,7 +23,10 @@ img{ image-rendering: optimize-contrast; -ms-interpolation-mode: nearest-neighbor; } - +img.emo { + width: 22px; + height: 22px; +} #input-footer{ position: fixed; @@ -128,7 +131,6 @@ margin:10px; } .rot-right{ - // margin-right: 60px; display:inline; width:50%; float:right; @@ -244,7 +246,6 @@ margin:10px; -webkit-appearance: none; -moz-appearance: none; outline: none; - //border: 1px solid #bbb; border:0; -webkit-border-radius: 13px; -moz-border-radius: 13px; @@ -291,12 +292,10 @@ hr{ } .messages ul{ - width:100%; padding:0px; } .messages li{ list-style: none; - width:100%; } .messages .message-block { padding:30px;