From: Florian Zeitz <florob@babelmonkeys.de>
Date: Tue, 3 Jun 2008 01:10:20 +0000 (+0200)
Subject: Support for private messages
X-Git-Url: http://git.babelmonkeys.de/?p=xmppchat.git;a=commitdiff_plain;h=ca57ec7f2f9247c44a572e5e85926eaed6a277f9

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 13ab10a..2ed9ace 100644
--- 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 d56f2ae..32b7afc 100644
--- 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%;
+}