2016-03-14 17:04:27 +01:00
|
|
|
// Converse.js (A browser based XMPP chat client)
|
|
|
|
// http://conversejs.org
|
|
|
|
//
|
|
|
|
// Copyright (c) 2012-2016, Jan-Carel Brand <jc@opkode.com>
|
|
|
|
// Licensed under the Mozilla Public License (MPLv2)
|
|
|
|
//
|
|
|
|
/*global Backbone, define, window */
|
|
|
|
|
|
|
|
(function (root, factory) {
|
|
|
|
define("converse-minimize", [
|
|
|
|
"converse-api",
|
2016-09-23 10:54:55 +02:00
|
|
|
"tpl!chatbox_minimize",
|
|
|
|
"tpl!toggle_chats",
|
|
|
|
"tpl!trimmed_chat",
|
2016-11-22 17:36:39 +01:00
|
|
|
"tpl!chats_panel",
|
2016-03-31 10:40:25 +02:00
|
|
|
"converse-controlbox",
|
|
|
|
"converse-chatview",
|
|
|
|
"converse-muc"
|
2016-03-14 17:04:27 +01:00
|
|
|
], factory);
|
2016-09-23 10:54:55 +02:00
|
|
|
}(this, function (
|
2016-12-20 11:42:20 +01:00
|
|
|
converse,
|
2016-09-23 10:54:55 +02:00
|
|
|
tpl_chatbox_minimize,
|
|
|
|
tpl_toggle_chats,
|
2016-11-22 17:36:39 +01:00
|
|
|
tpl_trimmed_chat,
|
|
|
|
tpl_chats_panel
|
2016-09-23 10:54:55 +02:00
|
|
|
) {
|
2016-03-14 17:04:27 +01:00
|
|
|
"use strict";
|
2016-12-20 11:42:20 +01:00
|
|
|
var $ = converse.env.jQuery,
|
|
|
|
_ = converse.env._,
|
|
|
|
b64_sha1 = converse.env.b64_sha1,
|
|
|
|
moment = converse.env.moment;
|
2016-09-23 10:54:55 +02:00
|
|
|
|
2016-12-20 11:42:20 +01:00
|
|
|
converse.plugins.add('converse-minimize', {
|
2016-03-14 17:04:27 +01:00
|
|
|
|
|
|
|
overrides: {
|
|
|
|
// Overrides mentioned here will be picked up by converse.js's
|
|
|
|
// plugin architecture they will replace existing methods on the
|
|
|
|
// relevant objects or classes.
|
|
|
|
//
|
|
|
|
// New functions which don't exist yet can also be added.
|
|
|
|
|
2016-11-22 17:36:39 +01:00
|
|
|
initChatBoxes: function () {
|
2016-12-20 11:42:20 +01:00
|
|
|
var _converse = this.__super__._converse;
|
2016-11-22 17:36:39 +01:00
|
|
|
var result = this.__super__.initChatBoxes.apply(this, arguments);
|
2016-12-20 10:30:20 +01:00
|
|
|
_converse.minimized_chats = new _converse.MinimizedChats({
|
|
|
|
model: _converse.chatboxes
|
2016-03-14 18:20:21 +01:00
|
|
|
});
|
2016-11-22 17:36:39 +01:00
|
|
|
return result;
|
2016-03-14 18:20:21 +01:00
|
|
|
},
|
|
|
|
|
2016-03-14 17:04:27 +01:00
|
|
|
registerGlobalEventHandlers: function () {
|
2016-12-20 11:42:20 +01:00
|
|
|
var _converse = this.__super__._converse;
|
2016-03-14 17:04:27 +01:00
|
|
|
$(window).on("resize", _.debounce(function (ev) {
|
2016-12-20 10:30:20 +01:00
|
|
|
if (_converse.connection.connected) {
|
|
|
|
_converse.chatboxviews.trimChats();
|
2016-03-28 16:52:00 +02:00
|
|
|
}
|
2016-03-14 17:04:27 +01:00
|
|
|
}, 200));
|
2016-08-31 12:06:17 +02:00
|
|
|
return this.__super__.registerGlobalEventHandlers.apply(this, arguments);
|
2016-03-14 17:04:27 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
wrappedChatBox: function (chatbox) {
|
|
|
|
/* Wrap a chatbox for outside consumption (i.e. so that it can be
|
|
|
|
* returned via the API.
|
|
|
|
*/
|
|
|
|
if (!chatbox) { return; }
|
2016-08-31 12:06:17 +02:00
|
|
|
var box = this.__super__.wrappedChatBox.apply(this, arguments);
|
2016-03-14 17:04:27 +01:00
|
|
|
box.maximize = chatbox.maximize.bind(chatbox);
|
|
|
|
box.minimize = chatbox.minimize.bind(chatbox);
|
|
|
|
return box;
|
|
|
|
},
|
|
|
|
|
|
|
|
ChatBox: {
|
|
|
|
initialize: function () {
|
2016-08-31 12:06:17 +02:00
|
|
|
this.__super__.initialize.apply(this, arguments);
|
2016-03-14 17:04:27 +01:00
|
|
|
if (this.get('id') === 'controlbox') {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.save({
|
|
|
|
'minimized': this.get('minimized') || false,
|
|
|
|
'time_minimized': this.get('time_minimized') || moment(),
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
maximize: function () {
|
|
|
|
this.save({
|
|
|
|
'minimized': false,
|
|
|
|
'time_opened': moment().valueOf()
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
minimize: function () {
|
|
|
|
this.save({
|
|
|
|
'minimized': true,
|
|
|
|
'time_minimized': moment().format()
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2016-03-28 16:08:50 +02:00
|
|
|
ChatBoxView: {
|
|
|
|
events: {
|
|
|
|
'click .toggle-chatbox-button': 'minimize',
|
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function () {
|
|
|
|
this.model.on('change:minimized', this.onMinimizedChanged, this);
|
2016-08-31 12:06:17 +02:00
|
|
|
return this.__super__.initialize.apply(this, arguments);
|
2016-03-28 16:08:50 +02:00
|
|
|
},
|
|
|
|
|
2016-11-30 11:20:11 +01:00
|
|
|
_show: function () {
|
2016-12-20 11:42:20 +01:00
|
|
|
var _converse = this.__super__._converse;
|
2016-11-30 11:20:11 +01:00
|
|
|
this.__super__._show.apply(this, arguments);
|
2016-03-28 16:52:00 +02:00
|
|
|
if (!this.model.get('minimized')) {
|
2016-12-20 10:30:20 +01:00
|
|
|
_converse.chatboxviews.trimChats(this);
|
2016-03-28 16:52:00 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2016-03-28 16:08:50 +02:00
|
|
|
shouldShowOnTextMessage: function () {
|
|
|
|
return !this.model.get('minimized') &&
|
2016-08-31 12:06:17 +02:00
|
|
|
this.__super__.shouldShowOnTextMessage.apply(this, arguments);
|
2016-03-28 16:08:50 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
setChatBoxHeight: function (height) {
|
|
|
|
if (!this.model.get('minimized')) {
|
2016-08-31 12:06:17 +02:00
|
|
|
return this.__super__.setChatBoxHeight.apply(this, arguments);
|
2016-03-28 16:08:50 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
setChatBoxWidth: function (width) {
|
|
|
|
if (!this.model.get('minimized')) {
|
2016-08-31 12:06:17 +02:00
|
|
|
return this.__super__.setChatBoxWidth.apply(this, arguments);
|
2016-03-28 16:08:50 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
onMinimizedChanged: function (item) {
|
|
|
|
if (item.get('minimized')) {
|
|
|
|
this.minimize();
|
|
|
|
} else {
|
|
|
|
this.maximize();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
maximize: function () {
|
2016-03-31 10:40:25 +02:00
|
|
|
// Restores a minimized chat box
|
2016-12-20 11:42:20 +01:00
|
|
|
var _converse = this.__super__._converse;
|
2016-12-20 10:30:20 +01:00
|
|
|
this.$el.insertAfter(_converse.chatboxviews.get("controlbox").$el);
|
2016-11-22 17:42:58 +01:00
|
|
|
this.show();
|
2016-12-20 10:30:20 +01:00
|
|
|
_converse.emit('chatBoxMaximized', this);
|
2016-03-28 16:08:50 +02:00
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
minimize: function (ev) {
|
2016-12-20 11:42:20 +01:00
|
|
|
var _converse = this.__super__._converse;
|
2016-03-28 16:08:50 +02:00
|
|
|
if (ev && ev.preventDefault) { ev.preventDefault(); }
|
|
|
|
// save the scroll position to restore it on maximize
|
|
|
|
this.model.save({'scroll': this.$content.scrollTop()});
|
2016-12-20 10:30:20 +01:00
|
|
|
this.setChatState(_converse.INACTIVE).model.minimize();
|
2016-11-22 17:42:58 +01:00
|
|
|
this.hide();
|
2016-12-20 10:30:20 +01:00
|
|
|
_converse.emit('chatBoxMinimized', this);
|
2016-03-28 16:08:50 +02:00
|
|
|
},
|
2016-03-31 10:40:25 +02:00
|
|
|
},
|
2016-03-28 16:08:50 +02:00
|
|
|
|
2016-03-31 10:40:25 +02:00
|
|
|
ChatRoomView: {
|
|
|
|
events: {
|
|
|
|
'click .toggle-chatbox-button': 'minimize',
|
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function () {
|
|
|
|
this.model.on('change:minimized', function (item) {
|
|
|
|
if (item.get('minimized')) {
|
|
|
|
this.hide();
|
|
|
|
} else {
|
|
|
|
this.maximize();
|
|
|
|
}
|
|
|
|
}, this);
|
2016-08-31 12:06:17 +02:00
|
|
|
var result = this.__super__.initialize.apply(this, arguments);
|
2016-03-31 10:40:25 +02:00
|
|
|
if (this.model.get('minimized')) {
|
|
|
|
this.hide();
|
|
|
|
}
|
|
|
|
return result;
|
2016-12-02 18:41:05 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
generateHeadingHTML: function () {
|
2016-12-20 11:42:20 +01:00
|
|
|
var _converse = this.__super__._converse,
|
|
|
|
__ = _converse.__;
|
2016-12-02 18:41:05 +01:00
|
|
|
var html = this.__super__.generateHeadingHTML.apply(this, arguments);
|
|
|
|
var div = document.createElement('div');
|
|
|
|
div.innerHTML = html;
|
2016-12-20 10:30:20 +01:00
|
|
|
var el = _converse.templates.chatbox_minimize(
|
2016-12-02 18:41:05 +01:00
|
|
|
{info_minimize: __('Minimize this chat box')}
|
|
|
|
);
|
|
|
|
var button = div.querySelector('.close-chatbox-button');
|
|
|
|
button.insertAdjacentHTML('afterend', el);
|
|
|
|
return div.innerHTML;
|
2016-03-31 10:40:25 +02:00
|
|
|
}
|
2016-03-28 16:08:50 +02:00
|
|
|
},
|
|
|
|
|
2016-03-14 17:04:27 +01:00
|
|
|
ChatBoxes: {
|
2016-04-05 13:23:16 +02:00
|
|
|
chatBoxMayBeShown: function (chatbox) {
|
2016-08-31 12:06:17 +02:00
|
|
|
return this.__super__.chatBoxMayBeShown.apply(this, arguments) &&
|
2016-03-14 17:04:27 +01:00
|
|
|
!chatbox.get('minimized');
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
ChatBoxViews: {
|
|
|
|
showChat: function (attrs) {
|
|
|
|
/* Find the chat box and show it. If it doesn't exist, create it.
|
|
|
|
*/
|
2016-08-31 12:06:17 +02:00
|
|
|
var chatbox = this.__super__.showChat.apply(this, arguments);
|
2016-11-30 11:00:12 +01:00
|
|
|
var maximize = _.isUndefined(attrs.maximize) ? true : attrs.maximize;
|
|
|
|
if (chatbox.get('minimized') && maximize) {
|
2016-03-14 17:04:27 +01:00
|
|
|
chatbox.maximize();
|
|
|
|
}
|
|
|
|
return chatbox;
|
|
|
|
},
|
|
|
|
|
|
|
|
getChatBoxWidth: function (view) {
|
|
|
|
if (!view.model.get('minimized') && view.$el.is(':visible')) {
|
|
|
|
return view.$el.outerWidth(true);
|
|
|
|
}
|
|
|
|
return 0;
|
|
|
|
},
|
|
|
|
|
2016-03-30 14:03:15 +02:00
|
|
|
getShownChats: function () {
|
|
|
|
return this.filter(function (view) {
|
2016-06-09 23:25:19 +02:00
|
|
|
// The controlbox can take a while to close,
|
|
|
|
// so we need to check its state. That's why we checked
|
|
|
|
// the 'closed' state.
|
|
|
|
return (
|
|
|
|
!view.model.get('minimized') &&
|
|
|
|
!view.model.get('closed') &&
|
|
|
|
view.$el.is(':visible')
|
|
|
|
);
|
2016-03-30 14:03:15 +02:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2016-03-14 17:04:27 +01:00
|
|
|
trimChats: function (newchat) {
|
|
|
|
/* This method is called when a newly created chat box will
|
2016-03-19 23:16:00 +01:00
|
|
|
* be shown.
|
|
|
|
*
|
|
|
|
* It checks whether there is enough space on the page to show
|
|
|
|
* another chat box. Otherwise it minimizes the oldest chat box
|
|
|
|
* to create space.
|
|
|
|
*/
|
2016-12-20 11:42:20 +01:00
|
|
|
var _converse = this.__super__._converse;
|
2016-03-30 14:03:15 +02:00
|
|
|
var shown_chats = this.getShownChats();
|
2016-12-20 10:30:20 +01:00
|
|
|
if (_converse.no_trimming || shown_chats.length <= 1) {
|
2016-03-30 14:03:15 +02:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (this.getChatBoxWidth(shown_chats[0]) === $('body').outerWidth(true)) {
|
|
|
|
// If the chats shown are the same width as the body,
|
|
|
|
// then we're in responsive mode and the chats are
|
|
|
|
// fullscreen. In this case we don't trim.
|
2016-03-14 17:04:27 +01:00
|
|
|
return;
|
|
|
|
}
|
2016-03-28 16:52:00 +02:00
|
|
|
var oldest_chat, boxes_width, view,
|
2016-12-20 10:30:20 +01:00
|
|
|
$minimized = _converse.minimized_chats.$el,
|
2017-01-26 15:49:02 +01:00
|
|
|
minimized_width = _.includes(this.model.pluck('minimized'), true) ? $minimized.outerWidth(true) : 0,
|
2016-03-14 17:04:27 +01:00
|
|
|
new_id = newchat ? newchat.model.get('id') : null;
|
|
|
|
|
|
|
|
boxes_width = _.reduce(this.xget(new_id), function (memo, view) {
|
|
|
|
return memo + this.getChatBoxWidth(view);
|
|
|
|
}.bind(this), newchat ? newchat.$el.outerWidth(true) : 0);
|
|
|
|
|
|
|
|
if ((minimized_width + boxes_width) > $('body').outerWidth(true)) {
|
|
|
|
oldest_chat = this.getOldestMaximizedChat([new_id]);
|
|
|
|
if (oldest_chat) {
|
2016-03-28 16:52:00 +02:00
|
|
|
// We hide the chat immediately, because waiting
|
|
|
|
// for the event to fire (and letting the
|
|
|
|
// ChatBoxView hide it then) causes race
|
|
|
|
// conditions.
|
|
|
|
view = this.get(oldest_chat.get('id'));
|
|
|
|
if (view) {
|
2016-11-22 17:42:58 +01:00
|
|
|
view.hide();
|
2016-03-28 16:52:00 +02:00
|
|
|
}
|
2016-03-14 17:04:27 +01:00
|
|
|
oldest_chat.minimize();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
getOldestMaximizedChat: function (exclude_ids) {
|
|
|
|
// Get oldest view (if its id is not excluded)
|
2016-03-31 10:40:25 +02:00
|
|
|
exclude_ids.push('controlbox');
|
2016-03-14 17:04:27 +01:00
|
|
|
var i = 0;
|
|
|
|
var model = this.model.sort().at(i);
|
2017-01-26 15:49:02 +01:00
|
|
|
while (_.includes(exclude_ids, model.get('id')) ||
|
2016-03-14 17:04:27 +01:00
|
|
|
model.get('minimized') === true) {
|
|
|
|
i++;
|
|
|
|
model = this.model.at(i);
|
|
|
|
if (!model) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return model;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
initialize: function () {
|
|
|
|
/* The initialize function gets called as soon as the plugin is
|
2016-12-20 10:30:20 +01:00
|
|
|
* loaded by Converse.js's plugin machinery.
|
2016-03-14 17:04:27 +01:00
|
|
|
*/
|
2016-12-20 11:42:20 +01:00
|
|
|
var _converse = this._converse,
|
|
|
|
__ = _converse.__;
|
|
|
|
|
|
|
|
// Add new HTML templates.
|
|
|
|
_converse.templates.chatbox_minimize = tpl_chatbox_minimize;
|
|
|
|
_converse.templates.toggle_chats = tpl_toggle_chats;
|
|
|
|
_converse.templates.trimmed_chat = tpl_trimmed_chat;
|
|
|
|
_converse.templates.chats_panel = tpl_chats_panel;
|
|
|
|
|
2016-03-14 17:04:27 +01:00
|
|
|
this.updateSettings({
|
|
|
|
no_trimming: false, // Set to true for phantomjs tests (where browser apparently has no width)
|
|
|
|
});
|
|
|
|
|
2016-12-20 10:30:20 +01:00
|
|
|
_converse.MinimizedChatBoxView = Backbone.View.extend({
|
2016-03-14 17:04:27 +01:00
|
|
|
tagName: 'div',
|
|
|
|
className: 'chat-head',
|
|
|
|
events: {
|
|
|
|
'click .close-chatbox-button': 'close',
|
|
|
|
'click .restore-chat': 'restore'
|
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function () {
|
|
|
|
this.model.messages.on('add', function (m) {
|
|
|
|
if (m.get('message')) {
|
|
|
|
this.updateUnreadMessagesCounter();
|
|
|
|
}
|
|
|
|
}, this);
|
|
|
|
this.model.on('change:minimized', this.clearUnreadMessagesCounter, this);
|
2016-03-31 10:40:25 +02:00
|
|
|
// OTR stuff, doesn't require this module to depend on OTR.
|
|
|
|
this.model.on('showReceivedOTRMessage', this.updateUnreadMessagesCounter, this);
|
|
|
|
this.model.on('showSentOTRMessage', this.updateUnreadMessagesCounter, this);
|
2016-03-14 17:04:27 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
render: function () {
|
|
|
|
var data = _.extend(
|
|
|
|
this.model.toJSON(),
|
|
|
|
{ 'tooltip': __('Click to restore this chat') }
|
|
|
|
);
|
2016-03-21 12:33:34 +01:00
|
|
|
if (this.model.get('type') === 'chatroom') {
|
2016-03-14 17:04:27 +01:00
|
|
|
data.title = this.model.get('name');
|
|
|
|
this.$el.addClass('chat-head-chatroom');
|
|
|
|
} else {
|
|
|
|
data.title = this.model.get('fullname');
|
|
|
|
this.$el.addClass('chat-head-chatbox');
|
|
|
|
}
|
2016-12-20 10:30:20 +01:00
|
|
|
return this.$el.html(_converse.templates.trimmed_chat(data));
|
2016-03-14 17:04:27 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
clearUnreadMessagesCounter: function () {
|
|
|
|
this.model.set({'num_unread': 0});
|
|
|
|
this.render();
|
|
|
|
},
|
|
|
|
|
|
|
|
updateUnreadMessagesCounter: function () {
|
|
|
|
this.model.set({'num_unread': this.model.get('num_unread') + 1});
|
|
|
|
this.render();
|
|
|
|
},
|
|
|
|
|
|
|
|
close: function (ev) {
|
|
|
|
if (ev && ev.preventDefault) { ev.preventDefault(); }
|
|
|
|
this.remove();
|
2016-12-20 10:30:20 +01:00
|
|
|
var view = _converse.chatboxviews.get(this.model.get('id'));
|
2016-03-28 13:42:33 +02:00
|
|
|
if (view) {
|
|
|
|
// This will call model.destroy(), removing it from the
|
|
|
|
// collection and will also emit 'chatBoxClosed'
|
|
|
|
view.close();
|
|
|
|
} else {
|
|
|
|
this.model.destroy();
|
2016-12-20 10:30:20 +01:00
|
|
|
_converse.emit('chatBoxClosed', this);
|
2016-03-28 13:42:33 +02:00
|
|
|
}
|
2016-03-14 17:04:27 +01:00
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
restore: _.debounce(function (ev) {
|
|
|
|
if (ev && ev.preventDefault) { ev.preventDefault(); }
|
|
|
|
this.model.messages.off('add',null,this);
|
|
|
|
this.remove();
|
|
|
|
this.model.maximize();
|
2017-01-26 15:49:02 +01:00
|
|
|
}, 200, {'leading': true})
|
2016-03-14 17:04:27 +01:00
|
|
|
});
|
|
|
|
|
2016-12-20 10:30:20 +01:00
|
|
|
|
|
|
|
_converse.MinimizedChats = Backbone.Overview.extend({
|
2016-11-22 17:36:39 +01:00
|
|
|
tagName: 'div',
|
|
|
|
id: "minimized-chats",
|
|
|
|
className: 'hidden',
|
2016-03-14 17:04:27 +01:00
|
|
|
events: {
|
|
|
|
"click #toggle-minimized-chats": "toggle"
|
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function () {
|
2016-11-22 17:36:39 +01:00
|
|
|
this.render();
|
2016-03-14 17:04:27 +01:00
|
|
|
this.initToggle();
|
|
|
|
this.model.on("add", this.onChanged, this);
|
|
|
|
this.model.on("destroy", this.removeChat, this);
|
|
|
|
this.model.on("change:minimized", this.onChanged, this);
|
|
|
|
this.model.on('change:num_unread', this.updateUnreadMessagesCounter, this);
|
|
|
|
},
|
|
|
|
|
|
|
|
tearDown: function () {
|
|
|
|
this.model.off("add", this.onChanged);
|
|
|
|
this.model.off("destroy", this.removeChat);
|
|
|
|
this.model.off("change:minimized", this.onChanged);
|
|
|
|
this.model.off('change:num_unread', this.updateUnreadMessagesCounter);
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
initToggle: function () {
|
2016-12-20 10:30:20 +01:00
|
|
|
this.toggleview = new _converse.MinimizedChatsToggleView({
|
|
|
|
model: new _converse.MinimizedChatsToggle()
|
2016-03-14 17:04:27 +01:00
|
|
|
});
|
2016-12-20 10:30:20 +01:00
|
|
|
var id = b64_sha1('converse.minchatstoggle'+_converse.bare_jid);
|
2016-03-14 17:04:27 +01:00
|
|
|
this.toggleview.model.id = id; // Appears to be necessary for backbone.browserStorage
|
2016-12-20 10:30:20 +01:00
|
|
|
this.toggleview.model.browserStorage = new Backbone.BrowserStorage[_converse.storage](id);
|
2016-03-14 17:04:27 +01:00
|
|
|
this.toggleview.model.fetch();
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function () {
|
2016-11-22 17:36:39 +01:00
|
|
|
if (!this.el.parentElement) {
|
2016-12-20 10:30:20 +01:00
|
|
|
this.el.innerHTML = _converse.templates.chats_panel();
|
|
|
|
_converse.chatboxviews.el.appendChild(this.el);
|
2016-11-22 17:36:39 +01:00
|
|
|
}
|
2016-03-14 17:04:27 +01:00
|
|
|
if (this.keys().length === 0) {
|
2016-11-22 17:36:39 +01:00
|
|
|
this.el.classList.add('hidden');
|
2016-12-20 10:30:20 +01:00
|
|
|
_converse.chatboxviews.trimChats.bind(_converse.chatboxviews);
|
2016-11-22 17:36:39 +01:00
|
|
|
} else if (this.keys().length > 0 && !this.$el.is(':visible')) {
|
|
|
|
this.el.classList.remove('hidden');
|
2016-12-20 10:30:20 +01:00
|
|
|
_converse.chatboxviews.trimChats();
|
2016-03-14 17:04:27 +01:00
|
|
|
}
|
|
|
|
return this.$el;
|
|
|
|
},
|
|
|
|
|
|
|
|
toggle: function (ev) {
|
|
|
|
if (ev && ev.preventDefault) { ev.preventDefault(); }
|
|
|
|
this.toggleview.model.save({'collapsed': !this.toggleview.model.get('collapsed')});
|
|
|
|
this.$('.minimized-chats-flyout').toggle();
|
|
|
|
},
|
|
|
|
|
|
|
|
onChanged: function (item) {
|
|
|
|
if (item.get('id') === 'controlbox') {
|
|
|
|
// The ControlBox has it's own minimize toggle
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (item.get('minimized')) {
|
|
|
|
this.addChat(item);
|
|
|
|
} else if (this.get(item.get('id'))) {
|
|
|
|
this.removeChat(item);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
addChat: function (item) {
|
|
|
|
var existing = this.get(item.get('id'));
|
|
|
|
if (existing && existing.$el.parent().length !== 0) {
|
|
|
|
return;
|
|
|
|
}
|
2016-12-20 10:30:20 +01:00
|
|
|
var view = new _converse.MinimizedChatBoxView({model: item});
|
2016-03-14 17:04:27 +01:00
|
|
|
this.$('.minimized-chats-flyout').append(view.render());
|
|
|
|
this.add(item.get('id'), view);
|
|
|
|
this.toggleview.model.set({'num_minimized': this.keys().length});
|
|
|
|
this.render();
|
|
|
|
},
|
|
|
|
|
|
|
|
removeChat: function (item) {
|
|
|
|
this.remove(item.get('id'));
|
|
|
|
this.toggleview.model.set({'num_minimized': this.keys().length});
|
|
|
|
this.render();
|
|
|
|
},
|
|
|
|
|
|
|
|
updateUnreadMessagesCounter: function () {
|
|
|
|
var ls = this.model.pluck('num_unread'),
|
|
|
|
count = 0, i;
|
|
|
|
for (i=0; i<ls.length; i++) { count += ls[i]; }
|
|
|
|
this.toggleview.model.set({'num_unread': count});
|
|
|
|
this.render();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
|
2016-12-20 10:30:20 +01:00
|
|
|
_converse.MinimizedChatsToggle = Backbone.Model.extend({
|
2016-03-14 17:04:27 +01:00
|
|
|
initialize: function () {
|
|
|
|
this.set({
|
|
|
|
'collapsed': this.get('collapsed') || false,
|
|
|
|
'num_minimized': this.get('num_minimized') || 0,
|
|
|
|
'num_unread': this.get('num_unread') || 0
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
|
2016-12-20 10:30:20 +01:00
|
|
|
_converse.MinimizedChatsToggleView = Backbone.View.extend({
|
2016-03-14 17:04:27 +01:00
|
|
|
el: '#toggle-minimized-chats',
|
|
|
|
|
|
|
|
initialize: function () {
|
|
|
|
this.model.on('change:num_minimized', this.render, this);
|
|
|
|
this.model.on('change:num_unread', this.render, this);
|
|
|
|
this.$flyout = this.$el.siblings('.minimized-chats-flyout');
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function () {
|
2016-12-20 10:30:20 +01:00
|
|
|
this.$el.html(_converse.templates.toggle_chats(
|
2016-03-14 17:04:27 +01:00
|
|
|
_.extend(this.model.toJSON(), {
|
|
|
|
'Minimized': __('Minimized')
|
|
|
|
})
|
|
|
|
));
|
|
|
|
if (this.model.get('collapsed')) {
|
|
|
|
this.$flyout.hide();
|
|
|
|
} else {
|
|
|
|
this.$flyout.show();
|
|
|
|
}
|
|
|
|
return this.$el;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2016-12-19 08:33:46 +01:00
|
|
|
var renderMinimizeButton = function (view) {
|
2016-03-31 10:40:25 +02:00
|
|
|
// Inserts a "minimize" button in the chatview's header
|
|
|
|
var $el = view.$el.find('.toggle-chatbox-button');
|
2016-12-20 10:30:20 +01:00
|
|
|
var $new_el = _converse.templates.chatbox_minimize(
|
2016-12-02 18:41:05 +01:00
|
|
|
{info_minimize: __('Minimize this chat box')}
|
2016-03-31 10:40:25 +02:00
|
|
|
);
|
|
|
|
if ($el.length) {
|
|
|
|
$el.replaceWith($new_el);
|
|
|
|
} else {
|
|
|
|
view.$el.find('.close-chatbox-button').after($new_el);
|
|
|
|
}
|
|
|
|
};
|
2016-12-20 10:30:20 +01:00
|
|
|
_converse.on('chatBoxOpened', renderMinimizeButton);
|
2016-03-31 10:40:25 +02:00
|
|
|
|
2016-12-20 10:30:20 +01:00
|
|
|
_converse.on('controlBoxOpened', function (chatbox) {
|
2016-03-14 18:03:14 +01:00
|
|
|
// Wrapped in anon method because at scan time, chatboxviews
|
|
|
|
// attr not set yet.
|
2016-12-20 10:30:20 +01:00
|
|
|
if (_converse.connection.connected) {
|
|
|
|
_converse.chatboxviews.trimChats(chatbox);
|
2016-03-28 16:52:00 +02:00
|
|
|
}
|
2016-03-14 18:03:14 +01:00
|
|
|
});
|
2017-01-31 21:18:06 +01:00
|
|
|
|
|
|
|
var logOut = function () {
|
2016-12-23 05:38:08 +01:00
|
|
|
_converse.minimized_chats.remove();
|
2017-01-31 21:18:06 +01:00
|
|
|
};
|
2016-12-23 05:38:08 +01:00
|
|
|
_converse.on('logout', logOut);
|
2016-03-14 17:04:27 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
}));
|