xmpp.chapril.org-conversejs/chatui.js

xmppchat.UI = (function (xmppUI, $, console) {
    var ob = xmppUI;
    ob.chats = [];
    ob.chat_focus  = [];
    ob.chatbox_width = 205;

    ob.sanitizePath = function (call) { 
        return xmppchat.base_url + call; 
    };

    ob.addUserToRosterUI = function (user_id, bare_jid, fullname, userstatus) {
        if ($('#online-users-' + user_id).length > 0) { return; }
        var li = $('<li></li>').addClass(userstatus).attr('id', 'online-users-'+user_id).attr('data-recipient', bare_jid);
        li.append($('<a title="Click to chat with this contact"></a>').addClass('user-details-toggle').text(fullname));
        li.append($('<a title="Click to remove this contact" href="#"></a>').addClass('remove-xmpp-contact'));
        $('#xmpp-contacts').append(li);
    };

    ob.updateOnPresence = function (jid, status, presence) {
        var user_id = Strophe.getNodeFromJid(jid),
            bare_jid = Strophe.getBareJidFromJid(jid),
            resource, 
            online_count,
            $chat = $("#"+helpers.hash(bare_jid)),
            $chat_content,
            existing_user_element = $('#online-users-' + user_id);

        if (xmppchat.isOwnUser(jid)) { return; }

        if ($chat.length > 0) {
            $chat_content = $chat.find(".chat-content");
            $chat_content.find('div.chat-event').remove();
            if (status === 'offline') {
                xmppchat.Presence.getUserInfo(user_id, function (data) {
                    $chat_content.append($('<div></div>').addClass('chat-event').text(data.fullname + ' has gone offline.'));
                    $chat_content.scrollTop($content[0].scrollHeight);
                });
            } else if (status === 'unsubscribe') {
                xmppchat.Presence.getUserInfo(user_id, function (data) {
                    $chat_content.append($('<div></div>').addClass('chat-event').text(data.fullname + ' has removed you as a contact.'));
                    $chat_content.scrollTop($content[0].scrollHeight);
                });
                if (existing_user_element.length > 0) {
                    existing_user_element.remove();
                }
                $('#online-count').text(xmppchat.Presence.onlineCount());
                return;
            }
        }

        if (existing_user_element.length > 0) {
            existing_user_element.attr('class', status);
        } else if ((status !== 'offline') && (status !== 'unavailable')) {
            xmppchat.Presence.getUserInfo(user_id, function (data) {
                xmppchat.UI.addUserToRosterUI(user_id, bare_jid, data.fullname, status);
            });
        } else { // status is offline and the user isn't shown as online
            return;
        }
        $('#online-count').text(xmppchat.Presence.onlineCount());
    };

    ob.positionNewChat =  function ($chat) {
        var open_chats = 0,
            offset;
        for (var i=0; i<this.chats.length; i++) {
            if ($("#"+helpers.hash(this.chats[i])).is(':visible')) {
                open_chats++;
            }
        }
        if (open_chats === 0) {
            $chat.animate({'right':'15px'});
        } 
        else {
            offset = (open_chats)*(this.chatbox_width+7)+15;
            $chat.animate({'right': (offset+'px')});
        }
    };

    ob.handleChatEvents =  function (chat_id) {
        var chat_area = $("#"+chat_id+" .chat-textarea"),
            chat_type = chat_id.split('_')[0],
            that = this;

        that.chat_focus[chat_id] = false;
        chat_area.blur(function () {
            that.chat_focus[chat_id] = false;
            chat_area.removeClass('chat-textarea-'+chat_type+'-selected');
        }).focus(function (){
            that.chat_focus[chat_id] = true;
            chat_area.addClass('chat-textarea-'+chat_type+'-selected');
        });
        var chatbox = $("#"+chat_id);
        chatbox.click(function () {
            if (chatbox.find('.chat-content').is(':visible')) {
                chatbox.find('.chat-textarea').focus();
            }
        });
    };

    ob.insertCollectionMessages = function ($chat, bare_jid, recipient_name) {
        xmppchat.Collections.getLastMessages(bare_jid, function (result) {
            $('body').append($chat);
            $(result).find('chat').children().each(function (idx, el) {
                if (el.tagName !== 'set') {
                    // TODO: Calculate the time. We have the start time and the offset for each message...
                    var text = $(el).find('body').text(),
                        now = new Date(),
                        time = now.toLocaleTimeString().substring(0,5),
                        $content = $chat.find('.chat-content');
                        div = $('<div class="chat-message delayed"></div>');

                    if (el.tagName == 'to') {
                        message_html = div.append( 
                                            '<span class="chat-message-me">'+time+' me:&nbsp;&nbsp;</span>' + 
                                            '<span class="chat-message-content">'+text+'</span>'
                                            );
                    } else {
                        message_html = div.append( 
                                            '<span class="chat-message-them">'+time+' '+recipient_name+':&nbsp;&nbsp;</span>' + 
                                            '<span class="chat-message-content">'+text+'</span>'
                                            );
                    }
                    $content.append(message_html);
                    $content.scrollTop($content[0].scrollHeight);
                }
            });
            callback($chat);
        });
    };

    ob.insertClientStoredMessages = function ($chat, bare_jid, recipient_name) {
        xmppchat.Messages.getMessages(bare_jid, function (msgs) {
            $(msgs).each(function (idx, msg) {
                var msg_array = msg.split(' ', 2),
                    date = msg_array[0],
                    time = new Date(Date.parse(date)).toLocaleTimeString().substring(0,5),
                    direction = msg_array[1],
                    text = String(msg).replace(/(.*?\s.*?\s)/, '');
                    $content = $chat.find('.chat-content');
                    div = $('<div class="chat-message delayed"></div>');

                if (direction == 'to') {
                    message_html = div.append( 
                                        '<span class="chat-message-me">'+time+' me:&nbsp;&nbsp;</span>' + 
                                        '<span class="chat-message-content">'+text+'</span>'
                                        );
                } else {
                    message_html = div.append( 
                                        '<span class="chat-message-them">'+time+' '+recipient_name+':&nbsp;&nbsp;</span>' + 
                                        '<span class="chat-message-content">'+text+'</span>'
                                        );
                }
                $content.append(message_html);
                $content.scrollTop($content[0].scrollHeight);
            });
        });
    };

    ob.createChatbox = function (bare_jid, callback) {
        var user_id = Strophe.getNodeFromJid(bare_jid),
            that = this;
        xmppchat.Presence.getUserInfo(user_id, function (data) {
            var chat_id = helpers.hash(bare_jid);
            var $chat = $('<div class="chatbox"></div>').attr('id', chat_id).hide();
            var $head = $('<div class="chat-head chat-head-chatbox"></div>')
                    .append($('<div class="chat-title"></div>').text(data.fullname))
                    .append($('<a href="javascript:void(0)" class="chatbox-button close-chatbox-button">X</a>')
                        .attr('data-recipient', bare_jid))
                    .append('<br clear="all"/>'); 
            var $content = $('<div class="chat-content"></div>');
            var $form = $('<form class="sendXMPPMessage" action="" method="post">')
                        .append(
                            $('<textarea type="text" ' +
                                'class="chat-textarea" ' +
                                'placeholder="Personal message"/>').attr('data-recipient', bare_jid));
            $chat.append($head).append($content).append($form);
            $('body').append($chat);
            callback($chat);
        });
    };
    /*
    $chat.find('.chat-message .time').each(function () {
        var jthis = $(this);
        var time = jthis.text().split(':');
        var hour = time[0];
        var minutes = time[1];
        var date = new Date();
        date.setHours(hour - date.getTimezoneOffset() / 60);
        date.setMinutes(minutes);
        jthis.replaceWith(date.toLocaleTimeString().substring(0,5));
    });
    */

    ob.prepNewChat = function (chat, jid) {
        // Some operations that need to be applied on a chatbox
        // after it has been created.
        var chat_content,
            value;
        if (jid === 'online-users-container') {
            // Make sure the xmpp status is correctly set on the control box
            value = xmppchat.Storage.get(xmppchat.username+'-xmpp-status') || 'online';
            $(chat).find('#select-xmpp-status').val(value);
        } else {
            chat_content = $(chat).find('.chat-content');
            $(chat).find(".chat-textarea").focus();
            if (chat_content.length > 0) {
                chat_content.scrollTop(chat_content[0].scrollHeight);
            }
        }

        if (_.indexOf(this.chats, jid) == -1) {
            this.chats.push(jid);
        }
        this.addChatToCookie(jid);
    };

    ob.getChatbox =  function (jid, callback) {
        // Get a chatbox. Either it exists, then just ensure 
        // that it's visible and return it. Otherwise, create it.
        //
        // This method can be deferred.
        // http://www.erichynds.com/jquery/using-deferreds-in-jquery/
        var bare_jid = Strophe.getBareJidFromJid(jid),
            chat_content, 
            chat_id = helpers.hash(bare_jid),
            $chat = $("#"+chat_id),
            that = this,
            dfd = $.Deferred();

        if (callback === undefined) {
            callback = function () {};
        }
        if ($chat.length > 0) {
            if ($chat.is(':visible')) {
                callback($chat);
                dfd.resolve();
            } else {
                // The chatbox exists, merely hidden
                $chat.show('fast', function () {
                    that.prepNewChat(this, bare_jid);
                    that.reorderChats();
                    callback(this);
                    dfd.resolve();
                });
            }
        } else {
             this.createChatbox(bare_jid, function ($chat) {
                // that.retrieveCollections();
                that.positionNewChat($chat);
                $chat.show('fast', function () {
                    that.prepNewChat(this, bare_jid);
                    that.handleChatEvents(chat_id);
                    callback(this);
                    dfd.resolve();
                    // FIXME: We need to check here whether local or remote storage
                    // must be used. For now we just use local storage.
                    // ob.insertCollectionMessages
                    that.insertClientStoredMessages($chat, bare_jid, $chat.find('.chat-title').text());
                });
            });
        }
        return dfd.promise();
    };

    ob.reorderChats =  function () {
        var index = 0,
            chat_id,
            offset,
            $chat;

        if ('online-users-container' in helpers.oc(this.chats)) {
            index = 1;
            $chat = $("#"+helpers.hash(helpers.oc(this.chats)['online-users-container']));
            if ($chat.is(':visible')) {
                $chat.animate({'right': '15px'});
            }
        }

        for (var i=0; i < this.chats.length; i++) {
            chat_id = this.chats[i];
            if (chat_id === 'online-users-container') {
                continue;
            }
            $chat = $("#"+helpers.hash(this.chats[i]));
            if ($chat.is(':visible')) {
                if (index === 0) {
                    $chat.animate({'right': '15px'});
                } 
                else {
                    offset = (index)*(this.chatbox_width+7)+15;
                    $chat.animate({'right': offset +'px'});
                }
                index++;
            }
        }
    };

    ob.addChatToCookie = function (jid) {
        var cookie = jQuery.cookie('chats-open-'+xmppchat.username),
            new_cookie,
            open_chats = [];

        if (cookie) {
            open_chats = cookie.split('|');
        }
        if (!(jid in helpers.oc(open_chats))) {
            // Update the cookie if this new chat is not yet in it.
            open_chats.push(jid);
            new_cookie = open_chats.join('|');
            jQuery.cookie('chats-open-'+xmppchat.username, new_cookie, {path: '/'});
            console.log('updated cookie = ' + new_cookie + '\n');
        }
    };

    ob.removeChatFromCookie = function (jid) {
        var cookie = jQuery.cookie('chats-open-'+xmppchat.username),
            open_chats = [],
            new_chats = [];

        if (cookie) {
            open_chats = cookie.split('|');
        }
        for (var i=0; i < open_chats.length; i++) {
            if (open_chats[i] != jid) {
                new_chats.push(open_chats[i]);
            }
        }
        if (new_chats.length) {
            jQuery.cookie('chats-open-'+xmppchat.username, new_chats.join('|'), {path: '/'});
        }
        else {
            jQuery.cookie('chats-open-'+xmppchat.username, null, {path: '/'});
        }
    };

    ob.addMessageToChatbox =  function (event) {
        /* XXX: event.mtype should be 'xhtml' for XHTML-IM messages, 
            but I only seem to get 'text'. 

            XXX: Some messages might be delayed, we must get the time from the event.
        */
        var user_id = Strophe.getNodeFromJid(event.from),
            jid = Strophe.getBareJidFromJid(event.from),
            that = this;

        xmppchat.Presence.getUserInfo(user_id, function (data) {
            that.getChatbox(jid, function (chat) {
                var chat_content = $(chat).find(".chat-content"),
                    now = new Date(),
                    time = now.toLocaleTimeString().substring(0,5),
                    div = $('<div></div>'),
                    composing = $(event.message).find('composing'),
                    text;

                if (event.body) {
                    text = event.body.replace(/<br \/>/g, "");
                    div.addClass('chat-message');

                    if (event.delayed) {
                        div.addClass('delayed');
                    }
                    if (user_id == that.username) {
                        message_html = div.append( 
                                            '<span class="chat-message-me">'+time+' me:&nbsp;&nbsp;</span>' + 
                                            '<span class="chat-message-content">'+text+'</span>'
                                            );
                    } else {
                        message_html = div.append( 
                                            '<span class="chat-message-them">'+time+' '+data.fullname+':&nbsp;&nbsp;</span>' + 
                                            '<span class="chat-message-content">'+text+'</span>'
                                            );
                    }
                    chat_content.find('div.chat-event').remove();
                    chat_content.append(message_html);
                    xmppchat.UI.msg_counter += 1;
                    xmppchat.UI.updateMsgCounter();

                } else if (composing.length > 0) {
                    message_html = div.addClass('chat-event').text(data.fullname + ' is typing...');
                    chat_content.find('div.chat-event').remove().end().append(message_html);
                }
                chat_content.scrollTop(chat_content[0].scrollHeight);
            });
        });
    };

    ob.closeChat = function (jid) {
        var chat_id = helpers.hash(jid),
            that = this;
        jQuery('#'+chat_id).hide('fast', function () {
            var idx = that.chats.indexOf(jid);
            if (idx !== undefined) {
                that.chats.splice(idx, 1);
            }
            that.removeChatFromCookie(jid);
            that.reorderChats();
        });
    };

    ob.restoreOpenChats = function () {
        /* Check the open-chats cookie and re-open all the chatboxes it mentions.
         * We need to wait for current chatbox creation to finish before we create the
         * next, so we use a task buffer to make sure the next task is only
         * executed after the previous is done.
        */
        var cookie = jQuery.cookie('chats-open-'+xmppchat.username),
            open_chats = [];

        jQuery.cookie('chats-open-'+xmppchat.username, null, {path: '/'});
        if (cookie) {
            open_chats = cookie.split('|');
            // FIXME: Change this so that the online contacts box is always created first.
            for (var i=0; i<open_chats.length; i++) {
                xmppchat.Taskbuffer.tasks.push({'that': this, 'method':this.getChatbox, 'parameters':[open_chats[i]]});
            }
            xmppchat.Taskbuffer.handleTasks();
        }
    };

    ob.keyPressed = function (ev, textarea) {
        var $textarea = jQuery(textarea),
            jid = $textarea.attr('data-recipient'), // FIXME: bare jid
            $chat = $textarea.parent().parent(),
            message,
            notify,
            composing;

        if(ev.keyCode == 13) {
            message = $textarea.val();
            message = message.replace(/^\s+|\s+jQuery/g,"");
            $textarea.val('').focus();
            if (message !== '') {
                xmppchat.Messages.sendMessage(jid, message, function () {
                    var time, 
                        minutes,
                        now,
                        $chat_content;

                    message = message.replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\"/g,"&quot;");
                    list = message.match(/\b(http:\/\/www\.\S+\.\w+|www\.\S+\.\w+|http:\/\/(?=[^w]){3}\S+[\.:]\S+)[^ ]+\b/g);
                    if (list) {
                        for (i = 0; i < list.length; i++) {
                            message = message.replace( list[i], "<a target='_blank' href='" + escape( list[i] ) + "'>"+ list[i] + "</a>" );
                        }
                    }
                    now = new Date();
                    minutes = now.getMinutes().toString();
                    if (minutes.length==1) {minutes = '0'+minutes;}
                    time = now.toLocaleTimeString().substring(0,5);
                    $chat_content = $chat.find('.chat-content');
                    $chat_content.append(
                        '<div class="chat-message">' + 
                            '<span class="chat-message-me">'+time+' me:&nbsp;&nbsp;</span>' + 
                            '<span class="chat-message-content">'+message+'</span>' + 
                        '</div>');
                    $chat_content.scrollTop($chat_content[0].scrollHeight);
                    $chat.data('composing', false);
                });
            }
        } else {
            composing = $chat.data('composing');
            if (!composing) {
                notify = $msg({'to':jid, 'type': 'chat'})
                                .c('composing', {'xmlns':'http://jabber.org/protocol/chatstates'});
                xmppchat.connection.send(notify);
                $chat.data('composing', true);
            }
        }
    };

    ob.setOwnStatus = function (el) {
        var jid = xmppchat.connection.jid,
            value = $(el).find('span').text();

        $(".dropdown dt a").html('I am ' + value);
        $(".dropdown dt a").attr('class', value);
        $(".dropdown dd ul").hide();
        $("#source").val($(el).find("span.value").html());

        xmppchat.Presence.sendPresence(value);
        xmppchat.Storage.set(xmppchat.username+'-xmpp-status', value);
    };

    ob.createStatusSelectWidget = function () {
        var select = $('select#select-xmpp-status'),
            selected = select.find('option[selected]'),
            chat_status = selected.val() || xmppchat.Presence.getOwnStatus() || 'online';
            options = $('option', select);

            // create <dl> and <dt> with selected value inside it
            select.parent().append('<dl id="target" class="dropdown"></dl>');

            $("#target").append('<dt id="fancy-xmpp-status-select"><a href="#" title="Click to change your chat status" class="' +
                chat_status+'">I am ' + chat_status + 
                '<span class="value">' + chat_status + '</span></a></dt>');

            $("#target").append('<dd><ul></ul></dd>');
            // iterate through all the <option> elements and create UL
            options.each(function(){
                $("#target dd ul").append('<li><a href="#" class="'+$(this).val()+'">' + 
                    $(this).text() + '<span class="value">' + 
                    $(this).val() + '</span></a></li>').hide();
            });
            select.remove();
    };

    return ob;
})(xmppchat.UI || {}, jQuery, console || {log: function(){}} );


