diff options
| -rw-r--r-- | webclient/basic.html | 10 | ||||
| -rw-r--r-- | webclient/lib/basic.js | 160 | ||||
| -rw-r--r-- | webclient/style.css | 52 |
3 files changed, 173 insertions, 49 deletions
diff --git a/webclient/basic.html b/webclient/basic.html index c612c3c..528fe92 100644 --- a/webclient/basic.html +++ b/webclient/basic.html @@ -1,10 +1,11 @@ <!DOCTYPE html> <html> <head> - <title>Strophe.js Basic Example</title> + <title>Alias</title> <script src='lib/jquery-1.4.4.min.js'></script> <script src='lib/strophe.min.js'></script> <script src='lib/basic.js'></script> + <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id='login' style='text-align: center'> @@ -17,11 +18,14 @@ </form> </div> <hr/> - <div id='contacts' style="float:left; width:40%; height:100%"> + <div id='roster'> <h2>Contacts :</h2> <ul> </ul> </div> - <div id='log' style="position:fixed; bottom:0px; width:100%; height:200px; overflow:scroll; border-top:1px solid black"></div> + <div id='bottom'> + <div id='bottomup'><a href="#" id='consolea'>Console</a></div> + <div id='log'></div> + </div> </body> </html> diff --git a/webclient/lib/basic.js b/webclient/lib/basic.js index 8ea5b5b..93ef884 100644 --- a/webclient/lib/basic.js +++ b/webclient/lib/basic.js @@ -1,76 +1,144 @@ -var BOSH_SERVICE = 'http://alias.fr.nf/http-bind/'; +var BOSH_SERVICE = 'http://alias.fr.nf/http-bind'; var connection = null; -function log(msg) +function log(msg, color) { - $('#log').append('<div></div>').append(document.createTextNode(msg)); + $('#log').append($('<div></div>').css('background-color', color).text(msg)); } function rawInput(data) { - log('RECV: ' + data); + log('RECV: ' + data, '#FBB6B4'); } function rawOutput(data) { - log('SENT: ' + data); + log('SENT: ' + data, '#B5BBFB'); +} + +function getRoster() +{ + var roster = $iq({type : 'get'}).c('query', {xmlns : Strophe.NS.ROSTER}); + connection.sendIQ(roster, onRoster); +} + +function getPresence(contact) +{ + if ( contact.hasClass("online") ) + return 2; + else if ( contact.hasClass("away") ) + return 1; + else + return 0; +} + +function jid_to_id(jid) { + return Strophe.getBareJidFromJid(jid).replace("@", "-").replace(".", "-"); +} + +function getJID(contact) +{ + return contact.find('.roster-jid').text(); +} + +function insertContact(contact) +{ + var presence = getPresence(contact); + var jid = getJID(contact); + var contacts = $('#roster li'); + if (contacts.length > 0) { + var inserted = false; + contacts.each(function () { + var locpres = getPresence($(this)); + var locjid = getJID($(this)); + + if (presence > locpres) + { + $(this).before(contact); + inserted = true; + return false; + } + else + { + if (jid < locjid) + { + $(this).before(contact); + inserted = true; + return false; + } + } + }); + + if (!inserted) + $('#roster ul').append(contact); + } + else + $('#roster ul').append(contact); +} + +function onRoster(iq) +{ + var elems = iq.getElementsByTagName('query'); + var query = elems[0]; + Strophe.forEachChild(query, 'item', function(item) + { + var jid = item.getAttribute('jid'); + var name = item.getAttribute('name') || jid; + var id = jid_to_id(jid); + var contact = $("<li id='" + id + "' class='roster-contact offline'>" + + "<div class='roster-name'>" + name + "</div>" + + "<div class='roster-jid'>" + jid + "</div></li>"); + insertContact(contact); + }); + return true; } function onConnect(status) { var jid = $('#jid').get(0).value; - if (status == Strophe.Status.CONNECTING) { + if ( status == Strophe.Status.CONNECTING ) + { log('Strophe is connecting.'); - } - else if (status == Strophe.Status.CONNFAIL) { + } else if ( status == Strophe.Status.CONNFAIL ) + { log('Strophe failed to connect.'); $('#connect').get(0).value = 'connect'; - } - else if (status == Strophe.Status.DISCONNECTING) { + } else if ( status == Strophe.Status.DISCONNECTING ) + { log('Strophe is disconnecting.'); - } - else if (status == Strophe.Status.DISCONNECTED) { + } else if ( status == Strophe.Status.DISCONNECTED ) + { log('Strophe is disconnected.'); $('#connect').get(0).value = 'connect'; - } - else if (status == Strophe.Status.CONNECTED) { + } else if ( status == Strophe.Status.CONNECTED ) + { log('Strophe is connected.'); - connection.addHandler(onRoster,Strophe.NS.ROSTER,'iq','result',null, null); + getRoster(); connection.send($pres().tree()); - var roster = $iq({type:'get'}).c('query',{xmlns: Strophe.NS.ROSTER }); - connection.send(roster.tree()); } } -function onRoster(iq) -{ - var elems = iq.getElementsByTagName('query'); - var query = elems[0]; - Strophe.forEachChild(query,'item',function (item){ - var name = item.getAttribute('jid'); - $('#contacts > ul').append('<li>'+name+'</li>'); - }); - return true; -} - - +$(document).ready(function(){ + connection = new Strophe.Connection(BOSH_SERVICE); + connection.rawInput = rawInput; + connection.rawOutput = rawOutput; -$(document).ready(function () { - connection = new Strophe.Connection(BOSH_SERVICE); - connection.rawInput = rawInput; - connection.rawOutput = rawOutput; + $('#connect').bind('click', function(){ + var button = $('#connect').get(0); + if ( button.value == 'connect' ) + { + button.value = 'disconnect'; + connection.connect($('#jid').get(0).value, + $('#pass').get(0).value, + onConnect); + } else + { + button.value = 'connect'; + connection.disconnect(); + } + }); - $('#connect').bind('click', function () { - var button = $('#connect').get(0); - if (button.value == 'connect') { - button.value = 'disconnect'; - - connection.connect($('#jid').get(0).value, - $('#pass').get(0).value, - onConnect); - } else { - button.value = 'connect'; - connection.disconnect(); - } - }); + $('#bottomup').click(function(){ + $(this).next().slideToggle(); + }); });
\ No newline at end of file diff --git a/webclient/style.css b/webclient/style.css new file mode 100644 index 0000000..202a45d --- /dev/null +++ b/webclient/style.css @@ -0,0 +1,52 @@ +body +{ + padding: 0px; + margin: 0px; + font-family: sans-serif; +} + +div +{ + margin:0px; + padding:0px; +} + +#contacts +{ + float:left; + width:40%; + height:100%; +} + +#bottom +{ + position:fixed; + bottom:0px; + width:100%; +} + +#bottomup +{ + text-align: right; +} + +#consolea +{ + text-decoration: none; + color : black; + background-color : gray; + margin:0px; + padding-left:5px; + padding-right:5px; + padding-top:5px; +} + +#log +{ + height:200px; + width:100%; + overflow:auto; + display:none; + border-top:1px solid black; +} +
\ No newline at end of file |