From 1b3441a4924649dfb8f438dc0f94b3ede1d0c990 Mon Sep 17 00:00:00 2001 From: Zaran Date: Thu, 14 Apr 2011 02:40:31 +0200 Subject: File cleanup in webclient --- webclient/basic.html | 54 ------- webclient/index.html | 58 ++++++++ webclient/lib/alias.js | 352 ++++++++++++++++++++++++++++++++++++++++++++++ webclient/lib/basic.js | 352 ---------------------------------------------- webclient/style/alias.css | 19 ++- webclient/test.html | 11 -- 6 files changed, 426 insertions(+), 420 deletions(-) delete mode 100644 webclient/basic.html create mode 100644 webclient/index.html create mode 100644 webclient/lib/alias.js delete mode 100644 webclient/lib/basic.js delete mode 100644 webclient/test.html diff --git a/webclient/basic.html b/webclient/basic.html deleted file mode 100644 index 18e70f2..0000000 --- a/webclient/basic.html +++ /dev/null @@ -1,54 +0,0 @@ - - - - - - Alias - - - - - - - - - -
-
-

- - -

-
-
- -
-
-
- -

Contacts

- -
    -
-
-
- - - -
- -
-
- - diff --git a/webclient/index.html b/webclient/index.html new file mode 100644 index 0000000..db87c4d --- /dev/null +++ b/webclient/index.html @@ -0,0 +1,58 @@ + + + + + + Alias + + + + + + + + + + +
+
+

+ + +

+
+
+ +
+ +
+ +

Contacts

+ +
    +
