Remove the jQuery-ui dependency.

* add a simple jQuery tab plugin
* add tabs styling in the CSS
* some code factorisation
* code formatting in the js and the css

1 files changed, 247 insertions, 93 deletions

diff --git a/webclient/lib/alias.js b/webclient/lib/alias.js
index 882d2d3..9b43abf 100644
--- a/webclient/lib/alias.js
+++ b/webclient/lib/alias.js
@@ -1,11 +1,11 @@
-var BOSH_SERVICE = 'http://alias.im/http-bind';
-var server_component = 'social.alias.im';
+var BOSH_SERVICE = 'http://localhost/http-bind';
+var server_component = 'object.localhost';
 
 /**
  * Alias namespace
  */
 var Alias = {
-    
+
     /**
      * Status constants
      */
@@ -14,12 +14,12 @@ var Alias = {
         AWAY: 1,
         OFFLINE: 0
     },
-    
+
     /**
      * Strophe xmpp connection
      */
     connection: null,
-    
+
     /**
      * Send a roster request to server
      */
@@ -30,8 +30,8 @@ var Alias = {
 
     /**
      * Return the status of a contact
-     * @param contact a jquery object
-     * @returns {Number} the status number
+     * @param {jQuery} contact The contact
+     * @return {Int} The status' number
      * @see Alias.Status
      */
     getPresence: function(contact) {
@@ -42,11 +42,11 @@ var Alias = {
         else
             return Alias.Status["OFFLINE"];
     },
-    
+
     /**
      * Convert a jid to an id string suitable for css id
      * @param {String} jid
-     * @returns {String} id
+     * @return {String} id
      */
     jid_to_id: function(jid) {
         return Strophe.getBareJidFromJid(jid).replace(/[@.]/g,'-');
@@ -55,19 +55,19 @@ var Alias = {
     /**
      * Return the id of a contact
      * @param contact jquery object
-     * @returns {String} id
+     * @return {String} id
      */
     getID: function(contact) {
         return contact.find('.roster-jid').text();
     },
-    
+
     /**
-     * Return the name of a contact 
+     * 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
@@ -86,11 +86,11 @@ var Alias = {
         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
+     * @param {jQuery} contact The contact to insert
      */
     insertContact: function(contact) {
         var presence = Alias.getPresence(contact);
@@ -115,7 +115,7 @@ var Alias = {
                 }
             });
 
-            if (!inserted) 
+            if (!inserted)
                 $('#roster ul').append(contact);
         }
         else
@@ -151,6 +151,11 @@ var Alias = {
         return true;
     },
 
+    /**
+     * Rebuild the contact list when receiving a roster iq
+     * @param iq
+     * @return {Boolean}
+     */
     onRoster: function(iq) {
         $('#roster li').remove();
         var elems = iq.getElementsByTagName('query');
@@ -170,91 +175,262 @@ var Alias = {
         return true;
     },
 
-    onConnect: function(status) {
+    /**
+     * Called when the status of Strophe's connection changes.
+     * This function is passed to the Strophe's connect function
+     *
+     * @param {Int} status The new status
+     */
+    onStatusChanged: function(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.');
-        } 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.');
-        } else if ( status == Strophe.Status.CONNECTED )
-        {
+        } else if ( status == Strophe.Status.CONNECTED ) {
             log('Strophe is connected.');
-            Alias.getRoster();
-            $('#password').val('');
-            $('#login').dialog('close');
-            $('#status').append($('<a href="#" id="connect">Disconnect</a>'));
-            $('#connect').click(function(){
-                Alias.connection.disconnect();
-                $('#roster ul').empty();
-                $('#login').dialog('open');
-                $(this).remove();
-             });
+            Alias.onConnect();
+        }
+    },
+
+    /**
+     * Alias initialization after connection
+     */
+    onConnect: function() {
+        Alias.getRoster();
+
+        // hide the login dialog and load the interface
+        $('#login').hide();
+        $('#password').val('');
+        $('#left').show();
+        $('#right').show();
+        $('#status').append($('<a href="#" id="disconnect">Disconnect</a>'));
+        $('#disconnect').click(function(){
+            Alias.connection.disconnect();
+            $('#roster ul').empty();
+            $('#left').hide();
+            $('#right').hide();
+            $('#login').hide();
+            $(this).remove();
+         });
+
+        // handlers must be added only after connection is made
+        Alias.connection.addHandler(Alias.onMessage, null, "message", "chat");
+    },
+
+    /**
+     * Add a new chat tab
+     * @param {String} jid The jid of the contact to chat with
+     */
+    addChatTab: function(jid) {
+        var jid_id = Alias.jid_to_id(jid);
+        $('#tabs').tabs('add', jid, 'chat-' + jid_id, true);
+        $('#chat-' + jid_id).addClass('chat-tab');
+        $('#chat-' + jid_id).append("<div class='chat-messages'></div>"
+                                    + "<input type='text' class='chat-input'>");
+        $('#chat-' + jid_id).data({jid: jid});
+    },
+
+    /**
+     * Add a chat message
+     * @param {String} chatId The id of the chat tab
+     * @param {String} authorId The jid of the message's author
+     * @param {String} body The text of the message
+     */
+    addMessage: function(chatId, authorId, body) {
+        var author = Strophe.getNodeFromJid( authorId );
+        var message = $('<p class="chat-message"><span class="chat-name">'
+                    + author + '</span> <span class="chat-text">'
+                    + body + '</span></p>');
+
+        if ( authorId == Alias.connection.jid ) {
+            message.find('.chat-name').addClass('me');
         }
+
+        var chatArea = $('#chat-' + chatId).find('.chat-messages');
+        chatArea.append(message);
+        chatArea.scrollTop(chatArea.height());
     },
-    
+
+    /**
+     * Callback upon receiving a chat message
+     * @param {String} message The xml code of the message iq
+     * @return {Boolean}
+     */
     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(
-                "<div class='chat-messages'></div>" +
-                "<input type='text' class='chat-input'>");
+        if ( !$('#tabs').tabs('exist','#chat-' + jid_id) ) {
+            Alias.addChatTab(jid);
         }
-        
+
         $('#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 = $("<span></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(
-                "<p class='chat-message'><span class='chat-name'>" +
-                Strophe.getNodeFromJid(jid) +
-                "</span><span class='chat-text'></span></p>");
-
-            $('#chat-' + jid_id + ' .chat-message:last .chat-text')
-                .append(body);
-
+            Alias.addMessage( jid_id, jid , body);
         }
 
         return true;
     }
-   
+
 };
 
