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

added horizontal scroll in case of multiple tabs/rooms

Browse Source
This commit is contained in:
anuprulez
2016-06-07 02:14:58 +02:00
parent 5b19657142
commit 009cbe4cb4
1 changed files with 202 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scripts/communication/template/communication.html
+202 -116
View File
@@ -10,48 +10,17 @@
}
/* Styles for message text box */
.clearable {
background: #fff url(http://i.stack.imgur.com/mJotv.gif) no-repeat right -10px center;
border: 1px solid #999;
padding: 3px 18px 3px 4px;
border-radius: 3px;
transition: background 0.4s;
}
.clearable.x {
background-position: right 5px center;
}
.clearable.onX {
cursor: pointer;
}
.clearable::-ms-clear {
display: none;
width: 0;
height: 0;
}
.size-message {
height: 60px;
height: 50px;
width: 99.5%;
margin-top: 2px;
}
/* Styles for top right icons */
.right_icons {
margin-left: 92%;
position: fixed;
}
#chat_tabs,
#txtbox_chat_room {
margin-top: 2px;
margin-left: 2px;
}
ul, li,
.user,
.anchor {
cursor: pointer;
color: black;
@@ -94,27 +63,78 @@
height: 100%;
}
.nav li a {
padding: 7px 7px;
}
ul > li i {
padding-left: 4px;
font-size: 12px;
}
/****styles for overflow tabs****/
.wrapper {
position: relative;
margin: 0 auto;
overflow: hidden;
height: 45px;
}
.list {
position: absolute;
left: 0px;
top: 0px;
min-width: 3000px;
margin-top: 0px;
}
.list li {
display: table-cell;
position: relative;
text-align: center;
color: #efefef;
vertical-align: middle;
}
.scroller {
text-align: center;
cursor: pointer;
display: none;
padding: 5px;
padding-top: 9px;
vertical-align: middle;
background-color: #fff;
}
.scroller-right {
float: right;
}
.scroller-left {
float: left;
}
</style>
</head>
<body style="overflow: hidden; height: 100%" ;>
<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="group_chat" class="anchor fa fa-users" aria-hidden="true" title=""></i> -->
<i id="clear_messages" class="anchor fa fa-trash-o" aria-hidden="true" title="Clear all messages"></i>
</div>
<ul class="nav nav-tabs" id="chat_tabs">
<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'>All Chats</a>
<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'>Chat Room</a>
<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">
<div id="all_messages" class="messages"></div>
@@ -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 = "<li class='active'><a title=" + tab_name + " data-target=" + "#" + tab_id +
" data-toggle='tab' aria-expanded='false'>" + tab_name +
"<i class='fa fa-times anchor close-room' title='Close room'></i></a></li>";
$('#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 = "<li class='active'><a data-target=" + "#" + tab_id + " data-toggle='tab' aria-expanded='false'>" + self.connected_room[self.connected_room.length - 1] + "<i class='fa fa-times anchor close-room' title='Close room'></i></a></li>";
$('#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_" + self.tab_id_number + "'" + " class='messages'></div></div>";
$('.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 = "<div class='tab-pane active fade in' id=" + tab_id +
"><div id='all_messages_" + self.tab_id_number + "'" + " class='messages'></div></div>";
$('.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'));
});
</script>
</body>
</html>