fixed chat among other stuffpaperlayout

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,"&lt;").replace(/>/g,"&gt;"));
+ if (s==null)
+ return;
+ ret=s.replace(/</g,"&lt;").replace(/>/g,"&gt;");
+
+ 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