scripts/basic.js

   1 var DEBUG = false;
   2 var BOSH_SERVICE = '/http-bind/';
   3
   4 var NS_VCARD = 'vcard-temp';
   5 var NS_CAPS= 'http://jabber.org/protocol/caps';
   6 var NS_PEP = 'http://jabber.org/protocol/pubsub#event';
   7 var NS_TUNE = 'http://jabber.org/protocol/tune';
   8
   9 var localJID = null;
  10 var connection   = null;
  11 var show_log     = true;
  12
  13 var features = new Array(NS_CAPS, NS_TUNE+'+notify', Strophe.NS.DISCO_INFO);
  14 var appName = 'socialXMPP';
  15
  16 var roster = new Array();
  17
  18 function log(msg) {
  19     var entry = $('<div></div>').append(document.createTextNode(msg));
  20     $('#log').append(entry);
  21 }
  22
  23 function rawInput(data) {
  24     log('RECV: ' + data);
  25 }
  26
  27 function rawOutput(data) {
  28     log('SENT: ' + data);
  29 }
  30
  31 function jid2id(jid) {
  32     jid = Strophe.getBareJidFromJid(jid);
  33     return jid.split('@').join('-').split('.').join('-');
  34 }
  35
  36 function populateVCard(e, jid) {
  37     var easy_cases = new Array('FN', 'FAMILY', 'MIDDLE', 'GIVEN', 'NICKNAME', 'BDAY', 'CTRY', 'USERID');
  38     for (var i=0; i<easy_cases.length; i++) {
  39         var text = e.getElementsByTagName(easy_cases[i])[0];
  40         if (text) {
  41             text = Strophe.getText(text);
  42             $('#'+easy_cases[i]).append(Strophe.xmlTextNode(text));
  43         }
  44     }
  45     var avatar = e.getElementsByTagName('PHOTO')[0];
  46     if (avatar) {
  47         var mime = Strophe.getText(avatar.getElementsByTagName('TYPE')[0]);
  48         var binval = Strophe.getText(avatar.getElementsByTagName('BINVAL')[0]);
  49
  50         $("#"+jid2id(jid)+" img").attr('src', 'data:'+mime+';base64,'+binval);
  51         $("#PHOTO img").attr('src', 'data:'+mime+';base64,'+binval);
  52     }
  53     $(e).find('TEL:has(HOME)').each(function() {
  54         $('#TELHOME').append(' ');
  55         $('#TELHOME').append(Strophe.xmlTextNode($(this).find('NUMBER').text()));
  56     });
  57     $(e).find('TEL:has(WORK)').each(function() {
  58         $('#TELWORK').append(' ');
  59         $('#TELWORK').append(Strophe.xmlTextNode($(this).find('NUMBER').text()));
  60     });
  61     $(e).find('EMAIL:has(HOME)').each(function() {
  62         $('#EMAILHOME').append(' ');
  63         $('#EMAILHOME').append(Strophe.xmlTextNode($(this).find('USERID').text()));
  64     });
  65     $(e).find('EMAIL:has(WORK)').each(function() {
  66         $('#EMAILWORK').append(' ');
  67         $('#EMAILWORK').append(Strophe.xmlTextNode($(this).find('USERID').text()));
  68     });
  69
  70     if (!roster[jid2id(jid)].tune.isEmpty()) {
  71         $('#vCard ul').append('<li id="tune"><span class="vCardName">Tune: </span>Listening to '+
  72                         roster[jid2id(jid)].tune.title + ' by ' + roster[jid2id(jid)].tune.artist +
  73                         ' from ' + roster[jid2id(jid)].tune.source + '</li>')
  74     }
  75
  76     $('#vCard').click(function () {
  77         $('#vCard_container').slideUp("normal", function() {
  78                 $('#box-overlay').hide();
  79         });
  80         roster[jid2id(jid)].visible = false;
  81       });
  82
  83     $('#box-overlay').show();
  84     $('#vCard_container').slideDown("normal");
  85     roster[jid2id(jid)].visible = true;
  86 }
  87
  88 function _cbVCard(e) {
  89     var jid = e.getAttribute('from');
  90     if (roster[jid2id(jid)].vCard == "") {
  91         roster[jid2id(jid)].vCard = e;
  92     }
  93     if ($('#vCard_container').is(':visible')) {
  94         $('#vCard_container').hide();
  95     }
  96     $('#vCard_container').empty();
  97     $('#vCard_container').load('vCard.html #vCard', function() {populateVCard(e, jid);});
  98
  99     return false;
 100 }
 101
 102 function _cbOwnVCard(e) {
 103     $('#ownInfo').empty();
 104     $('#ownInfo').load('vCard.html #ownvCard', function() {
 105     var easy_cases = new Array('FN', 'FAMILY', 'MIDDLE', 'GIVEN', 'NICKNAME', 'BDAY', 'CTRY', 'USERID');
 106     for (var i=0; i<easy_cases.length; i++) {
 107         var text = e.getElementsByTagName(easy_cases[i])[0];
 108         if (text) {
 109             text = Strophe.getText(text);
 110             $('#own'+easy_cases[i]).append(Strophe.xmlTextNode(text));
 111         }
 112     }
 113     var avatar = e.getElementsByTagName('PHOTO')[0];
 114     if (avatar) {
 115         var mime = Strophe.getText(avatar.getElementsByTagName('TYPE')[0]);
 116         var binval = Strophe.getText(avatar.getElementsByTagName('BINVAL')[0]);
 117
 118         $("#ownPHOTO img").attr('src', 'data:'+mime+';base64,'+binval);
 119     }
 120     $(e).find('TEL:has(HOME)').each(function() {
 121         $('#ownTELHOME').append(Strophe.xmlTextNode($(this).find('NUMBER').text()));
 122     });
 123     $(e).find('TEL:has(WORK)').each(function() {
 124         $('#ownTELWORK').append(Strophe.xmlTextNode($(this).find('NUMBER').text()));
 125     });
 126     $(e).find('EMAIL:has(HOME)').each(function() {
 127         $('#ownEMAILHOME').append(Strophe.xmlTextNode($(this).find('USERID').text()));
 128     });
 129     $(e).find('EMAIL:has(WORK)').each(function() {
 130         $('#ownEMAILWORK').append(Strophe.xmlTextNode($(this).find('USERID').text()));
 131     });
 132     $('#ownInfo').show();
 133     });
 134
 135     return false;
 136 }
 137
 138 function getVCard(jid) {
 139     var id = connection.getUniqueId('vCardGet');
 140     if (roster[jid2id(jid)].vCard == "") {
 141         var vCardiq = $iq({'to':jid,
 142                         'id':id,
 143                         'type':'get'}
 144                 ).c('vCard', {'xmlns':NS_VCARD});
 145         connection.addHandler(_cbVCard, null, 'iq', 'result', id);
 146         connection.send(vCardiq.tree());
 147     } else {
 148         _cbVCard(roster[jid2id(jid)].vCard);
 149     }
 150 }
 151
 152 function getOwnInfo() {
 153     var id = connection.getUniqueId('vCardGet');
 154     var vCardiq = $iq({'id': id, 'type': 'get'}
 155         ).c('vCard', {'xmlns':NS_VCARD});
 156     connection.addHandler(_cbOwnVCard, null, 'iq', 'result', id);
 157     connection.send(vCardiq.tree());
 158 }
 159
 160 function addFriend(jid, nick) {
 161     roster[jid2id(jid)] = new Buddy(nick, jid);
 162     $('#friends').append('<div class="friend" id="'+jid2id(jid)+'"><img src="imgs/none.png" /><br /><a class="nick">'+nick+'</a></div>');
 163     $('#' + jid2id(jid) + ' img').click(function() {
 164         getVCard(jid);
 165     });
 166     $('#' + jid2id(jid) + ' a').click(function() {
 167         var id = jid2id(jid) + 'Chat';
 168         if ($('#' + id).length <= 0) {
 169             createBubble(jid);
 170         }
 171         $('#' + id).show();
 172     });
 173
 174 }
 175
 176 function _cbRoster(e) {
 177     var query = e.getElementsByTagName('query')[0];
 178     var entries = query.getElementsByTagName('item');
 179     for (var item=0; item<entries.length; item++) {
 180         nick = entries[item].getAttribute('name');
 181         if (!nick) {
 182             nick = entries[item].getAttribute('jid').split('@')[0];
 183         }
 184         addFriend(entries[item].getAttribute('jid'), nick);
 185     }
 186     connection.addHandler(_cbPEP, NS_PEP, 'message');
 187     var initialPresence = $pres().c('show').t('online').up().c('status').t('Hy, I am an socialXMPP instance').up().c('priority').t('1').up().c('c', {xmlns: NS_CAPS, hash: 'sha-1', node: 'http://jabber.babelmonkeys.de', ver: genCaps()}).up();
 188     connection.send(initialPresence.tree());
 189
 190     $('#friends').css('display', 'table');
 191
 192     return false;
 193 }
 194
 195 function getRoster() {
 196     var id = connection.getUniqueId('roster');
 197
 198     var rosteriq = $iq({'id':id,
 199                         'type':'get'}
 200         ).c('query', {'xmlns':Strophe.NS.ROSTER});
 201
 202     connection.addHandler(_cbRoster, null, 'iq', 'result', id);
 203     connection.send(rosteriq.tree());
 204 }
 205
 206 function _cbDisco(e) {
 207     var id = e.getAttribute('id');
 208     var jid = e.getAttribute('from');
 209
 210     if (jid) {
 211         var response = $iq({id: id, type: 'result', to: jid});
 212     } else {
 213         var response = $iq({id: id, type: 'result'});
 214     }
 215     var query = response.c('query', {xmlns: Strophe.NS.DISCO_INFO})
 216     query.c('identity', {category: 'client', type: 'web', name: appName}).up();
 217     for (var i = 0; i < features.length; i++) {
 218         query.c('feature', {'var': features[i]}).up();
 219     }
 220     connection.send(response.tree());
 221
 222     return true;
 223 }
 224
 225 function sendMessage(form, to) {
 226     if (form.text.value) {
 227         var id = jid2id(to) + 'Chat';
 228         var message = $msg({'type': 'chat', 'to': to}).c('body').t(form.text.value);
 229         connection.send(message.tree());
 230         if ($('#' + id + ' p *').length > 0) {
 231             $('#' + id + ' p').append('<br/>');
 232         }
 233         $('#' + id + ' p').append('<span class="receiver">' + localJID + ': </span>');
 234         $('#' + id + ' p').append(form.text.value);
 235         form.text.value = '';
 236     }
 237
 238     return false;
 239 }
 240
 241 function createBubble(jid) {
 242     var id = jid2id(jid) + 'Chat';
 243     $('body').append('<div class="chat" id="' + id + '" onmousedown="startDrag(this)"><a href="#" onclick="$(' + "'#" + id + "'" + ').hide()">Close</a>' +
 244                     '<span class ="chatTitle"> ' + jid + '</span><p></p></div>');
 245     $('#' + id).append('<form id="' + id + 'Form" class="chatForm" onsubmit="return sendMessage(this, \'' + jid + '\');" action="#"><input type="text" name="text" id="' + id + 'Text" class="chatForm" /></form>')
 246     $('#' + id).css( 'top', $('#' + jid2id(jid)).position().top + 40);
 247     $('#' + id).css( 'left', $('#' + jid2id(jid)).position().left + 40);
 248 }
 249
 250
 251 function _cbMessage(msg) {
 252     if ($(msg).attr('type') != 'chat')
 253         return true;
 254     var jid = $(msg).attr('from');
 255     var id = jid2id(jid) + 'Chat';
 256     var body = $(msg).find('body:first').text();
 257     body = escape(body);
 258     body = body.replace(/%0A/g, '<br/>');
 259     body = body.replace(/%3C/g, '&lt;');
 260     body = body.replace(/%3E/g, '&gt;');
 261     body = body.replace(/%26/g, '&amp;');
 262     body = unescape(body);
 263     if ($('#' + id).length <= 0) {
 264         createBubble(jid);
 265     }
 266     if ($('#' + id + ' p *').length > 0) {
 267         $('#' + id + ' p').append('<br/>');
 268     }
 269     $('#' + id + ' p').append('<span class="sender">' + jid + ': </span>');
 270     $('#' + id + ' p').append(body);
 271     $('#' + id).show();
 272
 273     return true;
 274 }
 275
 276 function genCaps() {
 277     var S = '';
 278     S += 'client/web//' + appName + '<'
 279     features.sort();
 280     for (var i = 0; i < features.length; i++) {
 281         S += features[i] + '<';
 282     }
 283     return b64_sha1(S);
 284 }
 285
 286 function handleTune(jid, tuneXML) {
 287     var tune = new Tune();
 288     if (tuneXML.childNodes.length > 0) {
 289         tune.artist = Strophe.getText(tuneXML.getElementsByTagName('artist')[0]);
 290         tune.length= Strophe.getText(tuneXML.getElementsByTagName('length')[0]);
 291         tune.rating= Strophe.getText(tuneXML.getElementsByTagName('rating')[0]);
 292         tune.source= Strophe.getText(tuneXML.getElementsByTagName('source')[0]);
 293         tune.title= Strophe.getText(tuneXML.getElementsByTagName('title')[0]);
 294         tune.track= Strophe.getText(tuneXML.getElementsByTagName('track')[0]);
 295         tune.uri= Strophe.getText(tuneXML.getElementsByTagName('uri')[0]);
 296         if (roster[jid2id(jid)].visible == true) {
 297             if ( $('#tune').length > 0) {
 298                 $('#tune').empty();
 299                 $('#tune').append('<span class="vCardName">Tune: </span>');
 300                 $('#tune').append(Strophe.xmlTextNode('Listening to '+ tune.title +
 301                         ' by ' + tune.artist + ' from ' + tune.source));
 302             } else {
 303                 $('#vCard ul').append('<li id="tune"><span class="vCardName">Tune: </span>Listening to '+ tune.title +
 304                         ' by ' + tune.artist + ' from ' + tune.source + '</li>')
 305             }
 306         }
 307     } else {
 308         $('#tune').remove();
 309     }
 310     roster[jid2id(jid)].tune = tune;
 311 }
 312
 313 function _cbPEP(e) {
 314     var from = e.getAttribute('from');
 315     if (Strophe.getBareJidFromJid(from) == Strophe.getBareJidFromJid(connection.jid)) {
 316         return true; // Drop own PEP events
 317     }
 318     var items = e.getElementsByTagName('items')[0];
 319     // Handle Tune
 320     if (items.getAttribute('node') == NS_TUNE) {
 321         handleTune(from, items.getElementsByTagName('tune')[0]);
 322     }
 323     return true;
 324 }
 325
 326 function onConnect(status) {
 327     if (status == Strophe.Status.CONNECTING) {
 328         log('Strophe is connecting.');
 329     } else if (status == Strophe.Status.CONNFAIL) {
 330         log('Strophe failed to connect.');
 331         showConnect();
 332     } else if (status == Strophe.Status.DISCONNECTING) {
 333         log('Strophe is disconnecting.');
 334     } else if (status == Strophe.Status.DISCONNECTED) {
 335         log('Strophe is disconnected.');
 336         showConnect();
 337     } else if (status == Strophe.Status.AUTHFAIL) {
 338         log('Authentication failed');
 339         if (connection) {
 340             connection.disconnect();
 341         }
 342     } else if (status == Strophe.Status.CONNECTED) {
 343         log('Strophe is connected.');
 344         getOwnInfo();
 345         getRoster();
 346         connection.addHandler(_cbDisco, Strophe.NS.DISCO_INFO, 'iq', 'get');
 347         connection.addHandler(_cbMessage, Strophe.NS.CLIENT, 'message');
 348     }
 349 }
 350
 351 function showConnect() {
 352     var jid = $('#jid');
 353     var pass = $('#pass');
 354     var button = $('#connect').get(0);
 355
 356     $('#log').empty();
 357     $('#ownInfo').empty();
 358     $('#ownInfo').hide();
 359     $('#vCard_container').empty();
 360     $('#friends').empty();
 361     $('#friends').hide();
 362     $('.chat').remove();
 363     $('label').show();
 364     jid.show();
 365     pass.show();
 366     button.value = 'connect';
 367     return false;
 368 }
 369
 370 function showDisconnect() {
 371     var jid = $('#jid');
 372     var pass = $('#pass');
 373     var button = $('#connect').get(0);
 374
 375     button.value = 'disconnect';
 376     pass.hide();
 377     jid.hide();
 378     $('label').hide();
 379     return false;
 380 }
 381
 382 $(document).ready(function () {
 383     if (DEBUG) {
 384         $('#log_container').show();
 385     }
 386     connection = new Strophe.Connection(BOSH_SERVICE);
 387     connection.rawInput = rawInput;
 388     connection.rawOutput = rawOutput;
 389
 390     $("#log_toggle").click(function () {
 391         $("#log").toggle();
 392       });
 393
 394     $('#cred').bind('submit', function () {
 395         var button = $('#connect').get(0);
 396         var jid = $('#jid');
 397         var pass = $('#pass');
 398         localJID = jid.get(0).value;
 399
 400         if (button.value == 'connect') {
 401             showDisconnect();
 402             connection.connect(localJID,
 403                                pass.get(0).value,
 404                                onConnect);
 405         } else {
 406             connection.disconnect();
 407         }
 408         return false;
 409     });
 410 });
 411
 412 // Element moving
 413 var dragElement = null;
 414 var mouseX = 0;
 415 var mouseY = 0;
 416 var offX = 0;
 417 var offY = 0;
 418
 419 function startDrag(element) {
 420     dragElement = element;
 421     offX = mouseX - dragElement.offsetLeft;
 422     offY = mouseY - dragElement.offsetTop;
 423 }
 424
 425 function doDrag(eve) {
 426     mouseX = eve.pageX;
 427     mouseY = eve.pageY;
 428
 429     if (dragElement) {
 430         dragElement.style.left = (mouseX - offX) + 'px';
 431         dragElement.style.top = (mouseY - offY) + 'px';
 432     }
 433 }
 434
 435 function stopDrag(eve) {
 436     dragElement = null;
 437 }
 438
 439 onunload = function() {
 440     if (connection) {
 441         connection.disconnect();
 442     }
 443 }
 444
 445 onmousemove = doDrag;
 446 onmouseup = stopDrag;
 447