+/**
+ * Light jQuery tab plugin
+ *
+ * the html structure is:
+ *
+ * <div id="generalid">
+ *  <ul class="tabbar">
+ *      <li><a href="#tab-1">Title 1</a></li>
+ *  </ul>
+ *  <div id="tab-1">
+ *      Content 1
+ *  </div>
+ * </div>
+ */
+(function( $ ){
+
+    var methods = {
+
+        /**
+         * Initialise the general tab area
+         * @return this (to preserve chainability)
+         */
+        init: function() {
+            var tabs = this;
+            this.find('ul.tabbar li').bind('click.tabs', function(event){
+                event.preventDefault();
+                tabs.tabs('select',$(this).find('a').attr('href'));
+            });
+            this.data('tabs',{});
+            return this;
+        },
+
+        /**
+         * Select a tab
+         * @param {String} id The tab id with #
+         * @return this
+         */
+        select: function(id) {
+            var selectedId = this.data('tabs').selected;
+
+            if ( selectedId == id) {
+                return this;
+            }
+
+            this.find('ul.tabbar li a[href="' + selectedId + '"]').parent().removeClass('selected');
+            this.find('ul.tabbar li a[href="' + id + '"]').parent().addClass('selected');
+            $(selectedId).hide();
+            $(id).show();
+            this.data('tabs').selected = id;
+            return this;
+        },
+
+        /**
+         * Add a tab
+         * @param {String} name The tab Title
+         * @param {String} id The tab id without #
+         * @pram {Bool} remove Wether the tab should be closable
+         * return this
+         */
+        add: function(name, id, remove) {
+            var tabs = this;
+            var li = $('<li><a href="#' + id + '">' + name +'</a></li>');
+
+            if ( remove ) {
+                li.append('<span class="tab-close"/>');
+                li.find('.tab-close').bind('click', function() {
+                    tabs.tabs('remove', '#'+id);
+                });
+            }
+
+            li.bind('click.tabs',function(event){
+                event.preventDefault();
+                tabs.tabs('select',$(this).find('a').attr('href'));
+            });
+            $(this).find('ul.tabbar').append(li);
+            $(this).append('<div class="tab" id="' + id + '"></div>');
+            return this;
+        },
+
+        /**
+         * Test if a tab exists
+         * @param {String} id The tab id with #
+         * @return {Bool}
+         */
+        exist: function(id) {
+            return (this.find('ul.tabbar li a[href="' + id + '"]').length != 0);
+        },
+
+        /**
+         * Remove a tab
+         * @param {String} id The tab id with #
+         * @return this
+         */
+        remove: function(id) {
+            this.find('ul.tabbar li a[href="' + id + '"]').parent().remove();
+            $(id).remove();
+
+            if (this.data('tabs').selected == id) {
+                var first = this.find('ul.tabbar li:first a').attr('href');
+                this.tabs('select', first);
+            }
+        }
+   };
+
+    /*
+     * Register the 'tabs' method to the jQuery objects
+     * the first argument of this method is the submethod
+     * you want to call
+     */
+    $.fn.tabs = function(method) {
+        if ( methods[method] ) {
+            return methods[method].apply(this, Array.prototype.slice
+                                         .call(arguments, 1));
+        } else if ( typeof method === 'object' || !method ) {
+            return methods.init.apply(this, arguments);
+        } else {
+            $.error('Method ' + method + ' does not exist on jQuery.tabs');
+        }
+    };
+
+})(jQuery);
+
+
 function log(msg, color) {
     $('#log').append($('<div></div>').css('background-color', color).text(msg));
 }
@@ -276,76 +452,54 @@ $(document).ready(function(){
    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);}
-       }
+   $('#connect').click(function () {
+       Alias.connection.connect($('#jid').get(0).value,
+                                $('#pass').get(0).value,
+                                Alias.onStatusChanged);
    });
-   
+
    $('#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(
-               "<div class='chat-messages'></div>" +
-               "<input type='text' class='chat-input'/>");
-           $('#chat-' + id).data('jid', jid);
+       if ( !$('#tabs').tabs('exist','#chat-' + id) ) {
+           Alias.addChatTab(jid);
        }
-       $('#tabs').tabs('select', '#chat-' + id);
 
+       $('#tabs').tabs('select', '#chat-' + id );
        $('#chat-' + id + ' input').focus();
    });
-   
+
    $('.chat-input').live('keypress', function (ev) {
        var jid = $(this).parent().data('jid');
+       var id = Alias.jid_to_id(jid);
+       var me = Alias.connection.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(
-               "<p class='chat-message'><span class='chat-name me'>" + 
-               Strophe.getNodeFromJid(Alias.connection.jid) +
-               "</span><span class='chat-text'>" + body +
-               "</span></p>");
-
+           Alias.addMessage(id, me, body);
            $(this).val('');
-       } 
+       }
    });
 });