FaZeBookSocialNetwork / www / public / js / messenger.js
messenger.js
Raw
$(document).ready(initializeMessenger);

function initializeMessenger() {
    // enable sending messages using the return key
    $('#chat-input').keyup(function (e) {
        if (e.keyCode == 13) {
            $('#btn-chat').trigger('click');
        }
    })

    $("#collapseOne").on("hide.bs.collapse", function(){
        isChatExpanded.state = false;
    });

    $("#collapseOne").on("show.bs.collapse", function(){
        isChatExpanded.state = true;
    });

    loadFriendList();
    loadChat();
}

function isChatExpanded() {
    return isChatExpanded.state;
}

function delayedScrollEvent() {
    setTimeout(function () {
        // insert a big, big, big, yes, a really large number indeed, here.
        $('#chat-scroll-area').animate({scrollTop: 1234567890}, 1000);
    }, 1000);
}

function loadFriendList() {
    $.getJSON('lazy.php?page=messenger&action=friends', function (data) {
        $('#friend_list_body').html('');
        $.each(data, function (key, value) {
            // key = meaningless
            // value = one friend

            var id = value['id'];
            var firstName = value['firstName'];
            var lastName = value['lastName'];
            var karma = value['karma'];
            var online = value['online'];
            var unread = value['unread'];

            var entry = '<tr class="text-center">' +
                '<td style="vertical-align:middle"><a pageTarget="viewprofile&id='+id+'">'+firstName+' '+lastName+'</a></td>' +
                '<td style="vertical-align:middle">'+karma+' Karma</td>' +
                '<td style="vertical-align:middle">' +
                '<span onclick="openChat('+id+');" class="chat-user-btn-circle '+
                (online ? 'chat-user-btn-online' : 'chat-user-btn-offline') + '"><div class="fa fa-comments"></div>' +
                ((unread == 0)? '' : '<span class="indicator-dot">' + unread + '</span></span>') +
                '</td>' +
                '</tr>';
            $('#friend_list_body').append($(entry));
        });
        // prepare the lazy-loaded-links for the profile views ...
        prepareLazyLinks();
    });

    setTimeout(loadFriendList, 500);
}

function openChat(id) {


    $('#collapseOne').collapse({'toggle': false});
    $('#collapseOne').collapse('hide');

    loadChat.recipientId = id;
    sendMessage.recipientId = id;

    setTimeout(function () {
        $('#collapseOne').collapse('show');

        delayedScrollEvent();
    }, 500);
}

function hashCode(str) { // java String#hashCode
    var hash = 0;
    for (var i = 0; i < str.length; i++) {
        hash = str.charCodeAt(i) + ((hash << 5) - hash);
    }
    return hash;
}

function intToRGB(i){
    var c = (i & 0x00FFFFFF)
        .toString(16)
        .toUpperCase();

    return "00000".substring(0, 6 - c.length) + c;
}

function addMessageLeft(name, initials, time, content) {
    var entry = '<li class="left clearfix">' +
        '<span class="chat-img pull-left">' +
        '<img src="http://placehold.it/50/' + intToRGB(hashCode(name)) + '/fff&text=' + initials + '" alt="User Avatar" class="img-circle" />' +
        '</span>' +
        '<div class="chat-body clearfix">' +
        '<div class="header"><strong class="primary-font">' + name + '</strong> <small class="pull-right text-muted">' +
        '<span class="glyphicon glyphicon-time"></span>' + formatMessageTimestamp(time) + '</small>' +
        '</div><p>'+content+'</p></div></li>';

    $('#chat-log-area').append($(entry));
}

function addMessageRight(name, initials, time, content) {
    var entry = '<li class="right clearfix">' +
        '<span class="chat-img pull-right">' +
        '<img src="http://placehold.it/50/' + intToRGB(hashCode(name)) + '/fff&text=' + initials + '" alt="User Avatar" class="img-circle" />' +
        '</span>' +
        '<div class="chat-body clearfix">' +
        '<div class="header"><small class="text-muted">' +
        '<span class="glyphicon glyphicon-time"></span>' + formatMessageTimestamp(time) + '</small>' +
        '<strong class="primary-font pull-right">' + name + '</strong>' +
        '</div><p>'+content+'</p></div></li>';

    $('#chat-log-area').append($(entry));
}

function loadChat() {
    if (loadChat.recipientId !== undefined) {
        if (isChatExpanded()) {
            $.getJSON('lazy.php?page=messenger&action=msg_log&id=' + loadChat.recipientId, function (data) {
                var dispatchScrollEvent = false;

                $('#chat-log-area').html('');
                $.each(data, function (key, value) {
                    // key = meaningless
                    // value = one message

                    var isIncoming = (value['senderId'] == loadChat.recipientId);

                    var id = value['id'];
                    if (loadChat.latestMsgId === undefined) {
                        loadChat.latestMsgId = id;
                    }
                    var unreadMessage = (id > loadChat.latestMsgId);
                    loadChat.latestMsgId = Math.max(loadChat.latestMsgId, id);

                    var name = value['senderName'];
                    var initials = value['initials'];
                    var time = value['time'];
                    var content = value['content'];

                    if (isIncoming)
                        addMessageLeft(name, initials, time, content);
                    else
                        addMessageRight(name, initials, time, content);

                    if (unreadMessage)
                        dispatchScrollEvent = true;
                });

                if (dispatchScrollEvent)
                    delayedScrollEvent();
            });
        }
    }

    setTimeout(loadChat, 500);
}

function sendMessage() {
    $.post('lazy.php?page=messenger&action=msg_send', {
        'id' : sendMessage.recipientId,
        'content' : $('#chat-input').val()
    }).done(function (data) {
        $('#chat-input').val('');
        delayedScrollEvent();
    });
}