summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorEdwin Eefting <edwin@datux.nl>2010-12-17 15:16:28 (GMT)
committer Edwin Eefting <edwin@datux.nl>2010-12-17 15:16:28 (GMT)
commit97d5a183d781f5ad637054b0fb4ef8d214540cce (patch)
treef6728b45cb60587a8fd14427b8fc201249cf1368
parentb334783322a7c036aad6a73e665b7a277885bbca (diff)
fixed chat among other stuffpaperlayout
-rw-r--r--wwwdir/paper.html318
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