Basic chat feature, crudely stripped down from Moffit's book.

2 files changed, 101 insertions, 1 deletions

diff --git a/webclient/lib/basic.js b/webclient/lib/basic.js
index 610afd1..d0795d1 100644
--- a/webclient/lib/basic.js
+++ b/webclient/lib/basic.js
@@ -198,6 +198,59 @@ var Alias = {
                 $(this).remove();
              });
         }
+    },
+    
+    onMessage: function (message) {
+        var full_jid = $(message).attr('from');
+        var jid = Strophe.getBareJidFromJid(full_jid);
+        var jid_id = Alias.jid_to_id(jid);
+
+        if ($('#chat-' + jid_id).length === 0) {
+            $('#tabs').tabs('add', '#chat-' + jid_id, jid);
+            $('#chat-' + jid_id).append(
+                "<div class='chat-messages'></div>" +
+                "<input type='text' class='chat-input'>");
+        }
+        
+        $('#chat-' + jid_id).data({jid: full_jid});
+        
+        var body = $(message).find("html > body");
+
+        if (body.length === 0) {
+            body = $(message).find('body');
+            if (body.length > 0) {
+                body = body.text();
+            } else {
+                body = null;
+            }
+        } else {
+            body = body.contents();
+            var span = $("<span></span>");
+            body.each(function () {
+                if (document.importNode) {
+                    $(document.importNode(this, true)).appendTo(span);
+                } else {
+                    // IE workaround
+                    span.append(this.xml);
+                }
+            });
+
+            body = span;
+        }
+
+        if (body) {
+            // add the new message
+            $('#chat-' + jid_id + ' .chat-messages').append(
+                "<p class='chat-message'><span class='chat-name'>" +
+                Strophe.getNodeFromJid(jid) +
+                "</span><span class='chat-text'></span></p>");
+
+            $('#chat-' + jid_id + ' .chat-message:last .chat-text')
+                .append(body);
+
+        }
+
+        return true;
     }
    
 };
@@ -223,6 +276,7 @@ $(document).ready(function(){
    connection.rawInput = rawInput;
    connection.rawOutput = rawOutput;
    Alias.connection = connection;
+   Alias.connection.addHandler(Alias.onMessage, null, "message", "chat");
 
    $('#login').dialog({
        autoOpen: true,
@@ -270,6 +324,29 @@ $(document).ready(function(){
 
        $('#chat-' + id + ' input').focus();
    });
+   
+   $('.chat-input').live('keypress', function (ev) {
+       var jid = $(this).parent().data('jid');
+
+       if (ev.which === 13) {
+           ev.preventDefault();
+
+           var body = $(this).val();
+
+           var message = $msg({to: jid, "type": "chat"})
+               .c('body').t(body).up()
+               .c('active', {xmlns: "http://jabber.org/protocol/chatstates"});
+           Alias.connection.send(message);
+
+           $(this).parent().find('.chat-messages').append(
+               "<p class='chat-message'><span class='chat-name me'>" + 
+               Strophe.getNodeFromJid(Alias.connection.jid) +
+               "</span><span class='chat-text'>" + body +
+               "</span></p>");
+
+           $(this).val('');
+       } 
+   });
 });
 
 
diff --git a/webclient/style/alias.css b/webclient/style/alias.css
index 235dd76..1a05bbc 100644
--- a/webclient/style/alias.css
+++ b/webclient/style/alias.css
@@ -80,7 +80,30 @@ input
 .chat-messages{
 	border:1px solid #dddddd;
 	height:80%;
-	margin-bottom:10px;	
+	margin-bottom:10px;
+	overflow : auto;
+}
+
+.chat-message{
+	margin: 0px;	
+}
+
+.chat-name{
+	margin-right:10px;
+	font-weight:bold;
+	color : #0073EA;
+}
+
+.me{
+	color : #FF0084;	
+}
+
+.chat-name:before{
+	content : "<"
+}
+
+.chat-name:after{
+	content : ">"	
 }
 
 .chat-input{