diff options
author | Edwin Eefting <edwin@datux.nl> | 2010-12-17 15:16:28 (GMT) |
---|---|---|
committer | Edwin Eefting <edwin@datux.nl> | 2010-12-17 15:16:28 (GMT) |
commit | 97d5a183d781f5ad637054b0fb4ef8d214540cce (patch) | |
tree | f6728b45cb60587a8fd14427b8fc201249cf1368 | |
parent | b334783322a7c036aad6a73e665b7a277885bbca (diff) |
fixed chat among other stuffpaperlayout
-rw-r--r-- | wwwdir/paper.html | 318 |
1 files changed, 267 insertions, 51 deletions
diff --git a/wwwdir/paper.html b/wwwdir/paper.html index a5eb44d..de14c27 100644 --- a/wwwdir/paper.html +++ b/wwwdir/paper.html @@ -57,12 +57,24 @@ var aspectRatio=1.7777; + var loading=true; + + //chat stuff + var chatLastClientName=""; + var chatTypeHere="Type hier je bericht..."; //filter dangerous stuff from user input. //NOTE: do this when you receive the data back from the server, not when sending to it! - function filterInput(s) + function filterInput(s,max) { - return(s.replace(/</g,"<").replace(/>/g,">")); + if (s==null) + return; + ret=s.replace(/</g,"<").replace(/>/g,">"); + + if (max!=null && ret.length>max) + ret=ret.substr(0,max); + + return(ret); } //calculate browser coordinates to server coordinates @@ -83,14 +95,6 @@ return ("<a class='paperLink' href='paper.html?id="+id+"'>"+text+"</a>"); } - function addChat(html) - { - $('#chatList').append(html); - - //scroll to end - var objDiv = document.getElementById("chatList"); - objDiv.scrollTop = objDiv.scrollHeight; - } //highlight an object @@ -115,6 +119,17 @@ element.removeAttribute('fill-opacity'); } } + + function chatPrintOnline() + { + var online=$('.chatClient').length-1; + if (online==0) + $("#chatBar").html("<div class='chatOnline'>Nodig vrienden uit!</div>"); + else if (online==1) + $("#chatBar").html("<div class='chatOnline'>1 vriend online</div>"); + else + $("#chatBar").html("<div class='chatOnline'>"+online+" vrienden online</div>"); + } /*** Drawing protocol @@ -150,10 +165,12 @@ normally only set when requesting a refresh. #### Cursor indication - cursor: Cursor and name information: x,y,clientName + cursor: Cursor and name information: x,y,clientName. + The server keeps a list of cursors and sends them when a client joins. ### Chat - chat: Chat text: text, clientName + chat: Chat text: text, clientName. + The server keeps the history and sends it if a client joins. ' */ @@ -252,9 +269,10 @@ { //NOTE: this also works around a weird chromuim refresh bug. $("#loading").hide(); + loading=false; } - //update cursor? + //update cursor/client name? if (msg["cursor"]!=null && msg["src"]!=ourId) { var cursor=document.getElementById('cursor'+msg["src"]); @@ -308,18 +326,63 @@ //update cursor clientname? if (msg["cursor"]["clientName"]!=null) { + //update cursor text: var e=document.getElementById('clientName'+msg["src"]); - e.childNodes[0].data=msg["cursor"]["clientName"]; + e.childNodes[0].data=filterInput(msg["cursor"]["clientName"],15); } - } - //update chat? + + //update chat client list + if (msg["cursor"]!=null && msg["cursor"]["clientName"]!=null) + { + var clientName=filterInput(msg["cursor"]["clientName"],15); + + var e=document.getElementById('chatClient'+msg["src"]); + if (e==null) + { + $("#chatClients").append("<div id='chatClient"+msg["src"]+"' class='chatClient'>"+clientName+"</div>"); + chatPrintOnline(); + } + else + e.childNodes[0].data=clientName; + + } + + //received chat text? if (msg["chat"] != null) { - addChat( - "<b>"+filterInput(msg["chat"]["clientName"])+"</b> "+filterInput(msg["chat"]["text"])+"<br>" - ); + var clientName=filterInput(msg["chat"]["clientName"],15); + var text=filterInput(msg["chat"]["text"]); + + if (clientName!=chatLastClientName) + { + //add client name: + $('#chatList').append("<div class='chatName'>"+clientName+":</div>"); + chatLastClientName=clientName; + } + + $('#chatList').append("<div class='chatText'>"+text+"</div>"); + + //hidden? + if ($("#chatBox").css("display")=="none") + { + if (!loading) + { + var html="<b>"+clientName+"</b>: "+text; + if (html.length>30) + html=html.substr(0,30)+"..."; + $("#chatBar").html(html); + $("#chatBar").effect("highlight","{}",1000); + } + } + else + { + //scroll to end + var objDiv = document.getElementById("chatList"); + objDiv.scrollTop = objDiv.scrollHeight; + } + } drawing.unsuspendRedraw(suspendID); @@ -333,6 +396,9 @@ { drawing.removeChild(cursor); } + + $('#chatClient'+msg["clientId"]).remove(); + chatPrintOnline(); }); @@ -633,7 +699,7 @@ } //set the name input field - $("#clientName").val(clientName); + $("#chatClientName").val(clientName); //width slider $("#width").slider( @@ -667,32 +733,77 @@ //user changes name - $("#clientName").keyup(function(m) + $("#chatClientName").keyup(function(m) { - $.setCookie('clientName', $("#clientName").val(), { duration:365, path:"/" }); + $.setCookie('clientName', $("#chatClientName").val(), { duration:365, path:"/" }); sendDraw({ 'cursor':{ - 'clientName':$("#clientName").val() + 'clientName':$("#chatClientName").val() } }); }); - //user presses enter in chatbox: + //user presses enter in chatInput: $("#chatInput").keydown(function(m) { if (m.keyCode==13) { sendDraw( { 'chat':{ - 'clientName' :$("#clientName").val(), + 'clientName' :$("#chatClientName").val(), 'text' :$("#chatInput").val() } }); - $("#chatInput").val(""); } }); + $("#chatInput").keyup(function(m) + { + if (m.keyCode==13) + $("#chatInput").val(""); + }); + + $("#chatInput").focusin(function(m) + { + $("#chatInput").removeClass("chatTypeHere"); + if ($("#chatInput").val()==chatTypeHere) + $("#chatInput").val(""); + }); + + $("#chatInput").focusout(function(m) + { + if ($("#chatInput").val()=="") + { + $("#chatInput").addClass("chatTypeHere"); + $("#chatInput").val(chatTypeHere); + } + }); + + + //hide/show chatbox + $("#chatBar").click(function() + { + if ($("#chatBox").css("display")=="none") + { + $("#chatBox").show(); + + //scroll to end + var objDiv = document.getElementById("chatList"); + objDiv.scrollTop = objDiv.scrollHeight; + + $("#chatInput").focus(); + $("#drawingSize").css("right",$("#chatBox").width()); + $(window).resize(); + chatPrintOnline(); + } + else + { + $("#chatBox").hide(); + $("#drawingSize").css("right","0"); + $(window).resize(); + } + }); //a tool is clicked $(".tool").click(function(m) @@ -858,32 +969,25 @@ //tell people who we are and set random mouse position sendDraw({ 'cursor':{ - 'clientName':$("#clientName").val(), + 'clientName':$("#chatClientName").val(), 'x':Math.round(9000*Math.random())+1000, 'y':Math.round(9000*Math.random())+1000 } }); }); - - - - - - - </script> <style> - .client + .chatClient { margin-top:2px; - padding:5px; - border-bottom-style:dashed; - border-bottom-color:#aaaaaa; + border-bottom-style:solid; + border-bottom-color:#dddddd; + border-bottom-width:1px; } @@ -905,7 +1009,28 @@ border-width:2px; margin:1px; } + + .chatTypeHere + { + color:#aaaaaa; + } + + .chatOnline + { + font-weight: bold; + + } + .chatName + { + font-weight: bold; + } + + .chatText + { + + } + img { border:0; @@ -938,6 +1063,7 @@ } + </style> </head> @@ -956,7 +1082,10 @@ top: 0; width: 100%; height:4em; - border-style:none;'> + border-style:none; + font-style:italic; + color:#aaaaaa'> + Internet papier - nog volop in ontwikkeling </div> @@ -970,6 +1099,8 @@ border-style:none;'> </div> + + <div id='toolbox' class='ui-widget-content' style=' position:absolute; left:0; @@ -1052,18 +1183,6 @@ </div> - <div id='loading' style=' - position:absolute; - left:0; - right:0; - top:0; - bottom:0; - background-fill:none; - text-align:center; - color: red; - font-size: 1000%;'> - Loading... - </div> <div id='drawingSize' style=' @@ -1094,6 +1213,103 @@ </div> + <div style=' + position:absolute; + top: 1em; + width: 12em; + right:1em; + border-style:none; + color: #ffffff; + border-width:1px; + border-color:#dddddd; + border-style:solid; + padding-left:3em;'> + <input id='chatClientName' style='border:none;padding:0;margin:0;' type='text' size=10></input> + </div> + + <div id='chatBar' style=' + position:absolute; + cursor:pointer; + top: 4em; + width: 15em; + right:0; + height:1.5em; + border-style:none; + color: #ffffff; + padding-top:.5em; + background-color:#FF8400; + padding-left:1em;'> + </div> + + <div id='chatBox' style=' + position:absolute; + top: 6em; + width: 16em; + right:0; + bottom:0; + background-color:#ffffff; + border-style:solid; + border-color:#FF8400; + border-width:1px; + display:none; + '> + <div id='chatClients' style=' + position:absolute; + top: 0em; + left: 0em; + right: 0em; + background-color:#FFF0E9; + border-style:none; + max-height:5em; + overflow: auto; + padding:1em; + '> + </div> + + <div id='chatList' style=' + position:absolute; + top: 7em; + left: 0em; + right: 0em; + bottom: 5em; + padding:1em; + background-color:#ffffff; + border-style:none; + overflow: auto; + '> + <div>Edwin</div> + <div>Edwin</div> + <div>Edwin</div> + <div>Edwin</div> + <div>Edwin</div> + </div> + + <textarea id='chatInput' rows=3 cols=30 style=' + position:absolute; + bottom: 1em; + left: 1em; + height: 4em; + background-color:#ffffff; + border-style:solid; + border-color:#FF8400; + border-width:1px; + '> + </textarea> + </div> + + + <div id='loading' style=' + position:absolute; + left:0; + right:0; + top:0; + bottom:0; + background-fill:none; + text-align:center; + color: red; + font-size: 1000%;'> + Loading... + </div> </body> </html>
\ No newline at end of file |