JQuery Joomla chat, adding online/offline and friendlist
As the title implies we’ve now added online/offline functionality and the ability to toggle the user list to show only friends or all members.
The online/offline functionality is the main thing here and the thing that took the most effort, we need to consider the following in order for it to work:
1.) First of all we need to store state in the DB to prevent the offline person from appearing in other people’s lists.
2.) All chats that are open when the user goes offline needs to be removed both from the GUI and in the DB.
3.) State needs to be checked every time a page loads in order for the GUI to look correct, ie greyed out.
4.) When the chat button is clicked in order to go online we need to undo everything in #1-3.
var intvalChatCount;
var intvalChatInit;
var intvalNewMsgs;
var chatOffline = 0;
function clearIntervals(){
clearInterval(intvalChatCount);
clearInterval(intvalChatInit);
clearInterval(intvalNewMsgs);
}
function setIntervals(){
intvalChatCount = setInterval("updateChatCount()", 60000);
intvalChatInit = setInterval("checkChatInit()", 10000);
intvalNewMsgs = setInterval("fetchNewMsgs()", 5000);
}
function resetIntervals(){
clearIntervals();
setIntervals();
}
function foldChatList(){
jQuery("#chat_options").hide();
jQuery("#chat_ctrl").hide();
jQuery(".c_chat_user").remove();
jQuery("#c_chat").removeClass("c_chat_extended").addClass("c_chat");
jQuery("#chat_menu").removeClass("c_btn_extended").addClass("c_btn_normal");
}
function raiseChatList(){
jQuery("#chat_options").hide();
jQuery("#chat_menu").css({color: '#000'});
resetIntervals();
chatGetUsers({func: 'chatSetOffline', value: 0, fetch: 1 });
jQuery("#chat_ctrl").show();
}
function getChatListState(){
if(jQuery("#c_chat").hasClass("c_chat_extended"))
return "extended";
else
return "folded";
}The main thing here is that we need to save the intervals in variables in order to be able to turn them on/off since it doesn’t make sense to search for new chat messages when the user in question is offline.
Since we not raise and lower the chat list in various places this functionality had to be put in its own functions, namely raiseChatList and foldChatList.
function chatGetUsers(obj){
jQuery.post("/ajax.php", obj, function(ret){
jQuery("#c_chat").removeClass("c_chat").addClass("c_chat_extended");
jQuery("#chat_menu").removeClass("c_btn_normal").addClass("c_btn_extended");
jQuery("#chat_with_list").html(ret);
jQuery(".c_chat_user").click(function(){
var usr_id = jQuery(this).attr("id").split('_').pop();
var name = jQuery(this).find(".c_chat_name:first").html();
var thumb = jQuery(this).find("img").attr("src");
createNewChat(usr_id, name, thumb, 0);
});
});
}
jQuery("#chat_ctrl").click(
function(){
var offset = jQuery(this).offset();
var cur = jQuery("#chat_options");
if(cur.css('display') == 'none')
cur.show();
else
cur.hide();
}
);
jQuery("#chat_go_offline").click(function(){
foldChatList();
jQuery("div[id^='chatwin_']").remove();
jQuery.post("/ajax.php", {func: 'chatSetOffline', value: 1 });
jQuery("#chat_menu").css({color: '#ccc'});
clearIntervals();
});
jQuery("#chat_show_friends").click(function(){
jQuery("#chat_options").hide();
jQuery(".c_chat_user").remove();
chatGetUsers({func: 'setChatShow', chat_show: 'friends' });
});
jQuery("#chat_show_all").click(function(){
jQuery("#chat_options").hide();
jQuery(".c_chat_user").remove();
chatGetUsers({func: 'setChatShow', chat_show: 'all' });
});
jQuery("#chat_btn").click(function(){
if(getChatListState() == "folded")
raiseChatList();
else
foldChatList();
});
setupChatClose();
if(chatOffline == 0)
setIntervals();When we click the “Options” button a brand new menu will show where we can choose to show only friends or all users who are currently online, we can of course also go offline.
The listing above is about managing these options, note the chatOffline variable, we’ll get to that one later.
function chatSetOffline(){
$me = $this->getComUser();
$new_value = "chatOffline={$this->postArr['value']}";
if(stripos($me->params, 'chatOffline') === false)
$me->params .= "$new_value\n";
else{
if($this->chatIsOffline($me))
$me->params = str_ireplace('chatOffline=1', $new_value, $me->params);
else
$me->params = str_ireplace('chatOffline=0', $new_value, $me->params);
}
$this->exec("UPDATE jos_community_users SET params = '{$me->params}' WHERE userid = {$me->userid}");
if($this->postArr['fetch'] == 1)
$this->chatFetchOnline();
else
echo "ok";
}So we’ve got another parameter here, in addition to the ones we already control through the privacy settings, check the prior tutorial, the chatFetchOnline function, it’s been modified to respect chatOffline too now.
<?php
if(!cExt()->isGuest()):
$chat_offline = cExt()->chatIsOffline();
?>
<script> var chatOffline = <?php echo $chat_offline ?>; </script>
<div class="c_bar" id="c_bar">
<div id="c_chat" class="c_chat clearfix">
<div id="chat_options" class="chat_options" style="display:none;">
<ul>
<li id="chat_go_offline">Go offline</li>
<li id="chat_show_friends">Show only friends</li>
<li id="chat_show_all">Show all</li>
</ul>
</div>
<div id="chat_menu" class="c_btn c_btn_normal" <?php if($chat_offline): ?> style="color:#ccc;" <?php endif ?>>
<div id="chat_btn" class="chat_btn">Chat (<strong><?php cExt()->chatEchoCount() ?></strong>)</div>
<div id="chat_ctrl" class="chat_ctrl" style="display:none;"><strong>Options</strong></div>
</div>
<div id="chat_with_list" class="chat_with_list">
</div>
</div>
<div id="chat_tab_bar" class="chat_tab_bar">
<?php
if($chat_offline == 0):
foreach(cExt()->getAllChats() as $chat_id => $chat):
?>
<div id="chatwin_<?php echo $chat_id ?>" class="c_chat_window">
<div class="c_btn c_btn_extended">
<img src="<?php echo $chat->thumb ?>" height="22" width="22"/>
<div id="chatting_with_<?php echo $chat->id ?>" class="c_chat_name"><?php echo $chat->name ?></div>
<a id="chat_close_<?php echo $chat_id ?>" class="cwin_close_btn"></a>
</div>
<div id="chat_flow_<?php echo $chat_id ?>" class="chat_flow">
<?php foreach($chat->msgs as $msg): ?>
<div><?php echo $msg->name.': '.$msg->message ?></div>
<?php endforeach ?>
</div>
<input class="inputbox chat_input" id="chat_input_<?php echo $chat_id ?>" type="text" />
</div>
<?php endforeach ?>
<?php endif ?>
</div>
</div>
<div id="chat_tpl" class="c_chat_window" style="display:none">
<div class="c_btn c_btn_extended">
<img src="" width="22px" height="22px"/>
<div class="c_chat_name"></div>
<a id="chat_close_" class="cwin_close_btn"></a>
</div>
<div class="chat_flow"></div>
<input type="text" class="inputbox chat_input"/>
</div>
<?php endif ?>And finally the PHP that renders everything when the page loads, note the new menu there and the fact that we’re setting the JavaScript variable mentioned above. It’s the reason the offline/online state of the GUI can be kept when the user switches page.
Related Posts
Tags: Javascript, Joomla, jquery, PHP