Skip to content
This repository has been archived by the owner on Nov 21, 2024. It is now read-only.

Updated JS, waiting on CSS. #109

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+81 −41
Open

Updated JS, waiting on CSS. #109

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 81 additions & 41 deletions lefttabs/lefttabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,23 +21,67 @@ CandyShop.LeftTabs = (function(self, Candy, $) {
* Initializes the LeftTabs plugin with the default settings.
*/
self.init = function(){
// Override the scrollToBottom method since our DOM is changed.
Candy.View.Pane.Room.scrollToBottom = function(roomJid) {
var messagePane = Candy.View.Pane.Room.getPane(roomJid, '.message-pane');
messagePane.scrollTop(messagePane.prop('scrollHeight'));
};

Candy.View.Translation.en.dateFormat = 'mm/dd/yyyy';
Candy.View.Translation.en.timeFormat = 'h:MM tt';
Candy.View.Template.Roster = {
pane: '<div class="pane-heading"><span class="title">People</span></div><div class="search-roster hide"><div class="input-group"><input type="text" class="form-control" placeholder="Search" id="search-roster-value" data-toggle="tooltip" title="Searches either name or jid!"><span class="input-group-btn"><button class="btn btn-default" type="button" id="search-roster-value-btn"><i class="glyphicon glyphicon-remove"></i></button></span></div></div><div class="roster-pane"></div>',
user: '<div class="user role-{{role}} affiliation-{{affiliation}}{{#me}} me{{/me}}"' +
' id="user-{{roomId}}-{{userId}}" data-jid="{{userJid}}" data-real-jid="{{realJid}}"' +
' data-nick="{{nick}}" data-role="{{role}}" data-affiliation="{{affiliation}}">' +
'<span class="context" id="context-{{roomId}}-{{userId}}">&#x25BE;</span>&nbsp;' +
'<div class="label">{{displayNick}}</div><ul>' +
'<li class="role role-{{role}} affiliation-{{affiliation}}" data-tooltip="{{tooltipRole}}"></li>' +
'<li class="ignore" data-tooltip="{{tooltipIgnored}}"></li></ul></div>'
};
Candy.View.Template.Message = {
pane: '<div class="message-pane-wrapper"><ul class="message-pane"></ul></div>',
item: '<li class="message">' +
'<a class="label name" href="#">{{displayName}}</a>' +
'<span class="label timestamp">{{time}}</span>' +
'<span class="message-body">{{{message}}}</span>' +
'</li>'
};
Candy.View.Template.Room = {
pane: '<div class="room-pane roomtype-{{roomType}}" id="chat-room-{{roomId}}" data-roomjid="{{roomJid}}" data-roomtype="{{roomType}}">' +
'<div class="col-md-9 full-height">{{> messages}}{{> form}}</div><div class="col-md-3 full-height roster-wrapper">{{> roster}}</div></div>',
subject: '<li class="message subject">' +
'<span class="label timestamp">{{time}}</span>' +
'<span class="message-body">{{_roomSubject}} {{{subject}}}</span>' +
'</li>',
form: '<div class="message-form-wrapper">' +
'<form method="post" class="message-form">' +
'<input name="message" class="field" type="text" aria-label="Message Form Text Field" autocomplete="off" maxlength="1000" />' +
'<input type="submit" class="submit" name="submit" value="{{_messageSubmit}}" />' +
'</form>' +
'</div>'
};
Candy.View.Template.Chat = {
pane: '<div class="row" id="chat-pane">{{> tabs}}{{> toolbar}}{{> rooms}}</div>{{> modal}}',
rooms: '<div id="chat-rooms" class="rooms"></div>',
tabs: '<div id="left-menu-wrapper"><ul id="chat-tabs"></ul></div>',
pane: '<div class="row" id="chat-pane">{{> tabs}}{{> rooms}}{{> toolbar}}</div>{{> modal}}',
rooms: '<div id="chat-rooms-wrapper" class="col-md-10 full-height"><div id="chat-rooms" class="row rooms"></div></div>',
tabs: '<div id="left-menu-wrapper" class="col-md-2 full-height"><div class="pane-heading">Chats</div><ul id="chat-tabs" class="nav nav-tabs nav-stacked"></ul></div>',
tab: '<li class="roomtype-{{roomType}}" data-roomjid="{{roomJid}}" data-roomtype="{{roomType}}">' +
'<a href="#" class="close">\u00D7</a>' +
'<a href="#" class="label">{{#privateUserChat}}<span class="glyphicon glyphicon-user"></span> {{/privateUserChat}}{{name}}</a>' +
'<a href="#" class="transition"></a><a href="#" class="close">\u00D7</a>' +
'<small class="unread"></small></li>',
modal: '<div id="chat-modal"><a id="admin-message-cancel" class="close" href="#">\u00D7</a>' +
'<span id="chat-modal-body"></span>' +
'<img src="{{resourcesPath}}img/modal-spinner.gif" id="chat-modal-spinner" />' +
'<img src="{{assetsPath}}img/modal-spinner.gif" id="chat-modal-spinner" />' +
'</div><div id="chat-modal-overlay"></div>',
adminMessage: '<li><small>{{time}}</small><div class="adminmessage">' +
'<span class="label">{{sender}}</span>' +
'<span class="spacer">▸</span>{{subject}} {{message}}</div></li>',
infoMessage: '<li><small>{{time}}</small><div class="infomessage">' +
'<span class="spacer">•</span>{{subject}} {{message}}</div></li>',
adminMessage: '<li class="message adminmessage">' +
'<span class="label">{{sender}}</span>' +
'<span class="label timestamp">{{time}}</span>' +
'<span class="message-body">{{subject}} {{{message}}}</span>' +
'</li>',
infoMessage: '<li class="message infomessage">' +
'<span class="label timestamp">{{time}}</span>' +
'<span class="message-body">{{subject}} {{{message}}}</span>' +
'</li>',
toolbar: '<ul id="chat-toolbar">' +
'<li id="emoticons-icon" data-tooltip="{{tooltipEmoticons}}"><span class="glyphicon glyphicon-asterisk"></span></li>' +
'<li id="chat-sound-control" class="checked" data-tooltip="{{tooltipSound}}"><span class="glyphicon glyphicon-volume-up"></span><span class="glyphicon glyphicon-volume-off"></span>{{> soundcontrol}}</li>' +
Expand All @@ -48,9 +92,9 @@ CandyShop.LeftTabs = (function(self, Candy, $) {
'<span id="chat-usercount"></span></li></ul>',
soundcontrol: '<script type="text/javascript">var audioplayerListener = new Object();' +
' audioplayerListener.onInit = function() { };' +
'</script><object id="chat-sound-player" type="application/x-shockwave-flash" data="{{resourcesPath}}audioplayer.swf"' +
' width="0" height="0"><param name="movie" value="{{resourcesPath}}audioplayer.swf" /><param name="AllowScriptAccess"' +
' value="always" /><param name="FlashVars" value="listener=audioplayerListener&amp;mp3={{resourcesPath}}notify.mp3" />' +
'</script><object id="chat-sound-player" type="application/x-shockwave-flash" data="{{assetsPath}}audioplayer.swf"' +
' width="0" height="0"><param name="movie" value="{{assetsPath}}audioplayer.swf" /><param name="AllowScriptAccess"' +
' value="always" /><param name="FlashVars" value="listener=audioplayerListener&amp;mp3={{assetsPath}}notify.mp3" />' +
'</object>',
Context: {
menu: '<div id="context-menu"><i class="arrow arrow-top"></i>' +
Expand All @@ -67,47 +111,43 @@ CandyShop.LeftTabs = (function(self, Candy, $) {
'<div></div><i class="arrow arrow-bottom"></i></div>'
};

// Make the message pane the full height of the window.
self.heights();

// Make sure that the window heights are the right size after the window is resized.
$(window).resize(function() {
self.heights();
});

// Make sure that the window heights are the right size after a new room is added.
$(Candy).on('candy:view.room.after-add', function() {
self.heights();
if(typeof CandyShop.CreateRoom == "object") {
if(typeof CandyShop.CreateRoom === "object") {
self.createRoomPluginCompatibility();
self.resetHeight();
}
});

$(Candy).on('candy:view.message.after-show', function(ev, obj) {
if(Candy.View.Pane.Window.autoscroll) {
$('div[data-roomjid="' + obj.roomJid + '"] .message-pane').scrollTop($('div[data-roomjid="' + obj.roomJid + '"] .message-pane').prop('scrollHeight') + $('div[data-roomjid="' + obj.roomJid + '"] .message-form-wrapper').height());
$(Candy).on('candy:view.connection.status-5', self.scheduleResetHeight);
$(Candy).on('candy:view.connection.status-8', self.scheduleResetHeight);

$(window).resize(function() {
if($(window).width() > 992) {
self.resetHeight();
} else {
self.resetHeight('100%');
}
});

};

self.heights = function() {
var barless_height = $(window).height() - $('.message-form-wrapper').height();
var message_pane_height = barless_height;
var message_pane_wrapper_height = (barless_height - parseInt($('.message-pane-wrapper').css('padding-bottom')));
if(CandyShop.RoomBar) {
message_pane_height = barless_height - parseInt($('.roombar').css('height'));
$('.message-pane').css('margin-top', parseInt($('.roombar').css('height')) + 'px');
}
$('.message-pane-wrapper').height(message_pane_wrapper_height + 'px');
$('.message-pane').height(message_pane_height + 'px');
$('.roster-pane').height(barless_height + 'px');
}
self.scheduleResetHeight = function() {
// FIXME: Is there a better way?!
// This happens before the roster loads, but the only roster callback we get would be invoked once for each roster entry, which is far too much.
// Use this hack to correct the viewport a few seconds after login, just in case.
setTimeout(self.resetHeight, 10000);
};

self.createRoomPluginCompatibility = function() {
$('#create-group-form button').addClass('btn');
$('#create-group-form .close-button').html('<span class="glyphicon glyphicon-remove"></span>');
}
};

self.resetHeight = function(value) {
if (typeof value === 'undefined' || value === '') {
value = $(window).height();
}
$('.full-height').css({height: value});
};

return self;
}(CandyShop.LeftTabs || {}, Candy, jQuery));