js/main.js

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