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
+2 -1
View File
@@ -24,7 +24,8 @@ var Collection = Backbone.Collection.extend({
var host = window.Galaxy.config.communication_server_host,
port = window.Galaxy.config.communication_server_port,
username = escape(window.Galaxy.user.attributes.username),
query_string = "?username=" + username,
persistent_communication_rooms = window.Galaxy.config.persistent_communication_rooms,
query_string = "?username=" + username + "&persistent_communication_rooms=" + persistent_communication_rooms,
src = host + ":" + port + query_string,
$el_chat_modal_header = null,
$el_chat_modal_body = null,
@@ -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("");
});
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long