scripts/basic.js

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