// Event handlers
// --------------
$(document).ready(function () {
    var chatdata = jQuery('span#babble-client-chatdata'),
        $toggle = $('a#toggle-online-users');

    xmppchat.username = chatdata.attr('username');
    xmppchat.base_url = chatdata.attr('base_url');

    xmppchat.UI.createStatusSelectWidget();

    $toggle.unbind('click');
    $toggle.bind('click', function (e) {
        e.preventDefault();
        if ($("div#online-users-container").is(':visible')) {
            xmppchat.UI.closeChat('online-users-container');
        } else {
            xmppchat.UI.getChatbox('online-users-container');
        }
    });

    $(document).unbind('jarnxmpp.message');
    $(document).bind('jarnxmpp.message',  function (event) {
        xmppchat.UI.addMessageToChatbox(event);
    });

    $(document).bind('xmppchat.send_presence', function (event, jid, type) {
        xmppchat.connection.send($pres({'type':type}));
    });

    $(document).unbind('jarnxmpp.presence');
    $(document).bind('jarnxmpp.presence', function (event, jid, status, presence) {
        xmppchat.UI.updateOnPresence(jid, status, presence);
    });

    $('textarea.chat-textarea').live('keypress', function (ev) {
        xmppchat.UI.keyPressed(ev, this);
    });

    $('a.close-chatbox-button').live('click', function (ev) {
        var jid = $(ev.target).attr('data-recipient');
        xmppchat.UI.closeChat(jid);
    }); 

    $('a.close-controlbox-button').live('click', function (ev) {
        xmppchat.UI.closeChat('online-users-container');
    }); 

    $('ul.tabs').tabs('div.panes > div');

    $('#fancy-xmpp-status-select').click(function (ev) {
        ev.preventDefault();
        $(this).siblings('dd').find('ul').toggle('fast');
    });

    $('div.add-xmpp-contact').click(function (ev) {
        ev.preventDefault();
        $(this).parent().find('form.search-xmpp-contact').toggle().find('input.username').focus();
    });

    $('a.remove-xmpp-contact').live('click', function (ev) {
        var that = this;
        ev.preventDefault();
        $("<span></span>").dialog({
            title: 'Are you sure you want to remove this contact?',
            dialogClass: 'remove-xmpp-contact-dialog',
            resizable: false,
            width: 200,
            position: {
                my: 'center',
                at: 'center',
                of: '#online-users-container'
                },
            modal: true,
            buttons: {
                "Remove": function() {
                    $( this ).dialog( "close" );
                    var jid = $(that).parent().attr('data-recipient');
                    xmppchat.Roster.unsubscribe(jid);
                },
                "Cancel": function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    });

    $('form.search-xmpp-contact').submit(function (ev) {
        ev.preventDefault();
        $.getJSON(portal_url + "/search-users?q=" + $(this).find('input.username').val(), function (data) {
            var $results_el = $('#found-users');
            $(data).each(function (idx, obj) {
                if ($results_el.children().length > 0) {  
                    $results_el.empty();
                }
                $results_el.append(
                        $('<li></li>')
                            .attr('id', 'found-users-'+obj.id)
                            .append(
                                $('<a class="subscribe-to-user" href="#" title="Click to add as a chat contact"></a>')
                                    .attr('data-recipient', obj.id+'@'+xmppchat.connection.domain)
                                    .text(obj.fullname)
                            )
                    );
            });
        });
    });

    $("a.subscribe-to-user").live('click', function (ev) {
        ev.preventDefault();
        xmppchat.Roster.subscribe($(this).attr('data-recipient'));
        $(this).remove();
        $('form.search-xmpp-contact').hide();
    });

    $(".dropdown dd ul li a").click(function(ev) {
        ev.preventDefault();
        xmppchat.UI.setOwnStatus(this);
    });

    $('select#select-xmpp-status').bind('change', function (ev) {
        var jid = xmppchat.connection.jid,
            value = ev.target.value;
        xmppchat.Presence.sendPresence(value);
        xmppchat.Storage.set(xmppchat.username+'-xmpp-status', value);
    });
});