2021-01-18 12:56:17 +01:00
|
|
|
import { _converse, api, converse } from '@converse/headless/core';
|
|
|
|
import { __ } from 'i18n';
|
|
|
|
|
|
|
|
const u = converse.env.utils;
|
|
|
|
|
|
|
|
|
|
|
|
function getChatBoxWidth (view) {
|
|
|
|
if (view.model.get('id') === 'controlbox') {
|
|
|
|
// We return the width of the controlbox or its toggle,
|
|
|
|
// depending on which is visible.
|
2020-12-08 12:54:14 +01:00
|
|
|
if (u.isVisible(view)) {
|
|
|
|
return u.getOuterWidth(view, true);
|
2021-01-18 12:56:17 +01:00
|
|
|
} else {
|
2021-10-14 17:07:28 +02:00
|
|
|
const toggle = document.querySelector('converse-controlbox-toggle');
|
|
|
|
return toggle ? u.getOuterWidth(toggle, true) : 0;
|
2021-01-18 12:56:17 +01:00
|
|
|
}
|
2020-12-08 12:54:14 +01:00
|
|
|
} else if (!view.model.get('minimized') && u.isVisible(view)) {
|
|
|
|
return u.getOuterWidth(view, true);
|
2021-01-18 12:56:17 +01:00
|
|
|
}
|
|
|
|
return 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
function getShownChats () {
|
2020-12-08 12:54:14 +01:00
|
|
|
return _converse.chatboxviews.filter(el =>
|
2021-01-18 12:56:17 +01:00
|
|
|
// The controlbox can take a while to close,
|
2020-12-08 12:54:14 +01:00
|
|
|
// so we need to check its state. That's why we checked the 'closed' state.
|
|
|
|
!el.model.get('minimized') && !el.model.get('closed') && u.isVisible(el)
|
2021-01-18 12:56:17 +01:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
function getMinimizedWidth () {
|
2021-10-14 17:07:28 +02:00
|
|
|
const minimized_el = document.querySelector('converse-minimized-chats');
|
2021-01-18 12:56:17 +01:00
|
|
|
return _converse.chatboxes.pluck('minimized').includes(true) ? u.getOuterWidth(minimized_el, true) : 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
function getBoxesWidth (newchat) {
|
|
|
|
const new_id = newchat ? newchat.model.get('id') : null;
|
2021-10-14 17:07:28 +02:00
|
|
|
const newchat_width = newchat ? u.getOuterWidth(newchat, true) : 0;
|
2021-01-18 12:56:17 +01:00
|
|
|
return Object.values(_converse.chatboxviews.xget(new_id))
|
|
|
|
.reduce((memo, view) => memo + getChatBoxWidth(view), newchat_width);
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 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.
|
|
|
|
* @private
|
|
|
|
* @method _converse.ChatBoxViews#trimChats
|
|
|
|
* @param { _converse.ChatBoxView|_converse.ChatRoomView|_converse.ControlBoxView|_converse.HeadlinesBoxView } [newchat]
|
|
|
|
*/
|
2021-10-14 17:07:28 +02:00
|
|
|
export function trimChats (newchat) {
|
|
|
|
if (_converse.isTestEnv() || api.settings.get('no_trimming') || api.settings.get("view_mode") !== 'overlayed') {
|
2021-01-18 12:56:17 +01:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
const shown_chats = getShownChats();
|
|
|
|
if (shown_chats.length <= 1) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const body_width = u.getOuterWidth(document.querySelector('body'), true);
|
|
|
|
if (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;
|
|
|
|
}
|
2021-10-14 17:07:28 +02:00
|
|
|
const minimized_el = document.querySelector('converse-minimized-chats');
|
2021-01-18 12:56:17 +01:00
|
|
|
if (minimized_el) {
|
|
|
|
while ((getMinimizedWidth() + getBoxesWidth(newchat)) > body_width) {
|
|
|
|
const new_id = newchat ? newchat.model.get('id') : null;
|
|
|
|
const oldest_chat = getOldestMaximizedChat([new_id]);
|
|
|
|
if (oldest_chat) {
|
2021-10-14 17:07:28 +02:00
|
|
|
const model = _converse.chatboxes.get(oldest_chat.get('id'));
|
|
|
|
model?.save('hidden', true);
|
2021-01-29 15:27:54 +01:00
|
|
|
minimize(oldest_chat);
|
2021-01-18 12:56:17 +01:00
|
|
|
} else {
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function getOldestMaximizedChat (exclude_ids) {
|
|
|
|
// Get oldest view (if its id is not excluded)
|
|
|
|
exclude_ids.push('controlbox');
|
|
|
|
let i = 0;
|
|
|
|
let model = _converse.chatboxes.sort().at(i);
|
|
|
|
while (exclude_ids.includes(model.get('id')) || model.get('minimized') === true) {
|
|
|
|
i++;
|
|
|
|
model = _converse.chatboxes.at(i);
|
|
|
|
if (!model) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return model;
|
|
|
|
}
|
|
|
|
|
|
|
|
export function addMinimizeButtonToChat (view, buttons) {
|
|
|
|
const data = {
|
|
|
|
'a_class': 'toggle-chatbox-button',
|
2021-01-29 15:27:54 +01:00
|
|
|
'handler': ev => minimize(ev, view.model),
|
2021-01-18 12:56:17 +01:00
|
|
|
'i18n_text': __('Minimize'),
|
|
|
|
'i18n_title': __('Minimize this chat'),
|
|
|
|
'icon_class': "fa-minus",
|
|
|
|
'name': 'minimize',
|
|
|
|
'standalone': _converse.api.settings.get("view_mode") === 'overlayed'
|
|
|
|
}
|
|
|
|
const names = buttons.map(t => t.name);
|
|
|
|
const idx = names.indexOf('close');
|
|
|
|
return idx > -1 ? [...buttons.slice(0, idx), data, ...buttons.slice(idx)] : [data, ...buttons];
|
|
|
|
}
|
|
|
|
|
|
|
|
export function addMinimizeButtonToMUC (view, buttons) {
|
|
|
|
const data = {
|
|
|
|
'a_class': 'toggle-chatbox-button',
|
2021-01-29 15:27:54 +01:00
|
|
|
'handler': ev => minimize(ev, view.model),
|
2021-01-18 12:56:17 +01:00
|
|
|
'i18n_text': __('Minimize'),
|
|
|
|
'i18n_title': __('Minimize this groupchat'),
|
|
|
|
'icon_class': "fa-minus",
|
|
|
|
'name': 'minimize',
|
|
|
|
'standalone': _converse.api.settings.get("view_mode") === 'overlayed'
|
|
|
|
}
|
|
|
|
const names = buttons.map(t => t.name);
|
|
|
|
const idx = names.indexOf('signout');
|
|
|
|
return idx > -1 ? [...buttons.slice(0, idx), data, ...buttons.slice(idx)] : [data, ...buttons];
|
|
|
|
}
|
2021-01-29 15:27:54 +01:00
|
|
|
|
|
|
|
|
|
|
|
export function maximize (ev, chatbox) {
|
|
|
|
if (ev?.preventDefault) {
|
|
|
|
ev.preventDefault();
|
|
|
|
} else {
|
|
|
|
chatbox = ev;
|
|
|
|
}
|
|
|
|
u.safeSave(chatbox, {
|
|
|
|
'hidden': false,
|
|
|
|
'minimized': false,
|
|
|
|
'time_opened': new Date().getTime()
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2021-03-11 12:33:50 +01:00
|
|
|
export function minimize (ev, model) {
|
2021-01-29 15:27:54 +01:00
|
|
|
if (ev?.preventDefault) {
|
|
|
|
ev.preventDefault();
|
|
|
|
} else {
|
2021-03-11 12:33:50 +01:00
|
|
|
model = ev;
|
2021-01-29 15:27:54 +01:00
|
|
|
}
|
2021-03-11 12:33:50 +01:00
|
|
|
model.setChatState(_converse.INACTIVE);
|
|
|
|
u.safeSave(model, {
|
2021-01-29 15:27:54 +01:00
|
|
|
'hidden': true,
|
|
|
|
'minimized': true,
|
|
|
|
'time_minimized': new Date().toISOString()
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Handler which gets called when a {@link _converse#ChatBox} has it's
|
|
|
|
* `minimized` property set to false.
|
|
|
|
*
|
|
|
|
* Will trigger {@link _converse#chatBoxMaximized}
|
|
|
|
* @returns {_converse.ChatBoxView|_converse.ChatRoomView}
|
|
|
|
*/
|
2021-03-11 12:33:50 +01:00
|
|
|
function onMaximized (model) {
|
|
|
|
if (!model.isScrolledUp()) {
|
|
|
|
model.clearUnreadMsgCounter();
|
2021-01-29 15:27:54 +01:00
|
|
|
}
|
2021-03-11 12:33:50 +01:00
|
|
|
model.setChatState(_converse.ACTIVE);
|
2021-01-29 15:27:54 +01:00
|
|
|
/**
|
|
|
|
* Triggered when a previously minimized chat gets maximized
|
|
|
|
* @event _converse#chatBoxMaximized
|
|
|
|
* @type { _converse.ChatBoxView }
|
|
|
|
* @example _converse.api.listen.on('chatBoxMaximized', view => { ... });
|
|
|
|
*/
|
2021-03-11 12:33:50 +01:00
|
|
|
api.trigger('chatBoxMaximized', model);
|
2021-01-29 15:27:54 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Handler which gets called when a {@link _converse#ChatBox} has it's
|
|
|
|
* `minimized` property set to true.
|
|
|
|
*
|
|
|
|
* Will trigger {@link _converse#chatBoxMinimized}
|
|
|
|
* @returns {_converse.ChatBoxView|_converse.ChatRoomView}
|
|
|
|
*/
|
2021-03-11 12:33:50 +01:00
|
|
|
function onMinimized (model) {
|
2021-01-29 15:27:54 +01:00
|
|
|
/**
|
|
|
|
* Triggered when a previously maximized chat gets Minimized
|
|
|
|
* @event _converse#chatBoxMinimized
|
|
|
|
* @type { _converse.ChatBoxView }
|
|
|
|
* @example _converse.api.listen.on('chatBoxMinimized', view => { ... });
|
|
|
|
*/
|
2021-03-11 12:33:50 +01:00
|
|
|
api.trigger('chatBoxMinimized', model);
|
2021-01-29 15:27:54 +01:00
|
|
|
}
|
|
|
|
|
2021-03-11 12:33:50 +01:00
|
|
|
export function onMinimizedChanged (model) {
|
|
|
|
if (model.get('minimized')) {
|
|
|
|
onMinimized(model);
|
2021-01-29 15:27:54 +01:00
|
|
|
} else {
|
2021-03-11 12:33:50 +01:00
|
|
|
onMaximized(model);
|
2021-01-29 15:27:54 +01:00
|
|
|
}
|
|
|
|
}
|