@@ -206,7 +226,6 @@
break;
}
}
- ;
$el_room_msg = $("#all_messages_" + tab_counter);
utils.append_message($el_room_msg, utils.build_message(msg.data.split(':'), uid));
utils.scroll_to_last($el_room_msg);
@@ -261,14 +280,16 @@
// sets the current active tab
active_element: function () {
$('.nav-tabs>li').click(function (e) {
- click_events.active_tab = e.target.attributes['data-target'].nodeValue;
- $(this).children().css('background-color', '');
- // hides the message textarea for create room tab
- if ($(this).children().attr("data-target") === "#chat_room_tab") {
- $('#send_data').css('display', 'none');
- }
- else {
- $('#send_data').css('display', 'block');
+ if( e.target.attributes['data-target'] ) {
+ click_events.active_tab = e.target.attributes['data-target'].nodeValue;
+ $(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) );
+ }
}
});
},
@@ -296,7 +317,7 @@
},
// clear all the messages
clear_messages: function () {
- $('#clear_messages').click(function (event) {
+ $('#clear_messages').click(function ( e ) {
// clears all the messages
utils.clear_message_area();
return false;
@@ -334,36 +355,45 @@
// for creating/joining chat room
create_chat_room: function (socket) {
var $el_txtbox_chat_room = $('#txtbox_chat_room'),
- tab_room_header_template = "",
- tab_room_body_template = "",
- tab_id = "",
- self = this;
+ $el_chat_room_tab = $('#chat_room_tab'),
+ tab_room_header_template = "",
+ tab_room_body_template = "",
+ tab_id = "",
+ tab_name = "",
+ self = this;
$el_txtbox_chat_room.keydown(function (e) {
+ var chat_room_name = $el_txtbox_chat_room.val();
if (e.which === 13 || e.keyCode === 13) {
- socket.emit('join', {room: $el_txtbox_chat_room.val(), userjoin: utils.get_userdata()});
- self.connected_room.push($el_txtbox_chat_room.val());
+ if( chat_room_name.length > 0 ) {
+ socket.emit('join', {room: chat_room_name, userjoin: utils.get_userdata()});
+ self.connected_room.push( chat_room_name );
+ // removes the active class from the chat creating tab
+ $el_chat_room_tab.removeClass('fade active in').addClass('fade');
+ $('ul>li.active').removeClass('active');
+ // sets new tab id
+ tab_id = "tabroom_" + self.tab_id_number;
+ tab_name = self.connected_room[self.connected_room.length - 1];
+ // create chat room tab header for new room
+ tab_room_header_template = "
" + tab_name +
+ "";
+ $('#chat_tabs').append( tab_room_header_template );
- // removes the active class from the chat creating tab
- $('#chat_room_tab').removeClass('fade active in').addClass('fade');
- $('ul>li.active').removeClass('active');
-
- // sets new tab id
- tab_id = "tabroom_" + self.tab_id_number;
-
- // create chat room tab header for new room
- tab_room_header_template = "
" + self.connected_room[self.connected_room.length - 1] + "";
- $('#chat_tabs').append(tab_room_header_template);
-
- // create chat room tab body for new room
- tab_room_body_template = "
";
- $('.tab-content').append(tab_room_body_template);
- self.leave_close_room();
- self.active_element();
- $el_txtbox_chat_room.val("");
- self.tab_id_number++;
- // displays the textarea
- $('#send_data').css('display', 'block');
- return false;
+ // create chat room tab body for new room
+ tab_room_body_template = "
";
+ $('.tab-content').append(tab_room_body_template);
+ self.leave_close_room();
+ self.active_element();
+ $el_txtbox_chat_room.val("");
+ self.tab_id_number++;
+ // displays the textarea
+ $('#send_data').css('display', 'block');
+ // adjusts the left/right scrollers
+ // when a tab is created
+ utils.adjust_scrollers();
+ return false;
+ }
}
});
},
@@ -381,14 +411,29 @@
// selects the last tab and makes it active
$('#chat_tabs a:last').tab('show');
// hides or shows textarea
- if ($('#chat_tabs a:last').attr("data-target") === "#chat_room_tab") {
- $('#send_data').css('display', 'none');
- }
- else {
- $('#send_data').css('display', 'block');
- }
+ utils.show_hide_textarea( $('#chat_tabs a:last') );
+ // adjusts the left/right scrollers
+ // when a tab is deleted
+ utils.adjust_scrollers();
return false;
});
+ },
+ // registers overflow tabs left/right click events
+ overflow_left_right_scroll: function() {
+ $('.scroller-right').click(function() {
+ $('.scroller-left').fadeIn('slow');
+ $('.scroller-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() { });
+ });
+ $('.scroller-left').click(function() {
+ $('.scroller-right').fadeIn('slow');
+ $('.scroller-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() { });
+ });
},
}
// utility methods
@@ -475,7 +520,7 @@
$el.prop("title", "You are offline! Press to be online.").css( "color", "#FF0000");
}
},
- // gets the current date and time
+ // gets the current time
get_time: function () {
var currentdate = new Date(),
datetime = "",
@@ -486,6 +531,7 @@
datetime = hours + ":" + minutes;
return datetime;
},
+ // gets the current date
get_date: function () {
var currentdate = new Date(),
day,
@@ -494,12 +540,12 @@
day = ( currentdate.getDate() < 10 ) ? ( "0" + currentdate.getDate() ) : currentdate.getDate();
return month + "/" + day + "/" + currentdate.getFullYear();
},
- set_user_info: function () {
- $('.user').prop('title', this.get_username());
- },
+ // clears the message list
clear_message_area: function () {
$('#all_messages').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');
@@ -508,49 +554,82 @@
}
}
},
+ // adjusts the scrollers when a
+ // tab is added or deleted
+ adjust_scrollers: function() {
+ if ( $('.wrapper').width() < this.get_list_width() ) {
+ $('.scroller-right').show();
+ }
+ else {
+ $('.scroller-right').hide();
+ }
+
+ if (this.get_list_left_position() < 0) {
+ $('.scroller-left').show();
+ }
+ else {
+ $('.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();
+ total_width += li_width;
+ });
+ return total_width;
+ },
+ // 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 );
+ },
+ get_list_left_position: function() {
+ return $('.list').position().left;
+ },
+ // checks the session storage on page load
+ checks_session_storage: function() {
+ if (sessionStorage['connected']) {
+ if (sessionStorage['connected'] === 'true' || sessionStorage['connected'] === true) {
+ utils.update_online_status($('#online_status'), true);
+ click_events.is_connected = true;
+ }
+ else {
+ click_events.make_disconnect(uid, $('#send_data'), $('#online_status'));
+ utils.clear_message_area();
+ }
+ }
+ else {
+ utils.update_online_status($('#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');
+ }
+ else {
+ $('#send_data').css('display', 'block');
+ }
+ },
}
- // this snippet is for adding a clear icon in the message textbox
- function tog(v) {
- return v ? 'addClass' : 'removeClass';
- }
- $(document).on('input', '.clearable', function () {
- $(this)[tog(this.value)]('x');
- }).on('mousemove', '.x', function (e) {
- $(this)[tog(this.offsetWidth - 18 < e.clientX - this.getBoundingClientRect().left)]('onX');
- }).on('touchstart click', '.onX', function (ev) {
- ev.preventDefault();
- $(this).removeClass('x onX').val('').change();
- });
+
// 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
var uid = utils.get_userid();
- utils.fill_messages(sessionStorage[uid]);
- // updates online status text
- // by checking if user was connected or not
- if (sessionStorage['connected']) {
- if (sessionStorage['connected'] === 'true' || sessionStorage['connected'] === true) {
- utils.update_online_status($('#online_status'), true);
- click_events.is_connected = true;
- }
- else {
- click_events.make_disconnect(uid, $('#send_data'), $('#online_status'));
- utils.clear_message_area();
- }
- }
- else {
- utils.update_online_status($('#online_status'), true);
- click_events.is_connected = true;
- }
- // set user info to the user icon
- utils.set_user_info();
+
// 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
@@ -565,12 +644,19 @@
click_events.delete_history();
click_events.active_element();
click_events.leave_close_room();
- //utils.get_time();
- utils.scroll_to_last($('#all_messages'));
+ // register tab overflow scroll events
+ click_events.overflow_left_right_scroll();
+
// build tabs
$('#chat_tabs').tab();
$('#send_data').val("");
+ utils.fill_messages(sessionStorage[uid]);
+ // updates online status text
+ // by checking if user was connected or not
+ utils.checks_session_storage();
+ utils.scroll_to_last($('#all_messages'));
});
+