js/main.js

   1 var connection = null;
   2 var nickname;
   3
   4 function doLogin(aForm) {
   5         if (!aForm.nickname.value)
   6                 return false;
   7         try {
   8                 connection = new Strophe.Connection(BOSH_LOCATION);
   9                 connection.connect(jid, password, onConnect);
  10
  11                 nickname = aForm.nickname.value;
  12         } catch (e) {
  13                 alert(e);
  14         } finally {
  15                 return false;
  16         }
  17 }
  18
  19 function onConnect(status) {
  20         if (status == Strophe.Status.CONNFAIL) {
  21                 handleError('Failed to connect');
  22         } else if (status == Strophe.Status.DISCONNECTED) {
  23                 handleDisconnected();
  24         } else if (status == Strophe.Status.CONNECTED) {
  25                 // Add handlers connection.addHandler(callback, namespace, stanza_name, type, id, from)
  26                 connection.addHandler(handleMessage, null, 'message', null, null, null);
  27                 connection.addHandler(handlePresence, null, 'presence', null, null, null);
  28                 connection.addHandler(handleIQ, null, 'iq', null, null, null);
  29
  30                 connection.addHandler(handleIqVersion, Strophe.NS.VERSION, 'iq', null, null, null);
  31                 connection.addHandler(handleIqVersion, 'urn:xmpp:time', 'iq', null, null, null);
  32
  33                 connection.send($pres().tree());
  34                 connection.send($pres({to: room + '/' + nickname}).tree());
  35
  36                 // Make things (in)visible
  37                 $('#login').hide();
  38                 $('#chat').show();
  39                 $('#roster').show();
  40                 $('#entry').show();
  41         }
  42 }
  43
  44 function handleError(error) {
  45         alert("An error occured:" + error);
  46         handleDisconnected();
  47 }
  48
  49 function handleDisconnected() {
  50         // Make things (in)visible
  51         $('#login').show();
  52         $('#chat').hide();
  53         $('#roster').hide();
  54         $('#entry').hide();
  55 }
  56
  57 function addBubble(nick) {
  58         id = nick + 'Bubble';
  59         if (!document.getElementById(id)) {
  60                 var div = '';
  61                 div += '<div id="' + id + '" class="bubble" onmousedown="startDrag(this)" style="display: none">';
  62                 div += '<a href="#" onclick="' +"$('#" + id + "').hide('slow')" + '">Close</a>';
  63                 div += '<div id="' + id + 'Chat" class="bubbleChat"></div>';
  64                 div += '<form id="' + id + 'Form" class="bubbleForm" onsubmit="return sendChatMessage(this,' + "'" + nick + "');" + '" action="#">';
  65                 div += '<input type="text" name="text" id="' + id + 'Text" class="bubbleForm"/>';
  66                 div += '</form>';
  67                 div += '</div>';
  68                 $('body').append(div);
  69         }
  70         $('#'+id).show('slow');
  71 }
  72
  73 function handleMessage(msg) {
  74         var html = '';
  75         var sender = Strophe.getResourceFromJid(msg.getAttribute('from'));
  76         if (sender) {
  77                 sender = Strophe.xmlescape(sender);
  78         } else {
  79                 sender = false;
  80         }
  81         var type = msg.getAttribute('type');
  82         var body = msg.getElementsByTagName('body')[0];
  83         if (body) {
  84                 body = Strophe.xmlescape(Strophe.getText(body));
  85         } else {
  86                 body = false;
  87         }
  88         var subject = msg.getElementsByTagName('subject')[0];
  89         if (subject) {
  90                 subject = Strophe.xmlescape(Strophe.getText(subject));
  91         } else {
  92                 subject = false;
  93         }
  94
  95         html += '<div class="msg">';
  96         if (body) {
  97                 if (sender) {
  98                         if (body.search(/^\/me/) == 0) {
  99                                 body = body.replace(/^\/me/, sender);
 100                                 html += '<span class="sender">';
 101                                 html += body;
 102                                 html += '</span></div>';
 103                         } else {
 104                                 html += '<span class="sender">';
 105                                 html += sender;
 106                                 html += ':</span> ';
 107                                 html += body + '</div>';
 108                         }
 109                 } else {
 110                         html += '<span class="server">';
 111                         html += body + '</span></div>';
 112                 }
 113         } else if (subject) {
 114                 html += '<span class="server">';
 115                 html += "The subject is: " + subject + '</span></div>';
 116         } else {
 117                 return true;
 118         }
 119
 120         if (type == 'chat') {
 121                 addBubble(sender);
 122                 $('#' + id + 'Chat').append(html);
 123                 document.getElementById(id + 'Chat').lastChild.scrollIntoView();
 124         } else {
 125                 $('#chat').append(html);
 126                 document.getElementById('chat').lastChild.scrollIntoView();
 127         }
 128
 129         return true;
 130 }
 131
 132 function handlePresence(presence) {
 133         if (Strophe.getBareJidFromJid(presence.getAttribute('from')) != room)
 134                 return true
 135         roster_list = document.getElementById('roster_list');
 136         nick = Strophe.getResourceFromJid(presence.getAttribute('from'));
 137         type = presence.getAttribute('type');
 138         if (type == 'unavailable') {
 139                 element = document.getElementById(nick);
 140                 roster_list.removeChild(element);
 141                 $('#chat').append('<div class="msg"><span class="server">' + nick + ' left the groupchat</span></div>');
 142         } else {
 143                 roster_list.innerHTML += '<li id="' + nick + '" onclick="addBubble(' + "'" + nick + "')" + '" >' + nick + '</li>';
 144                 $('#chat').append('<div class="msg"><span class="server">' + nick + ' joined the groupchat</span></div>');
 145         }
 146
 147         return true;
 148 }
 149
 150 function handleIQ(iq) {
 151         var to = iq.getAttribute('to');
 152         var from = iq.getAttribute('from');
 153         var type = iq.getAttribute('type');
 154
 155         //FIXME: Clients SHOULD send the content of the original stanza back for analysis
 156
 157         var reply = $iq({to: from, from: to, type: 'error'}).c('error', {type: 'cancel'}).c('feature-not-implemented', {xmlns: 'urn:ietf:params:xml:ns:xmpp-stanzas'});
 158
 159         connection.send(reply.tree());
 160
 161         return true;
 162 }
 163
 164 function handleIqVersion(iq) {
 165         var to = iq.getAttribute('to');
 166         var from = iq.getAttribute('from');
 167
 168         var reply = $iq({type: 'result', to: from, from: to}).c('query', {xmlns: Strophe.NS.VERSION}).c('name').t('XMPPChat').up().c('version').t('preAny').up().c('os').t(navigator.userAgent);
 169
 170         connection.send(reply.tree());
 171
 172         return true;
 173 }
 174
 175 function handleIqTime(iq) {
 176         var now = new Date();
 177         var to = iq.getAttribute('to');
 178         var from = iq.getAttribute('from');
 179
 180         var reply = $iq({type: 'result', from: to, to: from}).c('time', {xmlns: 'urn:xmpp:time'}).c('utc').t(now.getUTCFullYear() + '-' + now.getUTCMonth() + '-' + now.getUTCDate() + 'T' + now.getUTCHours() + ':' + now.getUTCMinutes() + ':' + now.getUTCSeconds + '.' + now.getUTCMilliseconds() + 'Z').up().c('tzo').t(now.getTimezoneOffset()/60 + ':' + now.getTimezoneOffset()%60);
 181
 182         connection.send(reply.tree());
 183
 184         return true;
 185 }
 186
 187 function sendMessage(aForm) {
 188         if (aForm.text.value) {
 189                 message = $msg({type: 'groupchat', to: room}).c('body').t(aForm.text.value);
 190                 connection.send(message.tree());
 191                 aForm.text.value = '';
 192         }
 193         return false;
 194 }
 195
 196 function sendChatMessage(aForm, to) {
 197         if (aForm.text.value) {
 198                 body = aForm.text.value
 199                 message = $msg({type: 'chat', to: room + '/' + to}).c('body').t(body);
 200                 connection.send(message.tree());
 201                 aForm.text.value = '';
 202                 var html = '';
 203                 html += '<div class="msg">';
 204                 html += '<span class="sender">';
 205                 html += nickname;
 206                 html += ':</span> ';
 207                 html += body + '</div>';
 208                 document.getElementById(to + 'BubbleChat').innerHTML += html;
 209                 document.getElementById(to + 'BubbleChat').lastChild.scrollIntoView();
 210
 211         }
 212         return false;
 213 }
 214
 215 var dragElement = null;
 216 var mouseX = 0;
 217 var mouseY = 0;
 218 var offX = 0;
 219 var offY = 0;
 220
 221 function startDrag(element) {
 222         dragElement = element;
 223         offX = mouseX - dragElement.offsetLeft;
 224         offY = mouseY - dragElement.offsetTop;
 225 }
 226
 227 function doDrag(eve) {
 228         mouseX = eve.pageX;
 229         mouseY = eve.pageY;
 230
 231         if (dragElement) {
 232                 dragElement.style.left = (mouseX - offX) + 'px';
 233                 dragElement.style.top = (mouseY - offY) + 'px';
 234         }
 235 }
 236
 237 function stopDrag(eve) {
 238         dragElement = null;
 239 }
 240
 241 onunload = function() {
 242         if (connection) {
 243                 connection.disconnect();
 244         }
 245 }
 246
 247 onmousemove = doDrag;
 248
 249 onmouseup = stopDrag;