opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-09-24 16:30:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Adding features-space enabled chat room names, ctrl+l for chat log deletion, removing delete icon, smooth transition on window load and code cleanup

Browse Source
This commit is contained in:
anuprulez
2016-06-13 20:48:42 +02:00
parent 80ee76cb39
commit 074fefeda2
3 changed files with 285 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scripts/communication/template/communication.css
+23 -9
View File
@@ -7,15 +7,33 @@ body {
overflow: hidden;
}
.body-container {
opacity: 0;
transition: opacity 1s;
}
.body-container-loaded {
opacity: 1;
}
/* Styles for message text box */
.size-message {
height: 50px;
.message-textarea {
height: 50px !important;
width: 99.5%;
font-size: 13px;
padding: 6px 3px;
}
/* Styles for top right icons */
.right_icons {
margin-left: 92%;
margin-left: 94.5%;
}
.chat-room-textbx {
width: 34%;
height: 10%;
font-size: 13px;
padding: 6px 3px;
}
ul, li,
@@ -54,7 +72,7 @@ ul, li,
}
.tab-content {
height: 65%;
height: 64%;
}
.tab-pane {
@@ -76,14 +94,10 @@ ul > li i {
.global-rooms {
overflow-y: auto;
height: 230px;
height: 200px;
margin-top: 1%;
}
.room-text {
margin-top: 1%;
}
a:hover, a:visited {
text-decoration: none;
}
scripts/communication/template/communication.html
+7 -7
View File
@@ -5,17 +5,16 @@
<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>
<div class="right_icons fade in">
<body class="body-container">
<div class="right_icons">
<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>
</div>
<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 fade in">
<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>
@@ -31,8 +30,8 @@
</div>
<div class="tab-pane fade" id="chat_room_tab">
<div id="join_room" class="join-room">
<input id="txtbox_chat_room" type="text" class="chat-room-textbx" value=""
placeholder="Enter room name to join...">
<input id="txtbox_chat_room" type="text" class="form-control chat-room-textbx" value=""
placeholder="Type a room name to join...">
<br>
<div class="room-text">Or click any available room to join</div>
<div id="global_rooms" class="global-rooms">
@@ -41,7 +40,7 @@
</div>
</div>
<div class="send_message">
<textarea id="send_data" class="size-message clearable" placeholder="Type your message...">
<textarea id="send_data" class="form-control clearable message-textarea" placeholder="Type your message...">
</textarea>
</div>
@@ -50,5 +49,6 @@
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>
<script src="https://use.fontawesome.com/89a733ecb7.js"></script>
<script type="text/javascript" src="communication.js"></script>
</body>
</html>
scripts/communication/template/communication.js
+255 -184
View File
@@ -1,4 +1,4 @@
// the namespace events connect to
// the namespace chat events connect to
var namespace = '/chat',
socket = io.connect(window.location.protocol + '//' + document.domain + ':' + location.port + namespace);
@@ -6,83 +6,86 @@ var namespace = '/chat',
var events_module = {
// event handler for sent data from server
event_response: function (socket) {
socket.on('event response', function (msg) {
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']");
$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);
message = utils.build_message( msg );
// append only for non empty messages
if (msg.data.length > 0) {
utils.append_message($el_all_messages, message);
utils.append_message( $el_all_messages, message );
// adding message to build full chat history
utils.store_append_message(uid, message);
utils.store_append_message( uid, message );
}
// updates the user session storage with all the messages
sessionStorage['broadcast'] = $el_all_messages.html();
// show the last item by scrolling to the end
utils.scroll_to_last($el_all_messages);
utils.scroll_to_last( $el_all_messages );
// Alert user if needed
if (uid !== msg.user) {
utils.show_notification($el_tab_li);
if ( uid !== msg.user ) {
utils.show_notification( $el_tab_li );
}
});
},
// event handler for room messages
event_response_room: function (socket) {
socket.on('event response room', function (msg) {
var $el_all_messages = $('#all_messages'),
socket.on('event response room', function ( msg ) {
var $el_all_messages = $( '#all_messages' ),
message = {},
uid = utils.get_userid(),
tab_counter = 0,
$el_tab_li = null;
$el_tab_li = null,
server_text_name = 'Server';
// response when user joins
if (msg.userjoin) {
message = {
data: msg.userjoin + " has joined " + msg.data,
user: 'Server',
user: server_text_name,
};
utils.append_message($el_all_messages, utils.build_message(message));
utils.scroll_to_last($el_all_messages);
if (uid !== msg.userjoin) {
$el_tab_li = $("a[data-target='#all_chat_tab']");
utils.show_notification($el_tab_li);
utils.append_message( $el_all_messages, utils.build_message( message ) );
utils.scroll_to_last( $el_all_messages );
// shows notification when message is from other user
if ( uid !== msg.userjoin ) {
$el_tab_li = $( "a[data-target='#all_chat_tab']" );
utils.show_notification( $el_tab_li );
}
} // response when user leaves
else if (msg.userleave) {
else if ( msg.userleave ) {
message = {
data: msg.userleave + " has left " + msg.data,
user: 'Server',
user: server_text_name,
};
utils.append_message($el_all_messages, utils.build_message(message));
utils.scroll_to_last($el_all_messages);
if (uid !== msg.userleave) {
$el_tab_li = $("a[data-target='#all_chat_tab']");
utils.show_notification($el_tab_li);
utils.append_message( $el_all_messages, utils.build_message( message ) );
utils.scroll_to_last( $el_all_messages );
// shows notification when message is from other user
if ( uid !== msg.userleave ) {
$el_tab_li = $( "a[data-target='#all_chat_tab']" );
utils.show_notification( $el_tab_li );
}
}
else { // normal message sharing when connected
$el_room_msg = $("#all_messages_" + msg.chatroom);
utils.append_message($el_room_msg, utils.build_message(msg));
utils.scroll_to_last($el_room_msg);
var room = utils.check_room_by_roomname( click_events.connected_room, msg.chatroom );
$el_room_msg = $( '#all_messages_' + room.id );
utils.append_message( $el_room_msg, utils.build_message( msg ) );
utils.scroll_to_last( $el_room_msg );
// if the pushed message is for some other user, show notification
if (uid !== msg.data) {
$el_tab_li = $("a[data-target='#galaxy_tabroom_" + msg.chatroom + "'" + " ]");
utils.show_notification($el_tab_li);
$el_tab_li = $( "a[data-target='#galaxy_tabroom_" + room.id + "'" + " ]" );
utils.show_notification( $el_tab_li );
}
}
});
},
// event handler for new connections
event_connect: function (socket) {
event_connect: function ( socket ) {
socket.on('connect', function () {
var send_data = {};
send_data.data = 'connected';
socket.emit('event connect', send_data);
socket.emit( 'event connect', send_data );
});
}
}
@@ -92,6 +95,7 @@ var click_events = {
is_connected: true,
active_tab: "#all_chat_tab",
connected_room: [],
tab_counter : 0,
broadcast_data: function ( socket ) {
$('#send_data').keydown(function ( e ) {
var $el_active_li = $( '.nav-tabs>li.active' ),
@@ -112,12 +116,12 @@ var click_events = {
send_data.data = message;
event_name = 'event broadcast';
}
else { // if the tab belongs to room
else { // if the tab belongs to a room
send_data.data = message;
send_data.room = $el_active_li.children().attr("title");
send_data.room = $el_active_li.children().attr( "title" );
event_name = 'event room';
}
socket.emit(event_name, send_data);
socket.emit( event_name, send_data );
$el_send_data.val('');
return false;
}
@@ -127,15 +131,21 @@ var click_events = {
// sets the current active tab
active_element: function () {
$('.nav-tabs>li').click(function ( e ) {
var tab_content_id = null,
message_area_div_id = "",
message_area_id = "",
$el_create_textbox = $('#txtbox_chat_room');
if( e.target.attributes['data-target'] ) {
// sets the active tab
click_events.active_tab = e.target.attributes['data-target'].nodeValue;
$(this).children().css('background-color', '');
$( this ).children().css( 'background-color', '' );
// hides the message textarea for create room tab
utils.show_hide_textarea( $(this).children() );
var tab_content_id = $('.nav li.active').children().attr('data-target');
// scroll to last in the tab content
if( tab_content_id ) {
utils.scroll_to_last( $(tab_content_id) );
utils.show_hide_textarea( $( this ).children() );
// finds the tab content and scrolls to last
message_area_div_id = $( this ).find('a').attr( 'data-target' );
message_area_id = $( message_area_div_id + ' .messages' ).attr( 'id' );
if( message_area_id ) { // if it has message area
utils.scroll_to_last( $( '#' + message_area_id ) );
}
}
});
@@ -144,80 +154,66 @@ var click_events = {
$(".create-room").click(function( e ) {
// create global chat rooom links and
// registers their click events
$(".global-rooms").html("");
$( ".global-rooms" ).html( "" );
utils.create_global_chatroom_links();
click_events.open_global_chat_room();
});
},
// event for connected and disconneted states
// toggles the connection status icon
connect_disconnect: function ( socket ) {
$('#online_status').click(function () {
var $el_online_status = $('#online_status'),
$el_input_text = $('#send_data'),
var $el_online_status = $( '#online_status' ),
$el_input_text = $( '#send_data' ),
send_data = {},
connected_message = 'Type your message...',
uid = utils.get_userid();
if ( click_events.is_connected ) {
click_events.make_disconnect(uid, $el_input_text, $el_online_status);
if ( click_events.is_connected ) { // if connected, disconnect
click_events.make_disconnect( uid, $el_input_text, $el_online_status );
}
else {
else { // if disconnected, reconnect
socket.connect();
click_events.is_connected = true;
sessionStorage['connected'] = true;
utils.update_online_status($el_online_status, click_events.is_connected);
$el_input_text.prop('disabled', false);
utils.update_online_status( $el_online_status, click_events.is_connected );
$el_input_text.prop( 'disabled', false );
$el_input_text.val('');
$el_input_text.prop('placeholder', connected_message);
$el_input_text.prop( 'placeholder', connected_message );
}
});
},
// clear all the messages
clear_messages: function () {
$('#clear_messages').click(function ( e ) {
// clears all the messages
utils.clear_message_area();
return false;
});
},
// shows full chat history
show_chat_history: function () {
$('#chat_history').click(function (events) {
utils.fill_messages(localStorage[utils.get_userid()]);
$('#chat_history').click(function ( e ) {
utils.fill_messages( localStorage[ utils.get_userid() ] );
});
},
// delete full history
delete_history: function () {
$('#delete_history').click(function () {
var uid = utils.get_userid();
localStorage.removeItem(uid);
sessionStorage.removeItem(uid);
utils.clear_message_area();
});
},
// makes disconnect
make_disconnect: function (uid, $el_input_text, $el_online_status) {
// makes disconnect and raises disconnect event at the server
make_disconnect: function ( uid, $el_input_text, $el_online_status ) {
var send_data = {}
disconnected_message = 'You are now disconnected. To send/receive messages, please connect';
click_events.is_connected = false;
socket.emit('event disconnect', send_data);
sessionStorage.removeItem(uid);
sessionStorage['connected'] = false;
utils.update_online_status($el_online_status, click_events.is_connected);
$el_input_text.val('');
$el_input_text.prop('placeholder', disconnected_message);
$el_input_text.prop('disabled', true);
socket.emit( 'event disconnect', send_data );
sessionStorage.removeItem( uid );
sessionStorage[ 'connected' ] = false;
utils.update_online_status( $el_online_status, click_events.is_connected );
$el_input_text.val( '' );
$el_input_text.prop( 'placeholder', disconnected_message );
$el_input_text.prop( 'disabled', true );
},
// for creating/joining user created chat room
create_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' );
$el_txtbox_chat_room.keydown(function ( e ) {
var chat_room_name = $el_txtbox_chat_room.val();
if ( ( e.which === 13 || e.keyCode === 13 ) && chat_room_name.length > 0 ) { // if enter is pressed
utils.create_new_tab(chat_room_name, $el_txtbox_chat_room, $el_chat_room_tab, $el_chat_tabs, $el_tab_content, $el_msg_box);
chat_room_name = chat_room_name.trim(); // removes the leading and trailing whitespaces
utils.create_new_tab( chat_room_name, $el_txtbox_chat_room, $el_chat_room_tab, $el_chat_tabs, $el_tab_content, $el_msg_box );
$el_txtbox_chat_room.val( "" ) // clears create room textbox
return false;
}
});
@@ -226,20 +222,21 @@ var click_events = {
leave_close_room: function () {
var tab_counter = "",
room_name = "",
room_index = 0;
room_index = 0,
self = click_events;
$('.close-room').click(function ( e ) {
//$el_last_chat_tab = ;
e.stopPropagation();
// leaves room
// gets room name from the title of anchor tag
room_name = e.target.parentElement.title;
socket.emit( 'leave', {room: room_name} );
// leaves room
socket.emit( 'leave', { room: room_name } );
// removes tab and its content
$( '.tab-content ' + $(this).parent().attr('data-target') ).remove();
$(this).parent().parent().remove();
room_index = click_events.connected_room.indexOf(room_name);
click_events.connected_room.splice(room_index, 1);
$( '.tab-content ' + $( this ).parent().attr( 'data-target' ) ).remove();
$( this ).parent().parent().remove();
room_index = utils.delete_from_rooms( self.connected_room, room_name );
delete self.connected_room[ room_index ];
// selects the last tab and makes it active
$('#chat_tabs a:last').tab('show');
$('#chat_tabs a:last').tab( 'show' );
// hides or shows textarea
utils.show_hide_textarea( $('#chat_tabs a:last') );
// adjusts the left/right scrollers
@@ -257,14 +254,14 @@ var click_events = {
$el_scroll_right.fadeOut('slow');
// performs animation when the scroller is clicked
// and shifts the tab list to the right end
$('.list').animate({left: "+=" + utils.get_width_hidden_list() + "px"}, 'slow', function() { });
$('.list').animate( {left: "+=" + utils.get_width_hidden_list() + "px"}, 'slow', function() { } );
});
$el_scroll_left.click(function() {
$el_scroll_right.fadeIn('slow');
$el_scroll_left.fadeOut('slow');
// performs animation when the scroller is clicked
// and shifts the tab list to the left end
$('.list').animate({left: "-=" + utils.get_list_left_position() + "px"}, 'slow', function() { });
$('.list').animate( {left: "-=" + utils.get_list_left_position() + "px"}, 'slow', function() { } );
});
},
// opens a global chat room
@@ -275,80 +272,98 @@ var click_events = {
$el_tab_content = $( '.tab-content' ),
$el_msg_box = $( '#send_data' ),
chat_room_name = '';
// creates a tab for persistent chat room upon clicking
$('.global-room').click(function( e ) {
e.stopPropagation();
chat_room_name = e.target.parentElement.title;
utils.create_new_tab( chat_room_name, $el_txtbox_chat_room, $el_chat_room_tab, $el_chat_tabs, $el_tab_content, $el_msg_box);
utils.create_new_tab( chat_room_name, $el_txtbox_chat_room, $el_chat_room_tab, $el_chat_tabs, $el_tab_content, $el_msg_box );
return false;
});
},
// deletes chat log on keypress ctrl + l
// for the active chat window
delete_chat: function() {
$(document).keydown(function( e ) {
var message_area_div_id = "",
message_area_id = "",
$el_active_li = $( '.nav-tabs>li.active' );
// detects keypress of ctrl+l
if ( ( e.which == 76 || e.keyCode == 76 ) && e.ctrlKey ) {
message_area_div_id = $el_active_li.find('a').attr( 'data-target' );
message_area_id = $( message_area_div_id + ' .messages' ).attr( 'id' );
if( message_area_id ) { // deletes the chat log
utils.clear_message_area( $( '#' + message_area_id ) );
}
}
});
}
}
// utility methods
var utils = {
// fill in all messages
fill_messages: function (collection) {
fill_messages: function ( collection ) {
var uid = utils.get_userid(),
message_html = $.parseHTML(collection),
$el_all_messages = $('#all_messages');
message_html = $.parseHTML( collection ),
$el_all_messages = $( '#all_messages' );
// clears the previous items
this.clear_message_area();
if (collection) {
$el_all_messages.append($('<div' + '/' + '>').html(message_html));
this.clear_message_area( $el_all_messages );
if ( collection ) {
$el_all_messages.append( $( '<div' + '/' + '>' ).html( message_html ) );
}
// show the last item by scrolling to the end
utils.scroll_to_last($el_all_messages);
utils.scroll_to_last( $el_all_messages );
},
// get the current username of logged in user
get_userid: function () {
//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];
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) {
if ($el[0]) {
$el.scrollTop($el[0].scrollHeight);
// scrolls to the last of the element
scroll_to_last: function ( $el ) {
if ( $el[0] ) {
$el.scrollTop( $el[0].scrollHeight );
}
},
// append message
append_message: function ($el, message) {
$el.append(message);
$el.append('<br>');
append_message: function ( $el, message ) {
$el.append( message );
$el.append( '<br>' );
},
// builds message for self
build_message: function (original_message) {
build_message: function ( original_message ) {
var from_uid = original_message.user,
message_data = original_message.data,
message_user = "",
message_text = "",
uid = utils.get_userid();
message_data = original_message.data,
message_user = "",
message_text = "",
uid = utils.get_userid(),
my_text_name = 'me';
// for user's own messages
if (from_uid === uid) {
message_user = this.build_message_username_template('me');
message_user = this.build_message_username_template( my_text_name );
}
// for other user's messages
else {
message_user = this.build_message_username_template(from_uid);
message_user = this.build_message_username_template( from_uid );
}
message_text = this.build_message_template(message_data);
message_text = this.build_message_template( message_data );
return message_user + message_text;
},
// builds message template
build_message_template: function (original_message) {
return "<div class='user_message'>" + unescape(original_message) +
build_message_template: function ( original_message ) {
return "<div class='user_message'>" + unescape( original_message ) +
"<div class='date_time'><span title=" + this.get_date() + ">" + this.get_time() + "</span>" +
"</div></div>";
},
// builds template for username for message display
build_message_username_template: function (username) {
build_message_username_template: function ( username ) {
return "<span class='user_name'>" + username + "<br></span>";
},
// adds an information about the online status
update_online_status: function ($el, connected) {
var connected_message = "You are online! Press to be offline.",
disconnected_message = "You are offline! Press to be online.";
update_online_status: function ( $el, connected ) {
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" );
}
@@ -372,47 +387,49 @@ var utils = {
var currentdate = new Date(),
day,
month;
month = ( (currentdate.getMonth() + 1 ) < 10) ? ( "0" + (currentdate.getMonth() + 1) ) : ( currentdate.getMonth() + 1 );
month = ( (currentdate.getMonth() + 1 ) < 10) ? ( "0" + ( currentdate.getMonth() + 1 ) ) : ( currentdate.getMonth() + 1 );
day = ( currentdate.getDate() < 10 ) ? ( "0" + currentdate.getDate() ) : currentdate.getDate();
return month + "/" + day + "/" + currentdate.getFullYear();
},
// clears the message list
clear_message_area: function () {
$('#all_messages').html("");
// clears the message area or chat logs
// from the currently active tab
clear_message_area: function ( $el ) {
$el.html( "" );
},
// shows notification when a message is
// pushed to the inactive tab
show_notification: function ($el) {
if (!$el.parent().hasClass('active')) {
$el.css('background-color', '#FCD116');
// shows notification and animating when a message is being
// pushed to an inactive tab(s)
show_notification: function ( $el ) {
if ( !$el.parent().hasClass( 'active' ) ) {
$el.css( 'background-color', '#FCD116' );
for (var i = 2; i >= 1; i--) {
$el.fadeOut(200).fadeIn(200);
// shows the animation
$el.fadeOut( 200 ).fadeIn( 200 );
}
}
},
// adjusts the scrollers when a
// tab is added or deleted
adjust_scrollers: function() {
if ( $('.wrapper').width() < this.get_list_width() ) {
$('.scroller-right').show();
if ( $( '.wrapper' ).width() < this.get_list_width() ) {
$( '.scroller-right' ).show();
}
else {
$('.scroller-right').hide();
$( '.scroller-right' ).hide();
}
if (this.get_list_left_position() < 0) {
$('.scroller-left').show();
if ( this.get_list_left_position() < 0 ) {
$( '.scroller-left' ).show();
}
else {
$('.item').animate( {left: "-=" + this.get_list_left_position() + "px"}, 'slow' );
$('.scroller-left').hide();
$( '.item' ).animate( {left: "-=" + this.get_list_left_position() + "px"}, 'slow' );
$( '.scroller-left' ).hide();
}
},
// gets the widht of all li elements
get_list_width: function() {
var total_width = 0;
$('.list li').each(function() {
var li_width = $(this).width();
$( '.list li' ).each(function() {
var li_width = $( this ).width();
total_width += li_width;
});
return total_width;
@@ -420,38 +437,45 @@ var utils = {
// gets the hidden width of the tab
get_width_hidden_list: function() {
var scroll_icon_width = 50;
return ( $('.wrapper').width() - this.get_list_width() - this.get_list_left_position() - scroll_icon_width );
return ( $( '.wrapper' ).width() - this.get_list_width() - this.get_list_left_position() - scroll_icon_width );
},
get_list_left_position: function() {
return $('.list').position().left;
return $( '.list' ).position().left;
},
// checks the session storage on page load
// and updates connected status
checks_session_storage: function() {
var uid = utils.get_userid();
if ( sessionStorage['connected'] ) {
if ( sessionStorage['connected'] === 'true' || sessionStorage['connected'] === true ) {
utils.update_online_status( $('#online_status'), true );
var uid = utils.get_userid(),
$el_all_messages = $( '#all_messages' ),
$el_online_status = $( '#online_status' ),
$el_textarea = $( '#send_data' );
if ( sessionStorage[ 'connected' ] ) {
if ( sessionStorage[ 'connected' ] === 'true' || sessionStorage[ 'connected' ] === true ) {
utils.update_online_status( $el_online_status, true );
click_events.is_connected = true;
}
else {
click_events.make_disconnect( uid, $('#send_data'), $('#online_status') );
utils.clear_message_area();
click_events.make_disconnect( uid, $el_textarea, $el_online_status );
utils.clear_message_area( $el_all_messages );
}
}
else {
utils.update_online_status( $('#online_status'), true );
utils.update_online_status( $el_online_status, true );
click_events.is_connected = true;
}
},
// show/hide textarea message box
show_hide_textarea: function( $selector ) {
if ( $selector.attr("data-target") === "#chat_room_tab" ) {
$('#send_data').css('display', 'none');
var $el_textarea = $( '#send_data' );
if ( $selector.attr( "data-target" ) === "#chat_room_tab" ) {
$el_textarea.css( 'display', 'none' );
}
else {
$('#send_data').css('display', 'block');
$el_textarea.css('display', 'block');
utils.set_focus_textarea( $el_textarea );
}
},
// save chat logs
store_append_message: function( key, data ) {
if (!localStorage[key]) {
localStorage[key] = data + '<br>';
@@ -459,7 +483,6 @@ var utils = {
else {
localStorage[key] = localStorage[key] + data + '<br>';
}
//sessionStorage[key] = localStorage[key];
},
create_global_chatroom_links: function() {
// global_rooms
@@ -467,7 +490,9 @@ var utils = {
room_name = "",
room_template = "",
persistent_communication_rooms = [];
// gets an array of persistent communication rooms
persistent_communication_rooms = this.get_persistent_rooms();
// creates html template for 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>";
@@ -480,11 +505,14 @@ var utils = {
tab_room_header_template = "",
tab_room_body_template = "",
tab_id = "",
$el_active_li = $('ul>li.active');
message_area_id = "",
$el_active_li = $('ul>li.active'),
$el_textarea = $('#send_data'),
is_room = utils.check_room_by_roomname( self.connected_room, chat_room_name);
// checks if the room is already open and displays it if open
// otherwise create a new one
if(self.connected_room.indexOf(chat_room_name) > -1) {
$el_chat_tabs.find( "a[title='" + chat_room_name + "']" ).tab('show');
if( is_room ) {
$el_chat_tabs.find( "a[data-target='#galaxy_tabroom_" + is_room.id + "']" ).tab('show');
}
else {
// emits join room event
@@ -492,40 +520,80 @@ var utils = {
// removes the active class from the chat creating tab
$el_chat_room_tab.removeClass('fade active in').addClass('fade');
$el_active_li.removeClass('active');
// sets new tab id
tab_id = "galaxy_tabroom_" + chat_room_name;
self.connected_room.push( chat_room_name );
// create tab and message area ids for the
// new tab header and tab content elements
tab_id = "galaxy_tabroom_" + self.tab_counter;
message_area_id = "all_messages_" + self.tab_counter;
self.connected_room.push({
id: self.tab_counter,
name: chat_room_name
});
// create chat room tab header for new room
tab_room_header_template = "<li class='active'><a title=" + chat_room_name + " data-target=" + "#" + tab_id +
" data-toggle='tab' aria-expanded='false'>" + chat_room_name +
tab_room_header_template = "<li class='active'><a title='" + chat_room_name + "' data-target='#" + tab_id +
"' data-toggle='tab' aria-expanded='false'>" + chat_room_name +
"<i class='fa fa-times anchor close-room' title='Close room'></i></a></li>";
$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>";
tab_room_body_template = "<div class='tab-pane active fade in' id='" + tab_id +
"'><div id='" + message_area_id + "'" + " class='messages'></div></div>";
$el_tab_content.append(tab_room_body_template);
// registers leave room event
self.leave_close_room();
click_events.tab_counter++;
}
self.active_element();
// displays the textarea
$el_msg_box.css('display', 'block');
$el_txtbox_chat_room.val("");
utils.set_focus_textarea( $el_textarea );
// adjusts the left/right scrollers when a tab is created
utils.adjust_scrollers();
},
// returns persistent communication rooms
// returns persistent communication rooms from the iframe url
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(',');
},
// returns the room information if it exists
check_room_by_roomname: function( dictionary, room_name ) {
for(var ctr = 0; ctr < dictionary.length; ctr++) {
if( dictionary[ctr] ) {
if( room_name === dictionary[ctr].name ) {
return dictionary[ctr];
}
}
}
},
// returns the index of the room to be deleted
// from the connected room list if the room is left by the user
delete_from_rooms: function( dictionary, item ) {
for(var ctr = 0; ctr < dictionary.length; ctr++) {
if( dictionary[ctr] ) {
if( item === dictionary[ctr].name ) {
return ctr;
}
}
}
},
// sets focus inside the textarea and clears it too
set_focus_textarea: function( $el ) {
$el.val("");
$el.focus();
},
// smooth transition of body element upon first load
load_transition: function() {
$('.body-container').addClass('body-container-loaded');
}
}
// this event fires when all the resources of the page
// have been loaded
$(window).load(function() {
var uid = utils.get_userid();
var uid = utils.get_userid(),
$el_textarea = $('#send_data'),
$el_all_messages = $('#all_messages'),
$el_chat_tabs = $('#chat_tabs');
// build tabs
$('#chat_tabs').tab();
$el_chat_tabs.tab();
// registers response event
events_module.event_response(socket);
// registers room response event
@@ -538,21 +606,24 @@ $(window).load(function() {
click_events.broadcast_data(socket);
// disconnet the user from the chat server
click_events.connect_disconnect(socket);
// show chat history
// registers event for showing chat log
click_events.show_chat_history();
// clears all the messages
click_events.clear_messages();
// deletes full chat history
click_events.delete_history();
click_events.active_element();
click_events.leave_close_room();
// register tab overflow scroll events
click_events.overflow_left_right_scroll();
// registers event for creating persistent rooms
click_events.create_room();
// registers event for deleting chat log
click_events.delete_chat();
// 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'));
$('#send_data').val("");
// scrolls to the last of the element
utils.scroll_to_last( $el_all_messages );
// sets focus to the textarea
utils.set_focus_textarea( $el_textarea );
// sets smooth transition
utils.load_transition();
});