Adding persistent rooms from config

This commit is contained in:
anuprulez
2016-06-11 16:32:34 +02:00
parent e0c4e1cef0
commit 80ee76cb39
8 changed files with 106 additions and 86 deletions
@@ -3,6 +3,10 @@ html, body {
font-size: 13px;
}
body {
overflow: hidden;
}
/* Styles for message text box */
.size-message {
height: 50px;
@@ -5,8 +5,8 @@
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="communication.css">
</head>
<body style="overflow: hidden; height: 100%" ;>
<div class="right_icons">
<body>
<div class="right_icons fade in">
<i id="online_status" class="anchor fa fa-comments" aria-hidden="true" title=""></i>
<i id="chat_history" class="anchor fa fa-history" aria-hidden="true" title="Show chat history"></i>
<i id="clear_messages" class="anchor fa fa-trash-o" aria-hidden="true" title="Clear all messages"></i>
@@ -15,15 +15,15 @@
<div class="scroller scroller-left"><i class="fa fa-chevron-left" aria-hidden="true" title="Move left"></i></div>
<div class="scroller scroller-right"><i class="fa fa-chevron-right" aria-hidden="true" title="Move right"></i></div>
<div class="wrapper">
<ul class="nav nav-tabs list" id="chat_tabs">
<li class="active">
<a data-target="#all_chat_tab" data-toggle="tab" aria-expanded='true' title="All Chats">All Chats</a>
</li>
<li>
<a data-target="#chat_room_tab" data-toggle="tab" aria-expanded='false' title="Chat Room">Chat Room</a>
</li>
</ul>
<div class="wrapper fade in">
<ul class="nav nav-tabs list" id="chat_tabs">
<li class="active">
<a data-target="#all_chat_tab" data-toggle="tab" aria-expanded='true' title="All Chats">All Chats</a>
</li>
<li class="create-room">
<a data-target="#chat_room_tab" data-toggle="tab" aria-expanded='false' title="Chat Room">Chat Room</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active fade in" id="all_chat_tab">
@@ -41,8 +41,8 @@
</div>
</div>
<div class="send_message">
<textarea id="send_data" class="size-message clearable" placeholder="Type your message...">
</textarea>
<textarea id="send_data" class="size-message clearable" placeholder="Type your message...">
</textarea>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
+68 -53
View File
@@ -1,7 +1,6 @@
// the namespace events connect to
var namespace = '/chat',
socket = io.connect(window.location.protocol + '//' + document.domain + ':' + location.port + namespace),
global_chat_rooms = ['Room1', 'Room2', 'Room3', 'Room4', 'Room5']; // need to get this list from galaxy.ini
socket = io.connect(window.location.protocol + '//' + document.domain + ':' + location.port + namespace);
// socketio events
var events_module = {
@@ -9,9 +8,9 @@ var events_module = {
event_response: function (socket) {
socket.on('event response', function (msg) {
var message = "",
uid = utils.get_userid(),
$el_all_messages = $('#all_messages'),
$el_tab_li = $("a[data-target='#all_chat_tab']");
uid = utils.get_userid(),
$el_all_messages = $('#all_messages'),
$el_tab_li = $("a[data-target='#all_chat_tab']");
// builds the message to be displayed
message = utils.build_message(msg);
@@ -100,30 +99,34 @@ var click_events = {
message = "";
message = $el_send_data.val();
message = message.trim(); // removes whitespaces
if( message.length > 0 && click_events.is_connected ) {
var send_data = {},
event_name = "";
if ( e.keyCode == 13 || e.which == 13 ) { // if enter is pressed
// if the tab is all chats
if ( click_events.active_tab === '#all_chat_tab' ) {
send_data.data = message;
event_name = 'event broadcast';
}
else { // if the tab belongs to room
send_data.data = message;
send_data.room = $el_active_li.children().attr("title");
event_name = 'event room';
}
socket.emit(event_name, send_data);
$el_send_data.val('');
// return false if entered is pressed without any message
if( message.length == 0 && ( e.keyCode == 13 || e.which == 13 ) ) {
return false;
}
if( click_events.is_connected ) {
var send_data = {},
event_name = "";
if ( e.keyCode == 13 || e.which == 13 ) { // if enter is pressed
// if the tab is all chats
if ( click_events.active_tab === '#all_chat_tab' ) {
send_data.data = message;
event_name = 'event broadcast';
}
else { // if the tab belongs to room
send_data.data = message;
send_data.room = $el_active_li.children().attr("title");
event_name = 'event room';
}
socket.emit(event_name, send_data);
$el_send_data.val('');
return false;
}
}
});
},
// sets the current active tab
active_element: function () {
$('.nav-tabs>li').click(function (e) {
$('.nav-tabs>li').click(function ( e ) {
if( e.target.attributes['data-target'] ) {
click_events.active_tab = e.target.attributes['data-target'].nodeValue;
$(this).children().css('background-color', '');
@@ -137,6 +140,15 @@ var click_events = {
}
});
},
create_room: function() {
$(".create-room").click(function( e ) {
// create global chat rooom links and
// registers their click events
$(".global-rooms").html("");
utils.create_global_chatroom_links();
click_events.open_global_chat_room();
});
},
// event for connected and disconneted states
connect_disconnect: function ( socket ) {
$('#online_status').click(function () {
@@ -257,11 +269,11 @@ var click_events = {
},
// opens a global chat room
open_global_chat_room: function() {
var $el_txtbox_chat_room = $('#txtbox_chat_room'),
$el_chat_room_tab = $('#chat_room_tab'),
$el_chat_tabs = $('#chat_tabs'),
$el_tab_content = $('.tab-content'),
$el_msg_box = $('#send_data'),
var $el_txtbox_chat_room = $( '#txtbox_chat_room' ),
$el_chat_room_tab = $( '#chat_room_tab' ),
$el_chat_tabs = $( '#chat_tabs' ),
$el_tab_content = $( '.tab-content' ),
$el_msg_box = $( '#send_data' ),
chat_room_name = '';
$('.global-room').click(function( e ) {
e.stopPropagation();
@@ -288,7 +300,10 @@ var utils = {
},
// get the current username of logged in user
get_userid: function () {
return location.search.split('username=')[1];
//return location.search.split('username=')[1];
var query_string_start = location.search.indexOf('?') + 1,
query_string_list = location.search.slice(query_string_start).split('&');
return query_string_list[0].split('=')[1];
},
// scrolls to the last of element
scroll_to_last: function ($el) {
@@ -332,11 +347,13 @@ var utils = {
},
// adds an information about the online status
update_online_status: function ($el, connected) {
if (connected) {
$el.prop("title", "You are online! Press to be offline.").css("color", "#00FF00");
var connected_message = "You are online! Press to be offline.",
disconnected_message = "You are offline! Press to be online.";
if ( connected ) {
$el.prop( "title", connected_message ).css( "color", "#00FF00" );
}
else {
$el.prop("title", "You are offline! Press to be online.").css( "color", "#FF0000");
$el.prop( "title", disconnected_message ).css( "color", "#FF0000" );
}
},
// gets the current time
@@ -411,8 +428,8 @@ var utils = {
// checks the session storage on page load
checks_session_storage: function() {
var uid = utils.get_userid();
if (sessionStorage['connected']) {
if (sessionStorage['connected'] === 'true' || sessionStorage['connected'] === true) {
if ( sessionStorage['connected'] ) {
if ( sessionStorage['connected'] === 'true' || sessionStorage['connected'] === true ) {
utils.update_online_status( $('#online_status'), true );
click_events.is_connected = true;
}
@@ -448,10 +465,11 @@ var utils = {
// global_rooms
var $el_room_container = $('#global_rooms'),
room_name = "",
room_template = "";
//$el_room_container.html('');
for(var room_counter = 0; room_counter < global_chat_rooms.length; room_counter++ ) {
room_name = global_chat_rooms[room_counter];
room_template = "",
persistent_communication_rooms = [];
persistent_communication_rooms = this.get_persistent_rooms();
for(var room_counter = 0; room_counter < persistent_communication_rooms.length; room_counter++ ) {
room_name = persistent_communication_rooms[room_counter];
room_template = "<a href='#' class='global-room' title=" + room_name + "><span>" + room_name + "</span></a><br>";
$el_room_container.append(room_template);
}
@@ -484,7 +502,7 @@ var utils = {
$el_chat_tabs.append( tab_room_header_template );
// create chat room tab body for new room
tab_room_body_template = "<div class='tab-pane active fade in' id=" + tab_id +
"><div id='all_messages_" + chat_room_name + "'" + " class='messages'></div></div>";
"><div id='all_messages_" + chat_room_name + "'" + " class='messages'></div></div>";
$el_tab_content.append(tab_room_body_template);
// registers leave room event
self.leave_close_room();
@@ -496,21 +514,24 @@ var utils = {
// adjusts the left/right scrollers when a tab is created
utils.adjust_scrollers();
},
// returns persistent communication rooms
get_persistent_rooms: function() {
var query_string_start = location.search.indexOf('?') + 1,
query_string_list = location.search.slice(query_string_start).split('&');
return query_string_list[1].split('=')[1].split(',');
}
}
// registers the events when this document is ready
$(document).ready(function () {
// fill the messages if user is already connected
// and comes back to the chat window
$(window).load(function() {
var uid = utils.get_userid();
// build tabs
$('#chat_tabs').tab();
// registers response event
events_module.event_response(socket);
// registers room response event
events_module.event_response_room(socket);
// registers connect event
events_module.event_connect(socket);
// registers create room event
click_events.create_chat_room(socket);
// broadcast the data
@@ -527,17 +548,11 @@ $(document).ready(function () {
click_events.leave_close_room();
// register tab overflow scroll events
click_events.overflow_left_right_scroll();
// build tabs
$('#chat_tabs').tab();
$('#send_data').val("");
utils.fill_messages(sessionStorage['broadcast']);
click_events.create_room();
// updates online status text
// by checking if user was connected or not
utils.checks_session_storage();
utils.fill_messages(sessionStorage['broadcast']);
utils.scroll_to_last($('#all_messages'));
// create global chat rooom links and
// registers their click events
utils.create_global_chatroom_links();
click_events.open_global_chat_room();
$('#send_data').val("");
});