From 074fefeda2b10accec700e250e516aa8bd9e6a0b Mon Sep 17 00:00:00 2001 From: anuprulez Date: Mon, 13 Jun 2016 20:48:42 +0200 Subject: [PATCH] Adding features-space enabled chat room names, ctrl+l for chat log deletion, removing delete icon, smooth transition on window load and code cleanup --- .../communication/template/communication.css | 32 +- .../communication/template/communication.html | 14 +- .../communication/template/communication.js | 439 ++++++++++-------- 3 files changed, 285 insertions(+), 200 deletions(-) diff --git a/scripts/communication/template/communication.css b/scripts/communication/template/communication.css index 5d6047b3f3b..7af925f1f8d 100644 --- a/scripts/communication/template/communication.css +++ b/scripts/communication/template/communication.css @@ -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; } diff --git a/scripts/communication/template/communication.html b/scripts/communication/template/communication.html index f1b4370618c..dcc0bbae5ed 100644 --- a/scripts/communication/template/communication.html +++ b/scripts/communication/template/communication.html @@ -5,17 +5,16 @@ - -
+ +
-
-
+
- +
Or click any available room to join
@@ -41,7 +40,7 @@
-
@@ -50,5 +49,6 @@ + diff --git a/scripts/communication/template/communication.js b/scripts/communication/template/communication.js index 1cb611775fd..8ac90e018e4 100644 --- a/scripts/communication/template/communication.js +++ b/scripts/communication/template/communication.js @@ -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($('').html(message_html)); + this.clear_message_area( $el_all_messages ); + if ( collection ) { + $el_all_messages.append( $( '' ).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('
'); + append_message: function ( $el, message ) { + $el.append( message ); + $el.append( '
' ); }, // 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 "
" + unescape(original_message) + + build_message_template: function ( original_message ) { + return "
" + unescape( original_message ) + "
" + this.get_time() + "" + "
"; }, // builds template for username for message display - build_message_username_template: function (username) { + build_message_username_template: function ( username ) { return "" + username + "
"; }, // 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 + '
'; @@ -459,7 +483,6 @@ var utils = { else { localStorage[key] = localStorage[key] + data + '
'; } - //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 = "" + room_name + "
"; @@ -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 = "
    • "; $el_chat_tabs.append( tab_room_header_template ); // create chat room tab body for new room - tab_room_body_template = "
    "; + tab_room_body_template = "
    "; $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(); });