+
+
+ + + +
+ +
+
+ + diff --git a/webclient/lib/alias.js b/webclient/lib/alias.js new file mode 100644 index 0000000..882d2d3 --- /dev/null +++ b/webclient/lib/alias.js @@ -0,0 +1,352 @@ +var BOSH_SERVICE = 'http://alias.im/http-bind'; +var server_component = 'social.alias.im'; + +/** + * Alias namespace + */ +var Alias = { + + /** + * Status constants + */ + Status: { + ONLINE: 2, + AWAY: 1, + OFFLINE: 0 + }, + + /** + * Strophe xmpp connection + */ + connection: null, + + /** + * Send a roster request to server + */ + getRoster: function() { + var roster = $iq({type : 'get'}).c('query', {xmlns : Strophe.NS.ROSTER}); + Alias.connection.sendIQ(roster, Alias.onRoster); + }, + + /** + * Return the status of a contact + * @param contact a jquery object + * @returns {Number} the status number + * @see Alias.Status + */ + getPresence: function(contact) { + if ( contact.hasClass("online") ) + return Alias.Status["ONLINE"]; + else if ( contact.hasClass("away") ) + return Alias.Status["AWAY"]; + else + return Alias.Status["OFFLINE"]; + }, + + /** + * Convert a jid to an id string suitable for css id + * @param {String} jid + * @returns {String} id + */ + jid_to_id: function(jid) { + return Strophe.getBareJidFromJid(jid).replace(/[@.]/g,'-'); + }, + + /** + * Return the id of a contact + * @param contact jquery object + * @returns {String} id + */ + getID: function(contact) { + return contact.find('.roster-jid').text(); + }, + + /** + * Return the name of a contact + */ + getName : function(contact) { + return contact.find('.roster-name').text(); + }, + + /** + * Get the home node of a contact + * @param contact jquery object + */ + getHome: function(contact) { + var name = Base64.encode(Alias.getID(contact)) + '@' + server_component; + var iq = $iq({type : 'get', to : name}).c('query', {xmlns : 'alias:query', type:'content'}); + Alias.connection.sendIQ(iq, Alias.onHome); + }, + + /** + * Called when receiving home node, display in the main div + * @param iq XML object + */ + onHome: function(iq) { + var content = $(iq).find('content').text(); + $('#main').html(content); + }, + + /** + * Insert a contact keeping the sorting of the roster + * The contacts are sorted based on their status and on their names + * @param contact jQuery object + */ + insertContact: function(contact) { + var presence = Alias.getPresence(contact); + var jid = Alias.getID(contact); + var contacts = $('#roster li'); + if (contacts.length > 0) { + var inserted = false; + contacts.each(function () { + var locpres = Alias.getPresence($(this)); + var locjid = Alias.getID($(this)); + if (presence > locpres) + { + $(this).before(contact); + inserted = true; + return false; + } + else if ( (presence == locpres) && (jid < locjid) ) + { + $(this).before(contact); + inserted = true; + return false; + } + }); + + if (!inserted) + $('#roster ul').append(contact); + } + else + $('#roster ul').append(contact); + }, + + onPresence: function(presence) { + var who = $(presence).attr('from'); + var type = $(presence).attr('type'); + if (type !== 'error') + { + var contact = $('#' + Alias.jid_to_id(who)); + contact.removeClass('online away offline'); + if (type === 'unavailable') + { + contact.addClass('offline'); + } + else + { + var show = $(presence).find('show').text(); + if (show === '' || show === '') + { + contact.addClass('online'); + } + else + { + contact.addClass('away'); + } + } + contact.remove(); + Alias.insertContact(contact); + } + return true; + }, + + onRoster: function(iq) { + $('#roster li').remove(); + 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 = Alias.jid_to_id(jid); + var contact = $("
  • " + + "
    " + name + "
    " + + "
    " + jid + "
  • "); + Alias.insertContact(contact); + }); + Alias.connection.addHandler(Alias.onPresence,null,'presence', null, null, null, null); + Alias.connection.send($pres()); + return true; + }, + + onConnect: function(status) { + var jid = $('#jid').get(0).value; + if ( status == Strophe.Status.CONNECTING ) + { + log('Strophe is connecting.'); + } else if ( status == Strophe.Status.CONNFAIL ) + { + log('Strophe failed to connect.'); + } else if ( status == Strophe.Status.DISCONNECTING ) + { + log('Strophe is disconnecting.'); + } else if ( status == Strophe.Status.DISCONNECTED ) + { + log('Strophe is disconnected.'); + } else if ( status == Strophe.Status.CONNECTED ) + { + log('Strophe is connected.'); + Alias.getRoster(); + $('#password').val(''); + $('#login').dialog('close'); + $('#status').append($('Disconnect')); + $('#connect').click(function(){ + Alias.connection.disconnect(); + $('#roster ul').empty(); + $('#login').dialog('open'); + $(this).remove(); + }); + } + }, + + onMessage: function (message) { + var full_jid = $(message).attr('from'); + var jid = Strophe.getBareJidFromJid(full_jid); + var jid_id = Alias.jid_to_id(jid); + + if ($('#chat-' + jid_id).length === 0) { + $('#tabs').tabs('add', '#chat-' + jid_id, jid); + $('#chat-' + jid_id).append( + "
    " + + ""); + } + + $('#chat-' + jid_id).data({jid: full_jid}); + + var body = $(message).find("html > body"); + + if (body.length === 0) { + body = $(message).find('body'); + if (body.length > 0) { + body = body.text(); + } else { + body = null; + } + } else { + body = body.contents(); + var span = $(""); + body.each(function () { + if (document.importNode) { + $(document.importNode(this, true)).appendTo(span); + } else { + // IE workaround + span.append(this.xml); + } + }); + + body = span; + } + + if (body) { + // add the new message + $('#chat-' + jid_id + ' .chat-messages').append( + "

    " + + Strophe.getNodeFromJid(jid) + + "

    "); + + $('#chat-' + jid_id + ' .chat-message:last .chat-text') + .append(body); + + } + + return true; + } + +}; + +function log(msg, color) { + $('#log').append($('
    ').css('background-color', color).text(msg)); +} + +function rawInput(data) { + log('RECV: ' + data, '#FBB6B4'); +} + +function rawOutput(data) { + log('SENT: ' + data, '#B5BBFB'); +} + +jQuery.expr[':'].Contains = function(a,i,m){ + return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0; +}; + +$(document).ready(function(){ + var connection = new Strophe.Connection(BOSH_SERVICE); + connection.rawInput = rawInput; + connection.rawOutput = rawOutput; + Alias.connection = connection; + Alias.connection.addHandler(Alias.onMessage, null, "message", "chat"); + + $('#login').dialog({ + autoOpen: true, + modal: true, + title: 'Connect', + buttons: { + 'Connect' : function () { + Alias.connection.connect($('#jid').get(0).value, + $('#pass').get(0).value, + Alias.onConnect);} + } + }); + + $('#bottomup').click(function(){ + $(this).next().slideToggle(); + }); + + $('#tabs').tabs(); + + $('#tabs').bind('tabsshow',function(event,ui){ + $(ui.panel).find('input').focus(); + $(ui.tab).parent().removeClass('ui-state-focus'); + }); + + $('#rosterfilter').keyup(function() { + var filter = $(this).val(); + $('#roster ul li div.roster-name:not(:Contains("' + filter + '"))').parent().hide(); + $('#roster ul li div.roster-name:Contains("' + filter + '")').parent().show(); + }); + + $('.roster-contact').live('click', function(){ + log('test'); + var jid = Alias.getID($(this)); + var name = Alias.getName($(this)); + var id = Alias.jid_to_id(jid); + + if ($('#chat-' + id).length === 0) { + $('#tabs').tabs('add', '#chat-' + id, name); + $('#chat-' + id).append( + "
    " + + ""); + $('#chat-' + id).data('jid', jid); + } + $('#tabs').tabs('select', '#chat-' + id); + + $('#chat-' + id + ' input').focus(); + }); + + $('.chat-input').live('keypress', function (ev) { + var jid = $(this).parent().data('jid'); + + if (ev.which === 13) { + ev.preventDefault(); + + var body = $(this).val(); + + var message = $msg({to: jid, "type": "chat"}) + .c('body').t(body).up() + .c('active', {xmlns: "http://jabber.org/protocol/chatstates"}); + Alias.connection.send(message); + + $(this).parent().find('.chat-messages').append( + "

    " + + Strophe.getNodeFromJid(Alias.connection.jid) + + "" + body + + "

    "); + + $(this).val(''); + } + }); +}); + + diff --git a/webclient/lib/basic.js b/webclient/lib/basic.js deleted file mode 100644 index d0795d1..0000000 --- a/webclient/lib/basic.js +++ /dev/null @@ -1,352 +0,0 @@ -var BOSH_SERVICE = 'http://alias.fr.nf/http-bind'; -var server_component = 'object.alias.fr.nf'; - -/** - * Alias namespace - */ -var Alias = { - - /** - * Status constants - */ - Status: { - ONLINE: 2, - AWAY: 1, - OFFLINE: 0 - }, - - /** - * Strophe xmpp connection - */ - connection: null, - - /** - * Send a roster request to server - */ - getRoster: function() { - var roster = $iq({type : 'get'}).c('query', {xmlns : Strophe.NS.ROSTER}); - Alias.connection.sendIQ(roster, Alias.onRoster); - }, - - /** - * Return the status of a contact - * @param contact a jquery object - * @returns {Number} the status number - * @see Alias.Status - */ - getPresence: function(contact) { - if ( contact.hasClass("online") ) - return Alias.Status["ONLINE"]; - else if ( contact.hasClass("away") ) - return Alias.Status["AWAY"]; - else - return Alias.Status["OFFLINE"]; - }, - - /** - * Convert a jid to an id string suitable for css id - * @param {String} jid - * @returns {String} id - */ - jid_to_id: function(jid) { - return Strophe.getBareJidFromJid(jid).replace(/[@.]/g,'-'); - }, - - /** - * Return the id of a contact - * @param contact jquery object - * @returns {String} id - */ - getID: function(contact) { - return contact.find('.roster-jid').text(); - }, - - /** - * Return the name of a contact - */ - getName : function(contact) { - return contact.find('.roster-name').text(); - }, - - /** - * Get the home node of a contact - * @param contact jquery object - */ - getHome: function(contact) { - var name = Base64.encode(Alias.getID(contact)) + '@' + server_component; - var iq = $iq({type : 'get', to : name}).c('query', {xmlns : 'alias:query', type:'content'}); - Alias.connection.sendIQ(iq, Alias.onHome); - }, - - /** - * Called when receiving home node, display in the main div - * @param iq XML object - */ - onHome: function(iq) { - var content = $(iq).find('content').text(); - $('#main').html(content); - }, - - /** - * Insert a contact keeping the sorting of the roster - * The contacts are sorted based on their status and on their names - * @param contact jQuery object - */ - insertContact: function(contact) { - var presence = Alias.getPresence(contact); - var jid = Alias.getID(contact); - var contacts = $('#roster li'); - if (contacts.length > 0) { - var inserted = false; - contacts.each(function () { - var locpres = Alias.getPresence($(this)); - var locjid = Alias.getID($(this)); - if (presence > locpres) - { - $(this).before(contact); - inserted = true; - return false; - } - else if ( (presence == locpres) && (jid < locjid) ) - { - $(this).before(contact); - inserted = true; - return false; - } - }); - - if (!inserted) - $('#roster ul').append(contact); - } - else - $('#roster ul').append(contact); - }, - - onPresence: function(presence) { - var who = $(presence).attr('from'); - var type = $(presence).attr('type'); - if (type !== 'error') - { - var contact = $('#' + Alias.jid_to_id(who)); - contact.removeClass('online away offline'); - if (type === 'unavailable') - { - contact.addClass('offline'); - } - else - { - var show = $(presence).find('show').text(); - if (show === '' || show === '') - { - contact.addClass('online'); - } - else - { - contact.addClass('away'); - } - } - contact.remove(); - Alias.insertContact(contact); - } - return true; - }, - - onRoster: function(iq) { - $('#roster li').remove(); - 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 = Alias.jid_to_id(jid); - var contact = $("
  • " - + "
    " + name + "
    " - + "
    " + jid + "
  • "); - Alias.insertContact(contact); - }); - Alias.connection.addHandler(Alias.onPresence,null,'presence', null, null, null, null); - Alias.connection.send($pres()); - return true; - }, - - onConnect: function(status) { - var jid = $('#jid').get(0).value; - if ( status == Strophe.Status.CONNECTING ) - { - log('Strophe is connecting.'); - } else if ( status == Strophe.Status.CONNFAIL ) - { - log('Strophe failed to connect.'); - } else if ( status == Strophe.Status.DISCONNECTING ) - { - log('Strophe is disconnecting.'); - } else if ( status == Strophe.Status.DISCONNECTED ) - { - log('Strophe is disconnected.'); - } else if ( status == Strophe.Status.CONNECTED ) - { - log('Strophe is connected.'); - Alias.getRoster(); - $('#password').val(''); - $('#login').dialog('close'); - $('#status').append($('Disconnect')); - $('#connect').click(function(){ - Alias.connection.disconnect(); - $('#roster ul').empty(); - $('#login').dialog('open'); - $(this).remove(); - }); - } - }, - - onMessage: function (message) { - var full_jid = $(message).attr('from'); - var jid = Strophe.getBareJidFromJid(full_jid); - var jid_id = Alias.jid_to_id(jid); - - if ($('#chat-' + jid_id).length === 0) { - $('#tabs').tabs('add', '#chat-' + jid_id, jid); - $('#chat-' + jid_id).append( - "
    " + - ""); - } - - $('#chat-' + jid_id).data({jid: full_jid}); - - var body = $(message).find("html > body"); - - if (body.length === 0) { - body = $(message).find('body'); - if (body.length > 0) { - body = body.text(); - } else { - body = null; - } - } else { - body = body.contents(); - var span = $(""); - body.each(function () { - if (document.importNode) { - $(document.importNode(this, true)).appendTo(span); - } else { - // IE workaround - span.append(this.xml); - } - }); - - body = span; - } - - if (body) { - // add the new message - $('#chat-' + jid_id + ' .chat-messages').append( - "

    " + - Strophe.getNodeFromJid(jid) + - "

    "); - - $('#chat-' + jid_id + ' .chat-message:last .chat-text') - .append(body); - - } - - return true; - } - -}; - -function log(msg, color) { - $('#log').append($('
    ').css('background-color', color).text(msg)); -} - -function rawInput(data) { - log('RECV: ' + data, '#FBB6B4'); -} - -function rawOutput(data) { - log('SENT: ' + data, '#B5BBFB'); -} - -jQuery.expr[':'].Contains = function(a,i,m){ - return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0; -}; - -$(document).ready(function(){ - var connection = new Strophe.Connection(BOSH_SERVICE); - connection.rawInput = rawInput; - connection.rawOutput = rawOutput; - Alias.connection = connection; - Alias.connection.addHandler(Alias.onMessage, null, "message", "chat"); - - $('#login').dialog({ - autoOpen: true, - modal: true, - title: 'Connect', - buttons: { - 'Connect' : function () { - Alias.connection.connect($('#jid').get(0).value, - $('#pass').get(0).value, - Alias.onConnect);} - } - }); - - $('#bottomup').click(function(){ - $(this).next().slideToggle(); - }); - - $('#tabs').tabs(); - - $('#tabs').bind('tabsshow',function(event,ui){ - $(ui.panel).find('input').focus(); - $(ui.tab).parent().removeClass('ui-state-focus'); - }); - - $('#rosterfilter').keyup(function() { - var filter = $(this).val(); - $('#roster ul li div.roster-name:not(:Contains("' + filter + '"))').parent().hide(); - $('#roster ul li div.roster-name:Contains("' + filter + '")').parent().show(); - }); - - $('.roster-contact').live('click', function(){ - log('test'); - var jid = Alias.getID($(this)); - var name = Alias.getName($(this)); - var id = Alias.jid_to_id(jid); - - if ($('#chat-' + id).length === 0) { - $('#tabs').tabs('add', '#chat-' + id, name); - $('#chat-' + id).append( - "
    " + - ""); - $('#chat-' + id).data('jid', jid); - } - $('#tabs').tabs('select', '#chat-' + id); - - $('#chat-' + id + ' input').focus(); - }); - - $('.chat-input').live('keypress', function (ev) { - var jid = $(this).parent().data('jid'); - - if (ev.which === 13) { - ev.preventDefault(); - - var body = $(this).val(); - - var message = $msg({to: jid, "type": "chat"}) - .c('body').t(body).up() - .c('active', {xmlns: "http://jabber.org/protocol/chatstates"}); - Alias.connection.send(message); - - $(this).parent().find('.chat-messages').append( - "

    " + - Strophe.getNodeFromJid(Alias.connection.jid) + - "" + body + - "

    "); - - $(this).val(''); - } - }); -}); - - diff --git a/webclient/style/alias.css b/webclient/style/alias.css index b453c28..1608679 100644 --- a/webclient/style/alias.css +++ b/webclient/style/alias.css @@ -70,6 +70,7 @@ input #header { margin:0px; + margin-bottom:15px; background-image: -moz-linear-gradient(top center, white, #AEB2B1); background: -webkit-gradient(linear, left top, left bottom, from(#F6F6F6), to(#D9D9D9)); border-bottom:1px solid #CDCDCD; @@ -89,19 +90,23 @@ input #left { + margin:0px; + margin-right:2%; float:left; width:20%; + background-color:white; + height:88%; } #right { float:left; - width:80%; - height:100%; + width:78%; + height:88%; } #tabs{ - height:90%; + height:100%; } .chat-messages{ @@ -183,4 +188,12 @@ input .away { background-color: #E3E3E3; +} + +#status +{ + margin:0px; + margin-top:10px; + margin-right:10px; + float:right; } \ No newline at end of file diff --git a/webclient/test.html b/webclient/test.html deleted file mode 100644 index d13a174..0000000 --- a/webclient/test.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - Cryptoapplet - Public key cryptography - - - - -

    - \ No newline at end of file -- cgit v1.2.3-70-g09d2