$(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(); }); }