Support for private messages

This commit adds support for private messages.
Clicking on a roster item opens a "bubble" with which
you can talk to a participant privately.
If a participant sends you a private message such a
bubble is opened too.
Bubbles can be moved and closed.
Moving is known to be problematic in Opera (at least under Linux).
Redrawing seems to be broken.

diff --git a/main.js b/main.js
index 13ab10a73b8c38aa5495d740d14f47430c3607aa..2ed9acef9159bc94562e32073f60a4c1c4e08eaa 100644 (file)
--- a/main.js
+++ b/main.js
@@ -77,12 +77,30 @@ function handleDisconnected() {
        document.getElementById('entry').style.display  = 'none';
 }
 
+function addBubble(nick) {
+       id = nick + 'Bubble';
+       if (!document.getElementById(id)) {
+               root = document.getElementsByTagName('body')[0];
+               var div = '';
+               div += '<div id="' + id + '" class="bubble" onmousedown="startDrag(this)">';
+               div += '<a href="#" onclick="' +"document.getElementById('" + id + "').style.display='none'" + '">Close</a>';
+               div += '<div id="' + id + 'Chat" class="bubbleChat"></div>';
+               div += '<form id="' + id + 'Form" class="bubbleForm" onsubmit="return sendChatMessage(this,' + "'" + nick + "');" + '" action="#">';
+               div += '<input type="text" name="text" id="' + id + 'Text" class="bubbleForm"/>';
+               div += '</form>';
+               div += '</div>';
+               root.innerHTML += div;
+       }
+       document.getElementById(id).style.display = 'block';
+}
+
 function handleMessage(aJSJaCPacket) {
        var html = '';
+       sender = aJSJaCPacket.getFromJID().getResource()
        html += '<div class="msg">';
-       if (aJSJaCPacket.getFromJID().getResource()) {
+       if (sender) {
                html += '<span class="sender">';
-               html += aJSJaCPacket.getFromJID().getResource();
+               html += sender;
                html += ':</span> ';
                html += aJSJaCPacket.getBody().htmlEnc() + '</div>';
        } else {
@@ -90,8 +108,14 @@ function handleMessage(aJSJaCPacket) {
                html += aJSJaCPacket.getBody().htmlEnc() + '</span></div>';
        }
 
-       document.getElementById('chat').innerHTML += html;
-       document.getElementById('chat').lastChild.scrollIntoView();
+       if (aJSJaCPacket.getType() == 'chat') {
+               addBubble(sender);
+               document.getElementById(id + 'Chat').innerHTML += html;
+               document.getElementById(id + 'Chat').lastChild.scrollIntoView();
+       } else {
+               document.getElementById('chat').innerHTML += html;
+               document.getElementById('chat').lastChild.scrollIntoView();
+       }
 }
 
 function handlePresence(aJSJaCPacket) {
@@ -103,7 +127,7 @@ function handlePresence(aJSJaCPacket) {
                element = document.getElementById(nick);
                roster_list.removeChild(element);
        } else {
-               roster_list.innerHTML += '<li id="' + nick + '">' + nick + '</li>';
+               roster_list.innerHTML += '<li id="' + nick + '" onclick="addBubble(' + "'" + nick + "')" + '" >' + nick + '</li>';
        }
 }
 
@@ -144,6 +168,27 @@ function sendMessage(aForm) {
        return false;
 }
 
+function sendChatMessage(aForm, to) {
+       if (aForm.text.value) {
+               message = new JSJaCMessage();
+               message.setBody(aForm.text.value);
+               message.setType('chat');
+               message.setTo(room + '/' + to);
+               con.send(message);
+               aForm.text.value = '';
+               var html = '';
+               html += '<div class="msg">';
+               html += '<span class="sender">';
+               html += nickname;
+               html += ':</span> ';
+               html += message.getBody().htmlEnc() + '</div>';
+               document.getElementById(to + 'BubbleChat').innerHTML += html;
+               document.getElementById(to + 'BubbleChat').lastChild.scrollIntoView();
+
+       }
+       return false;
+}
+
 function randomString() {
        var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
        var string_length = 20;
@@ -155,10 +200,37 @@ function randomString() {
        return randomstring;
 }
 
+var dragElement = null;
+var mouseX = 0;
+var mouseY = 0;
+var offX = 0;
+var offY = 0;
+
+function startDrag(element) {
+       dragElement = element;
+       offX = mouseX - dragElement.offsetLeft;
+       offY = mouseY - dragElement.offsetTop;
+}
+
+function doDrag(eve) {
+       mouseX = eve.pageX;
+       mouseY = eve.pageY;
+
+       if (dragElement) {
+               dragElement.style.left = (mouseX - offX) + 'px';
+               dragElement.style.top = (mouseY - offY) + 'px';
+       }
+}
 
+function stopDrag(eve) {
+       dragElement = null;
+}
 
 onunload = function() {
        if (con.connected())
                con.disconnect();
 }
 
+onmousemove = doDrag;
+
+onmouseup = stopDrag;

diff --git a/style.css b/style.css
index d56f2aebd7c072f353ead64db5cd4fa392155040..32b7afca6065c4a53aeba941cb94ff94c0b22d5c 100644 (file)
--- a/style.css
+++ b/style.css
@@ -85,3 +85,30 @@ html, body {
 .server {
        color: green;
 }
+
+.bubble {
+       position: fixed;
+       width: 30%;
+       height: 30%;
+       right: 0px;
+       margin-right: 15%;
+       top: 2em;
+       background-color: white;
+       color: black;
+}
+
+.bubble a {
+       color: pink;
+       position: absolute;
+       right: 0px;
+       bottom: -1.5em;
+}
+
+.bubbleChat {
+       height: 100%;
+       overflow: auto;
+}
+
+.bubbleForm {
+       width: 90%;
+}