rra/meshenger
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

emoticons, many bugfixes

Browse Source
This commit is contained in:
jngrt 2015-05-20 01:36:01 +02:00
parent 801b87590b
commit 1efcae7b48
5 changed files with 42 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
web/emoticons/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
web/emoticons/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

1
web/index.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" /> <meta http-equiv="expires" content="0" />

58
web/main.js
View File

@ -73,8 +73,12 @@ function showOverview(){
*/ */
function onSubmitMessage(){ function onSubmitMessage(){
var msg = document.getElementById('message').value.replace(/\r?\n/g, "<br />"); var msg = document.getElementById('message').value.replace(/\r?\n/g, "<br />");
var namm = document.getElementById('name').value || "anonymous"; var namm = document.getElementById('name').value;
if ( !namm || namm === "" ) {
namm = "anonymous";
}
addOutboxItem( namm, msg ); addOutboxItem( namm, msg );
return false;
} }
function addOutboxItem( namm, message ){ function addOutboxItem( namm, message ){
@ -99,7 +103,6 @@ function addOutboxItem( namm, message ){
document.getElementById('message').value = ''; document.getElementById('message').value = '';
showOverview(); showOverview();
return false;
} }
function checkOutbox() { function checkOutbox() {
@ -195,12 +198,32 @@ var localStorageArray = [];
contentString += '<li><div class="message-block" style="background-color:'+color+'">'+ contentString += '<li><div class="message-block" style="background-color:'+color+'">'+
'<div class="date-sender">On ' + datereadable + '<div class="date-sender">On ' + datereadable +
' <b>' + orderStorage[i].user +'</b> wrote:</div>' + ' <b>' + orderStorage[i].user +'</b> wrote:</div>' +
'<div class="message-text">' + orderStorage[i].message + '</div>' + '<div class="message-text">' + parseEmoticons( orderStorage[i].message ) + '</div>' +
' <span class="node '+orderStorage[i].node+'">from '+orderStorage[i].node + '</span>' + ' <span class="node '+orderStorage[i].node+'">from '+orderStorage[i].node + '</span>' +
' <span class="hops '+orderStorage[i].hops+'">via '+orderStorage[i].hops+' nodes</span></div></li>'; ' <span class="hops '+orderStorage[i].hops+'">via '+orderStorage[i].hops+' nodes</span></div></li>';
} }
document.getElementById( 'inbox' ).innerHTML = contentString; document.getElementById( 'inbox' ).innerHTML = contentString;
} }
function parseEmoticons( inputStr ){
//if ( inputStr.indexOf( '<img' ) > -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('<img class="emo" src="/web/emoticons/'+emoticons[i].image+'">');
}
return inputStr;
}
function getReadableDate( date ) { function getReadableDate( date ) {
var day = date.getDate(); var day = date.getDate();
if (day < 10) day = '0' + day; if (day < 10) day = '0' + day;
@ -354,28 +377,19 @@ function initPhotoStuff(){
function submitImage(){ function submitImage(){
// convert canvas to html/base64 image
var image = new Image(); //create new image holder var image = new Image(); //create new image holder
image.id = "outputImage"; //id it
var canvas = document.getElementById('canvas3'); // choose canvas element to convert var canvas = document.getElementById('canvas3'); // choose canvas element to convert
var dataURL = canvas.toDataURL(); // convert cabvas to data url we can handle var dataURL = canvas.toDataURL(); // convert cabvas to data url we can handle
image.src = dataURL; image.src = dataURL;
//var outputImg = document.createElement("img"); // create img tag image.className = 'photo-message';
//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 namm = document.getElementById('photo-name').value;
//var photo = document.getElementById('message'); // add data url to message field... not working yet if( !namm || namm == "" ){
//outputImg.src = "<img src='"+ outputImg.src; +"'/>" // construct image tag + img data... namm = "anonymous";
//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";
addOutboxItem( namm, image.outerHTML ); addOutboxItem( namm, image.outerHTML );
showOverview(); showOverview();
return false; return false;
} }
@ -386,11 +400,11 @@ function initCanvas(context){
context.fill(); context.fill();
context.beginPath(); context.beginPath();
context.rect(0,0, imgDim, imgDim); context.rect(0,0, imgDim, imgDim);
context.fillStyle = 'yellow'; context.fillStyle = 'white';
context.fill(); context.fill();
context.lineWidth = 7; // context.lineWidth = 7;
context.strokeStyle = 'black'; // context.strokeStyle = 'black';
context.stroke(); // context.stroke();
} }
// create file reader // create file reader

11
web/style.css
View File

@ -13,7 +13,7 @@ body{
padding:20px; padding:20px;
} }
img{ img.photo-message{
/* disable anti aliasing */ /* disable anti aliasing */
image-rendering: optimizeSpeed; image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges; image-rendering: -moz-crisp-edges;
@ -23,7 +23,10 @@ img{
image-rendering: optimize-contrast; image-rendering: optimize-contrast;
-ms-interpolation-mode: nearest-neighbor; -ms-interpolation-mode: nearest-neighbor;
} }
img.emo {
width: 22px;
height: 22px;
}
#input-footer{ #input-footer{
position: fixed; position: fixed;
@ -128,7 +131,6 @@ margin:10px;
} }
.rot-right{ .rot-right{
// margin-right: 60px;
display:inline; display:inline;
width:50%; width:50%;
float:right; float:right;
@ -244,7 +246,6 @@ margin:10px;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
outline: none; outline: none;
//border: 1px solid #bbb;
border:0; border:0;
-webkit-border-radius: 13px; -webkit-border-radius: 13px;
-moz-border-radius: 13px; -moz-border-radius: 13px;
@ -291,12 +292,10 @@ hr{
} }
.messages ul{ .messages ul{
width:100%;
padding:0px; padding:0px;
} }
.messages li{ .messages li{
list-style: none; list-style: none;
width:100%;
} }
.messages .message-block { .messages .message-block {
padding:30px; padding:30px;