2016-03-14 17:04:27 +01:00
|
|
|
// Converse.js (A browser based XMPP chat client)
|
2019-03-04 17:47:45 +01:00
|
|
|
// https://conversejs.org
|
2016-03-14 17:04:27 +01:00
|
|
|
//
|
2019-02-18 19:17:06 +01:00
|
|
|
// Copyright (c) 2013-2019, Jan-Carel Brand <jc@opkode.com>
|
2016-03-14 17:04:27 +01:00
|
|
|
// Licensed under the Mozilla Public License (MPLv2)
|
2017-08-29 11:08:37 +02:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
import "converse-chatview";
|
2019-05-23 14:26:20 +02:00
|
|
|
import BrowserStorage from "backbone.browserStorage";
|
|
|
|
import { Overview } from "backbone.overview";
|
2018-10-23 03:41:38 +02:00
|
|
|
import converse from "@converse/headless/converse-core";
|
|
|
|
import tpl_chatbox_minimize from "templates/chatbox_minimize.html";
|
|
|
|
import tpl_chats_panel from "templates/chats_panel.html";
|
|
|
|
import tpl_toggle_chats from "templates/toggle_chats.html";
|
|
|
|
import tpl_trimmed_chat from "templates/trimmed_chat.html";
|
|
|
|
|
|
|
|
|
2019-05-06 11:16:56 +02:00
|
|
|
const { _ , Backbone, Promise, Strophe, dayjs } = converse.env;
|
2018-10-23 03:41:38 +02:00
|
|
|
const u = converse.env.utils;
|
|
|
|
|
|
|
|
converse.plugins.add('converse-minimize', {
|
|
|
|
/* Optional dependencies are other plugins which might be
|
|
|
|
* overridden or relied upon, and therefore need to be loaded before
|
|
|
|
* this plugin. They are called "optional" because they might not be
|
|
|
|
* available, in which case any overrides applicable to them will be
|
|
|
|
* ignored.
|
|
|
|
*
|
|
|
|
* It's possible however to make optional dependencies non-optional.
|
|
|
|
* If the setting "strict_plugin_dependencies" is set to true,
|
|
|
|
* an error will be raised if the plugin is not found.
|
|
|
|
*
|
|
|
|
* NB: These plugins need to have already been loaded via require.js.
|
|
|
|
*/
|
2019-05-24 13:52:15 +02:00
|
|
|
dependencies: ["converse-chatview", "converse-controlbox", "converse-muc-views", "converse-headline", "converse-dragresize"],
|
2018-10-23 03:41:38 +02:00
|
|
|
|
|
|
|
enabled (_converse) {
|
2018-12-17 11:50:56 +01:00
|
|
|
return _converse.view_mode === 'overlayed';
|
2018-10-23 03:41:38 +02: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.
|
|
|
|
|
|
|
|
ChatBox: {
|
|
|
|
initialize () {
|
|
|
|
this.__super__.initialize.apply(this, arguments);
|
|
|
|
this.on('show', this.maximize, this);
|
|
|
|
|
|
|
|
if (this.get('id') === 'controlbox') {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.save({
|
|
|
|
'minimized': this.get('minimized') || false,
|
2019-05-06 11:16:56 +02:00
|
|
|
'time_minimized': this.get('time_minimized') || dayjs(),
|
2018-10-23 03:41:38 +02:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2019-04-16 16:36:58 +02:00
|
|
|
maybeShow (force) {
|
|
|
|
if (!force && this.get('minimized')) {
|
|
|
|
// Must return the chatbox
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
return this.__super__.maybeShow.apply(this, arguments);
|
2019-04-16 13:38:46 +02:00
|
|
|
}
|
2017-11-02 15:30:24 +01:00
|
|
|
},
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
ChatBoxView: {
|
|
|
|
events: {
|
|
|
|
'click .toggle-chatbox-button': 'minimize',
|
|
|
|
},
|
2016-03-14 17:04:27 +01:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
initialize () {
|
|
|
|
this.model.on('change:minimized', this.onMinimizedChanged, this);
|
|
|
|
return this.__super__.initialize.apply(this, arguments);
|
|
|
|
},
|
2018-02-21 22:40:51 +01:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
_show () {
|
|
|
|
const { _converse } = this.__super__;
|
2018-12-17 15:00:32 +01:00
|
|
|
if (_converse.view_mode !== 'overlayed') {
|
|
|
|
return this.__super__._show.apply(this, arguments);
|
|
|
|
} else if (!this.model.get('minimized')) {
|
2018-10-23 03:41:38 +02:00
|
|
|
this.__super__._show.apply(this, arguments);
|
|
|
|
_converse.chatboxviews.trimChats(this);
|
|
|
|
} else {
|
2019-06-26 16:32:23 +02:00
|
|
|
this.model.minimize();
|
2018-10-23 03:41:38 +02:00
|
|
|
}
|
|
|
|
},
|
2016-03-28 16:52:00 +02:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
isNewMessageHidden () {
|
|
|
|
return this.model.get('minimized') ||
|
|
|
|
this.__super__.isNewMessageHidden.apply(this, arguments);
|
|
|
|
},
|
2017-05-03 09:06:28 +02:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
shouldShowOnTextMessage () {
|
|
|
|
return !this.model.get('minimized') &&
|
|
|
|
this.__super__.shouldShowOnTextMessage.apply(this, arguments);
|
|
|
|
},
|
2018-03-13 19:11:49 +01:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
setChatBoxHeight (height) {
|
|
|
|
if (!this.model.get('minimized')) {
|
|
|
|
return this.__super__.setChatBoxHeight.apply(this, arguments);
|
|
|
|
}
|
|
|
|
},
|
2016-03-28 16:08:50 +02:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
setChatBoxWidth (width) {
|
|
|
|
if (!this.model.get('minimized')) {
|
|
|
|
return this.__super__.setChatBoxWidth.apply(this, arguments);
|
|
|
|
}
|
2019-05-24 13:52:15 +02:00
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
ChatBoxHeading: {
|
|
|
|
render () {
|
|
|
|
const { _converse } = this.__super__,
|
|
|
|
{ __ } = _converse;
|
|
|
|
const result = this.__super__.render.apply(this, arguments);
|
2019-05-24 13:52:15 +02:00
|
|
|
const new_html = tpl_chatbox_minimize({
|
|
|
|
'info_minimize': __('Minimize this chat box')
|
|
|
|
});
|
2018-10-23 03:41:38 +02:00
|
|
|
const el = this.el.querySelector('.toggle-chatbox-button');
|
|
|
|
if (el) {
|
|
|
|
el.outerHTML = new_html;
|
|
|
|
} else {
|
|
|
|
const button = this.el.querySelector('.close-chatbox-button');
|
|
|
|
button.insertAdjacentHTML('afterEnd', new_html);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
ChatRoomView: {
|
|
|
|
events: {
|
|
|
|
'click .toggle-chatbox-button': 'minimize',
|
|
|
|
},
|
|
|
|
|
|
|
|
initialize () {
|
2019-06-26 16:32:23 +02:00
|
|
|
this.model.on('change:minimized', this.onMinimizedChanged, this);
|
2018-10-23 03:41:38 +02:00
|
|
|
const result = this.__super__.initialize.apply(this, arguments);
|
|
|
|
if (this.model.get('minimized')) {
|
2016-11-22 17:42:58 +01:00
|
|
|
this.hide();
|
2018-05-03 20:05:45 +02:00
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
return result;
|
2018-05-03 20:05:45 +02:00
|
|
|
},
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
generateHeadingHTML () {
|
|
|
|
const { _converse } = this.__super__,
|
|
|
|
{ __ } = _converse;
|
|
|
|
const html = this.__super__.generateHeadingHTML.apply(this, arguments);
|
|
|
|
const div = document.createElement('div');
|
|
|
|
div.innerHTML = html;
|
2019-04-05 14:04:00 +02:00
|
|
|
const buttons_row = div.querySelector('.chatbox-buttons')
|
|
|
|
const button = buttons_row.querySelector('.close-chatbox-button');
|
|
|
|
const minimize_el = tpl_chatbox_minimize({'info_minimize': __('Minimize this chat box')})
|
|
|
|
if (button) {
|
|
|
|
button.insertAdjacentHTML('afterend', minimize_el);
|
|
|
|
} else {
|
|
|
|
buttons_row.insertAdjacentHTML('beforeEnd', minimize_el);
|
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
return div.innerHTML;
|
|
|
|
}
|
2019-05-24 13:52:15 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
initialize () {
|
|
|
|
/* The initialize function gets called as soon as the plugin is
|
|
|
|
* loaded by Converse.js's plugin machinery.
|
|
|
|
*/
|
2019-05-29 13:00:45 +02:00
|
|
|
const { _converse } = this;
|
|
|
|
const { __ } = _converse;
|
2016-03-31 10:40:25 +02:00
|
|
|
|
2019-05-29 13:00:45 +02:00
|
|
|
_converse.api.settings.update({'no_trimming': false});
|
2019-05-24 13:52:15 +02:00
|
|
|
|
|
|
|
const minimizableChatBox = {
|
|
|
|
maximize () {
|
|
|
|
u.safeSave(this, {
|
|
|
|
'minimized': false,
|
|
|
|
'time_opened': (new Date()).getTime()
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
minimize () {
|
|
|
|
u.safeSave(this, {
|
|
|
|
'minimized': true,
|
|
|
|
'time_minimized': (new Date()).toISOString()
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
Object.assign(_converse.ChatBox.prototype, minimizableChatBox);
|
|
|
|
|
|
|
|
|
|
|
|
const minimizableChatBoxView = {
|
2019-06-11 12:16:27 +02:00
|
|
|
/**
|
2019-06-26 16:32:23 +02:00
|
|
|
* Handler which gets called when a {@link _converse#ChatBox} has it's
|
|
|
|
* `minimized` property set to false.
|
|
|
|
*
|
2019-06-11 12:16:27 +02:00
|
|
|
* Will trigger {@link _converse#chatBoxMaximized}
|
2019-06-26 16:32:23 +02:00
|
|
|
* @private
|
2019-06-11 12:16:27 +02:00
|
|
|
* @returns {_converse.ChatBoxView|_converse.ChatRoomView}
|
|
|
|
*/
|
2019-06-26 16:32:23 +02:00
|
|
|
onMaximized () {
|
2019-05-24 13:52:15 +02:00
|
|
|
const { _converse } = this.__super__;
|
|
|
|
this.insertIntoDOM();
|
|
|
|
|
|
|
|
if (!this.model.isScrolledUp()) {
|
|
|
|
this.model.clearUnreadMsgCounter();
|
|
|
|
}
|
2019-06-26 16:32:23 +02:00
|
|
|
this.setChatState(_converse.INACTIVE);
|
2019-05-24 13:52:15 +02:00
|
|
|
this.show();
|
|
|
|
/**
|
|
|
|
* Triggered when a previously minimized chat gets maximized
|
|
|
|
* @event _converse#chatBoxMaximized
|
|
|
|
* @type { _converse.ChatBoxView }
|
|
|
|
* @example _converse.api.listen.on('chatBoxMaximized', view => { ... });
|
|
|
|
*/
|
|
|
|
_converse.api.trigger('chatBoxMaximized', this);
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
2019-06-11 12:16:27 +02:00
|
|
|
/**
|
2019-06-26 16:32:23 +02:00
|
|
|
* Handler which gets called when a {@link _converse#ChatBox} has it's
|
|
|
|
* `minimized` property set to true.
|
|
|
|
*
|
2019-06-11 12:16:27 +02:00
|
|
|
* Will trigger {@link _converse#chatBoxMinimized}
|
2019-06-26 16:32:23 +02:00
|
|
|
* @private
|
2019-06-11 12:16:27 +02:00
|
|
|
* @returns {_converse.ChatBoxView|_converse.ChatRoomView}
|
|
|
|
*/
|
2019-06-26 16:32:23 +02:00
|
|
|
onMinimized (ev) {
|
2019-05-24 13:52:15 +02:00
|
|
|
const { _converse } = this.__super__;
|
|
|
|
if (ev && ev.preventDefault) { ev.preventDefault(); }
|
|
|
|
// save the scroll position to restore it on maximize
|
|
|
|
if (this.model.collection && this.model.collection.browserStorage) {
|
|
|
|
this.model.save({'scroll': this.content.scrollTop});
|
|
|
|
} else {
|
|
|
|
this.model.set({'scroll': this.content.scrollTop});
|
|
|
|
}
|
2019-06-26 16:32:23 +02:00
|
|
|
this.setChatState(_converse.INACTIVE);
|
2019-05-24 13:52:15 +02:00
|
|
|
this.hide();
|
|
|
|
/**
|
|
|
|
* Triggered when a previously maximized chat gets Minimized
|
|
|
|
* @event _converse#chatBoxMinimized
|
|
|
|
* @type { _converse.ChatBoxView }
|
|
|
|
* @example _converse.api.listen.on('chatBoxMinimized', view => { ... });
|
|
|
|
*/
|
|
|
|
_converse.api.trigger('chatBoxMinimized', this);
|
2019-06-11 12:16:27 +02:00
|
|
|
return this;
|
2019-05-24 13:52:15 +02:00
|
|
|
},
|
|
|
|
|
2019-06-26 16:32:23 +02:00
|
|
|
/**
|
|
|
|
* Minimizes a chat box.
|
|
|
|
* @returns {_converse.ChatBoxView|_converse.ChatRoomView}
|
|
|
|
*/
|
|
|
|
minimize (ev) {
|
|
|
|
this.model.minimize();
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
2019-05-24 13:52:15 +02:00
|
|
|
onMinimizedChanged (item) {
|
|
|
|
if (item.get('minimized')) {
|
2019-06-26 16:32:23 +02:00
|
|
|
this.onMinimized();
|
2019-05-24 13:52:15 +02:00
|
|
|
} else {
|
2019-06-26 16:32:23 +02:00
|
|
|
this.onMaximized();
|
2019-05-24 13:52:15 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
Object.assign(_converse.ChatBoxView.prototype, minimizableChatBoxView);
|
|
|
|
|
|
|
|
|
|
|
|
const chatTrimmer = {
|
2018-10-23 03:41:38 +02:00
|
|
|
getChatBoxWidth (view) {
|
2019-05-24 13:52:15 +02:00
|
|
|
if (view.model.get('id') === 'controlbox') {
|
|
|
|
const controlbox = this.get('controlbox');
|
|
|
|
// We return the width of the controlbox or its toggle,
|
|
|
|
// depending on which is visible.
|
|
|
|
if (!controlbox || !u.isVisible(controlbox.el)) {
|
|
|
|
return u.getOuterWidth(_converse.controlboxtoggle.el, true);
|
|
|
|
} else {
|
|
|
|
return u.getOuterWidth(controlbox.el, true);
|
|
|
|
}
|
|
|
|
} else if (!view.model.get('minimized') && u.isVisible(view.el)) {
|
2018-10-23 03:41:38 +02:00
|
|
|
return u.getOuterWidth(view.el, true);
|
2016-03-31 10:40:25 +02:00
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
return 0;
|
2016-03-28 16:08:50 +02:00
|
|
|
},
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
getShownChats () {
|
|
|
|
return this.filter((view) =>
|
|
|
|
// The controlbox can take a while to close,
|
|
|
|
// so we need to check its state. That's why we checked
|
|
|
|
// the 'closed' state.
|
|
|
|
!view.model.get('minimized') &&
|
|
|
|
!view.model.get('closed') &&
|
|
|
|
u.isVisible(view.el)
|
|
|
|
);
|
2016-03-14 17:04:27 +01:00
|
|
|
},
|
|
|
|
|
2019-05-24 15:49:25 +02:00
|
|
|
trimChats: _.debounce(async function (newchat) {
|
2018-10-23 03:41:38 +02:00
|
|
|
/* This method is called when a newly created chat box will
|
|
|
|
* 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.
|
|
|
|
*/
|
2019-05-24 15:49:25 +02:00
|
|
|
if (!_converse.connection.connected || _converse.view_mode !== 'overlayed') {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const shown_chats = this.getShownChats();
|
|
|
|
const body_width = u.getOuterWidth(document.querySelector('body'), true);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
|
|
|
if (_converse.no_trimming || shown_chats.length <= 1) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (this.getChatBoxWidth(shown_chats[0]) === body_width) {
|
|
|
|
// 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.
|
|
|
|
return;
|
|
|
|
}
|
2018-10-24 18:28:28 +02:00
|
|
|
await _converse.api.waitUntil('minimizedChatsInitialized');
|
|
|
|
const minimized_el = _.get(_converse.minimized_chats, 'el'),
|
|
|
|
new_id = newchat ? newchat.model.get('id') : null;
|
|
|
|
|
|
|
|
if (minimized_el) {
|
|
|
|
const minimized_width = _.includes(this.model.pluck('minimized'), true) ?
|
|
|
|
u.getOuterWidth(minimized_el, true) : 0;
|
|
|
|
|
|
|
|
const boxes_width = _.reduce(
|
|
|
|
this.xget(new_id),
|
|
|
|
(memo, view) => memo + this.getChatBoxWidth(view),
|
|
|
|
newchat ? u.getOuterWidth(newchat.el, true) : 0
|
|
|
|
);
|
|
|
|
if ((minimized_width + boxes_width) > body_width) {
|
|
|
|
const oldest_chat = this.getOldestMaximizedChat([new_id]);
|
|
|
|
if (oldest_chat) {
|
|
|
|
// We hide the chat immediately, because waiting
|
|
|
|
// for the event to fire (and letting the
|
|
|
|
// ChatBoxView hide it then) causes race
|
|
|
|
// conditions.
|
|
|
|
const view = this.get(oldest_chat.get('id'));
|
|
|
|
if (view) {
|
|
|
|
view.hide();
|
2016-03-28 16:52:00 +02:00
|
|
|
}
|
2018-10-24 18:28:28 +02:00
|
|
|
oldest_chat.minimize();
|
2016-03-14 17:04:27 +01:00
|
|
|
}
|
|
|
|
}
|
2018-10-24 18:28:28 +02:00
|
|
|
}
|
2019-05-24 15:49:25 +02:00
|
|
|
}, 100),
|
2018-10-23 03:41:38 +02:00
|
|
|
|
|
|
|
getOldestMaximizedChat (exclude_ids) {
|
|
|
|
// Get oldest view (if its id is not excluded)
|
|
|
|
exclude_ids.push('controlbox');
|
|
|
|
let i = 0;
|
|
|
|
let model = this.model.sort().at(i);
|
|
|
|
while (_.includes(exclude_ids, model.get('id')) ||
|
|
|
|
model.get('minimized') === true) {
|
|
|
|
i++;
|
|
|
|
model = this.model.at(i);
|
|
|
|
if (!model) {
|
|
|
|
return null;
|
|
|
|
}
|
2016-03-14 17:04:27 +01:00
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
return model;
|
2016-03-14 17:04:27 +01:00
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
}
|
2019-05-24 13:52:15 +02:00
|
|
|
Object.assign(_converse.ChatBoxViews.prototype, chatTrimmer);
|
2016-03-14 17:04:27 +01:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
|
|
|
|
_converse.api.promises.add('minimizedChatsInitialized');
|
|
|
|
|
|
|
|
_converse.MinimizedChatBoxView = Backbone.NativeView.extend({
|
|
|
|
tagName: 'div',
|
|
|
|
events: {
|
|
|
|
'click .close-chatbox-button': 'close',
|
|
|
|
'click .restore-chat': 'restore'
|
|
|
|
},
|
2016-12-20 11:42:20 +01:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
initialize () {
|
|
|
|
this.model.on('change:num_unread', this.render, this);
|
2019-05-29 13:00:45 +02:00
|
|
|
this.model.on('change:name', this.render, this);
|
|
|
|
this.model.on('change:fullname', this.render, this);
|
|
|
|
this.model.on('change:jid', this.render, this);
|
|
|
|
this.model.on('destroy', this.remove, this);
|
2018-10-23 03:41:38 +02:00
|
|
|
},
|
2016-12-20 11:42:20 +01:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
render () {
|
2019-04-29 09:07:15 +02:00
|
|
|
const data = Object.assign(
|
2019-05-29 13:00:45 +02:00
|
|
|
this.model.toJSON(), {
|
|
|
|
'tooltip': __('Click to restore this chat'),
|
|
|
|
'title': this.model.getDisplayName()
|
|
|
|
});
|
2018-10-23 03:41:38 +02:00
|
|
|
this.el.innerHTML = tpl_trimmed_chat(data);
|
2019-05-29 13:00:45 +02:00
|
|
|
this.setElement(this.el.firstElementChild);
|
2018-10-23 03:41:38 +02:00
|
|
|
return this.el;
|
|
|
|
},
|
2016-03-14 17:04:27 +01:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
close (ev) {
|
|
|
|
if (ev && ev.preventDefault) { ev.preventDefault(); }
|
|
|
|
this.remove();
|
|
|
|
const view = _converse.chatboxviews.get(this.model.get('id'));
|
|
|
|
if (view) {
|
|
|
|
// This will call model.destroy(), removing it from the
|
|
|
|
// collection and will also emit 'chatBoxClosed'
|
|
|
|
view.close();
|
|
|
|
} else {
|
|
|
|
this.model.destroy();
|
2019-03-29 21:10:45 +01:00
|
|
|
_converse.api.trigger('chatBoxClosed', this);
|
2018-10-23 03:41:38 +02:00
|
|
|
}
|
|
|
|
return this;
|
|
|
|
},
|
2016-03-14 17:04:27 +01:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
restore: _.debounce(function (ev) {
|
|
|
|
if (ev && ev.preventDefault) { ev.preventDefault(); }
|
|
|
|
this.model.off('change:num_unread', null, this);
|
|
|
|
this.remove();
|
|
|
|
this.model.maximize();
|
|
|
|
}, 200, {'leading': true})
|
|
|
|
});
|
|
|
|
|
|
|
|
|
2019-05-23 14:26:20 +02:00
|
|
|
_converse.MinimizedChats = Overview.extend({
|
2018-10-23 03:41:38 +02:00
|
|
|
tagName: 'div',
|
|
|
|
id: "minimized-chats",
|
|
|
|
className: 'hidden',
|
|
|
|
events: {
|
|
|
|
"click #toggle-minimized-chats": "toggle"
|
|
|
|
},
|
2016-12-20 10:30:20 +01:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
initialize () {
|
|
|
|
this.render();
|
|
|
|
this.initToggle();
|
|
|
|
this.addMultipleChats(this.model.where({'minimized': true}));
|
|
|
|
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);
|
|
|
|
},
|
2016-03-14 17:04:27 +01:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
render () {
|
|
|
|
if (!this.el.parentElement) {
|
|
|
|
this.el.innerHTML = tpl_chats_panel();
|
|
|
|
_converse.chatboxviews.insertRowColumn(this.el);
|
2016-03-14 17:04:27 +01:00
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
if (this.keys().length === 0) {
|
|
|
|
this.el.classList.add('hidden');
|
|
|
|
} else if (this.keys().length > 0 && !u.isVisible(this.el)) {
|
|
|
|
this.el.classList.remove('hidden');
|
|
|
|
_converse.chatboxviews.trimChats();
|
|
|
|
}
|
|
|
|
return this.el;
|
|
|
|
},
|
2016-03-14 17:04:27 +01:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
initToggle () {
|
|
|
|
const storage = _converse.config.get('storage'),
|
2019-02-18 19:06:11 +01:00
|
|
|
id = `converse.minchatstoggle${_converse.bare_jid}`;
|
2018-10-23 03:41:38 +02:00
|
|
|
this.toggleview = new _converse.MinimizedChatsToggleView({
|
|
|
|
'model': new _converse.MinimizedChatsToggle({'id': id})
|
|
|
|
});
|
2019-05-23 14:26:20 +02:00
|
|
|
this.toggleview.model.browserStorage = new BrowserStorage[storage](id);
|
2018-10-23 03:41:38 +02:00
|
|
|
this.toggleview.model.fetch();
|
|
|
|
},
|
|
|
|
|
|
|
|
toggle (ev) {
|
|
|
|
if (ev && ev.preventDefault) { ev.preventDefault(); }
|
|
|
|
this.toggleview.model.save({'collapsed': !this.toggleview.model.get('collapsed')});
|
|
|
|
u.slideToggleElement(this.el.querySelector('.minimized-chats-flyout'), 200);
|
|
|
|
},
|
|
|
|
|
|
|
|
onChanged (item) {
|
|
|
|
if (item.get('id') === 'controlbox') {
|
|
|
|
// The ControlBox has it's own minimize toggle
|
|
|
|
return;
|
2016-03-14 17:04:27 +01:00
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
if (item.get('minimized')) {
|
|
|
|
this.addChat(item);
|
|
|
|
} else if (this.get(item.get('id'))) {
|
|
|
|
this.removeChat(item);
|
|
|
|
}
|
|
|
|
},
|
2016-03-14 17:04:27 +01:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
addChatView (item) {
|
|
|
|
const existing = this.get(item.get('id'));
|
|
|
|
if (existing && existing.el.parentNode) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const view = new _converse.MinimizedChatBoxView({model: item});
|
|
|
|
this.el.querySelector('.minimized-chats-flyout').insertAdjacentElement('beforeEnd', view.render());
|
|
|
|
this.add(item.get('id'), view);
|
|
|
|
},
|
2016-03-14 17:04:27 +01:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
addMultipleChats (items) {
|
|
|
|
_.each(items, this.addChatView.bind(this));
|
|
|
|
this.toggleview.model.set({'num_minimized': this.keys().length});
|
|
|
|
this.render();
|
|
|
|
},
|
2016-03-14 17:04:27 +01:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
addChat (item) {
|
|
|
|
this.addChatView(item);
|
|
|
|
this.toggleview.model.set({'num_minimized': this.keys().length});
|
|
|
|
this.render();
|
|
|
|
},
|
2016-03-14 17:04:27 +01:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
removeChat (item) {
|
|
|
|
this.remove(item.get('id'));
|
|
|
|
this.toggleview.model.set({'num_minimized': this.keys().length});
|
|
|
|
this.render();
|
|
|
|
},
|
2016-03-14 17:04:27 +01:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
updateUnreadMessagesCounter () {
|
2018-12-06 12:45:30 +01:00
|
|
|
this.toggleview.model.save({'num_unread': _.sum(this.model.pluck('num_unread'))});
|
2018-10-23 03:41:38 +02:00
|
|
|
this.render();
|
|
|
|
}
|
|
|
|
});
|
2017-08-16 12:31:17 +02:00
|
|
|
|
2018-05-30 17:16:26 +02:00
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
_converse.MinimizedChatsToggle = Backbone.Model.extend({
|
|
|
|
defaults: {
|
|
|
|
'collapsed': false,
|
|
|
|
'num_minimized': 0,
|
|
|
|
'num_unread': 0
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
_converse.MinimizedChatsToggleView = Backbone.NativeView.extend({
|
|
|
|
el: '#toggle-minimized-chats',
|
|
|
|
|
|
|
|
initialize () {
|
|
|
|
this.model.on('change:num_minimized', this.render, this);
|
|
|
|
this.model.on('change:num_unread', this.render, this);
|
|
|
|
this.flyout = this.el.parentElement.querySelector('.minimized-chats-flyout');
|
|
|
|
},
|
|
|
|
|
|
|
|
render () {
|
|
|
|
this.el.innerHTML = tpl_toggle_chats(
|
2019-04-29 09:07:15 +02:00
|
|
|
Object.assign(this.model.toJSON(), {
|
2018-10-23 03:41:38 +02:00
|
|
|
'Minimized': __('Minimized')
|
|
|
|
})
|
|
|
|
);
|
|
|
|
if (this.model.get('collapsed')) {
|
|
|
|
u.hideElement(this.flyout);
|
|
|
|
} else {
|
|
|
|
u.showElement(this.flyout);
|
|
|
|
}
|
|
|
|
return this.el;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2019-05-24 13:52:15 +02:00
|
|
|
/************************ BEGIN Event Handlers ************************/
|
2018-11-20 17:31:53 +01:00
|
|
|
Promise.all([
|
|
|
|
_converse.api.waitUntil('connectionInitialized'),
|
|
|
|
_converse.api.waitUntil('chatBoxViewsInitialized')
|
|
|
|
]).then(() => {
|
2018-10-26 10:14:00 +02:00
|
|
|
_converse.minimized_chats = new _converse.MinimizedChats({
|
|
|
|
model: _converse.chatboxes
|
|
|
|
});
|
2019-03-29 21:36:49 +01:00
|
|
|
/**
|
|
|
|
* Triggered once the _converse.MinimizedChats instance has been * initialized
|
|
|
|
* @event _converse#minimizedChatsInitialized
|
|
|
|
* @example _converse.api.listen.on('minimizedChatsInitialized', () => { ... });
|
|
|
|
*/
|
|
|
|
_converse.api.trigger('minimizedChatsInitialized');
|
2018-10-26 10:14:00 +02:00
|
|
|
}).catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL));
|
|
|
|
|
2018-05-30 17:16:26 +02:00
|
|
|
|
2019-05-24 15:49:25 +02:00
|
|
|
const trimChats = () => _converse.chatboxviews.trimChats();
|
|
|
|
_converse.api.listen.on('controlBoxOpened', trimChats);
|
|
|
|
_converse.api.listen.on('registeredGlobalEventHandlers', () => window.addEventListener("resize", trimChats));
|
|
|
|
_converse.api.listen.on('unregisteredGlobalEventHandlers', () => window.removeEventListener("resize", trimChats));
|
2019-05-24 13:52:15 +02:00
|
|
|
/************************ END Event Handlers ************************/
|
2018-10-23 03:41:38 +02:00
|
|
|
}
|
|
|
|
});
|