Call minimize on the model

Fix minimizing by listening to change event

Fixes around showing/hiding and minimizing/maximizing

Don't trigger a `show` event on the model to show a chat, instead rely
on the `hidden` attribute which causes a rerender and will show/hide
chats.
This commit is contained in:
JC Brand 2021-01-25 22:04:01 +01:00
parent 704b50fb3e
commit 05c00c5e1c
10 changed files with 26 additions and 31 deletions

View File

@ -641,6 +641,8 @@ window.addEventListener('converse-loaded', () => {
'view_mode': mock.view_mode 'view_mode': mock.view_mode
}, settings || {})); }, settings || {}));
window._converse = _converse;
_converse.api.vcard.get = function (model, force) { _converse.api.vcard.get = function (model, force) {
let jid; let jid;
if (typeof model === 'string' || model instanceof String) { if (typeof model === 'string' || model instanceof String) {

View File

@ -910,11 +910,12 @@ const ChatBox = ModelWithContact.extend({
} }
u.safeSave(this, {'hidden': false}); u.safeSave(this, {'hidden': false});
} }
if (_converse.isUniView() && this.get('hidden')) { if (_converse.isUniView()) {
return; return;
} else { } else {
return this.trigger("show"); u.safeSave(this, {'hidden': false});
} }
return this;
}, },
/** /**

View File

@ -9,11 +9,12 @@ class ConverseChats extends ElementView {
initialize () { initialize () {
this.model = _converse.chatboxes; this.model = _converse.chatboxes;
this.listenTo(this.model, 'destroy', this.render);
this.listenTo(this.model, 'add', this.render); this.listenTo(this.model, 'add', this.render);
this.listenTo(this.model, 'change:hidden', this.render);
this.listenTo(this.model, 'change:closed', this.render); this.listenTo(this.model, 'change:closed', this.render);
this.listenTo(this.model, 'change:hidden', this.render);
this.listenTo(this.model, 'change:jid', this.render); this.listenTo(this.model, 'change:jid', this.render);
this.listenTo(this.model, 'change:minimized', this.render);
this.listenTo(this.model, 'destroy', this.render);
const bg = document.getElementById('conversejs-bg'); const bg = document.getElementById('conversejs-bg');
if (bg && !bg.innerHTML.trim()) { if (bg && !bg.innerHTML.trim()) {

View File

@ -44,9 +44,9 @@ export default class ChatView extends BaseChatView {
api.listen.on('windowStateChanged', this.onWindowStateChanged); api.listen.on('windowStateChanged', this.onWindowStateChanged);
this.listenTo(this.model, 'change:composing_spoiler', this.renderMessageForm); this.listenTo(this.model, 'change:composing_spoiler', this.renderMessageForm);
this.listenTo(this.model, 'change:hidden', m => (!m.get('hidden') && this.show())); this.listenTo(this.model, 'change:hidden', () => this.afterShown());
this.listenTo(this.model, 'change:minimized', () => this.afterShown());
this.listenTo(this.model, 'change:status', this.onStatusMessageChanged); this.listenTo(this.model, 'change:status', this.onStatusMessageChanged);
this.listenTo(this.model, 'show', this.show);
this.listenTo(this.model, 'vcard:change', this.renderHeading); this.listenTo(this.model, 'vcard:change', this.renderHeading);
if (this.model.contact) { if (this.model.contact) {

View File

@ -1,4 +1,6 @@
import { _converse, api } from "@converse/headless/core"; import { _converse, api, converse } from "@converse/headless/core";
const { u } = converse.env;
export default { export default {
/** /**
@ -18,7 +20,7 @@ export default {
await api.waitUntil('chatBoxesFetched'); await api.waitUntil('chatBoxesFetched');
const model = await api.chatboxes.get('controlbox') || const model = await api.chatboxes.get('controlbox') ||
api.chatboxes.create('controlbox', {}, _converse.Controlbox); api.chatboxes.create('controlbox', {}, _converse.Controlbox);
model.trigger('show'); u.safeSave(model, {'closed': false});
return model; return model;
}, },

View File

@ -27,11 +27,7 @@ class ControlBoxToggle extends ElementView {
if (!controlbox) { if (!controlbox) {
controlbox = addControlBox(); controlbox = addControlBox();
} }
if (api.connection.connected()) { u.safeSave(controlbox, {'closed': false});
controlbox.save({'closed': false});
} else {
controlbox.trigger('show');
}
} }
onClick (e) { onClick (e) {

View File

@ -50,7 +50,7 @@ converse.plugins.add('converse-minimize', {
ChatBox: { ChatBox: {
initialize () { initialize () {
this.__super__.initialize.apply(this, arguments); this.__super__.initialize.apply(this, arguments);
this.on('show', this.maximize, this); this.on('change:hidden', m => !m.get('hidden') && this.maximize(), this);
if (this.get('id') === 'controlbox') { if (this.get('id') === 'controlbox') {
return; return;
@ -75,16 +75,6 @@ converse.plugins.add('converse-minimize', {
}, },
ChatBoxView: { ChatBoxView: {
show () {
const { _converse } = this.__super__;
if (_converse.api.settings.get("view_mode") === 'overlayed' && this.model.get('minimized')) {
this.model.minimize();
return this;
} else {
return this.__super__.show.apply(this, arguments);
}
},
isNewMessageHidden () { isNewMessageHidden () {
return this.model.get('minimized') || return this.model.get('minimized') ||
this.__super__.isNewMessageHidden.apply(this, arguments); this.__super__.isNewMessageHidden.apply(this, arguments);

View File

@ -5,6 +5,7 @@ const u = converse.env.utils;
export const minimizableChatBox = { export const minimizableChatBox = {
maximize () { maximize () {
u.safeSave(this, { u.safeSave(this, {
'hidden': false,
'minimized': false, 'minimized': false,
'time_opened': new Date().getTime() 'time_opened': new Date().getTime()
}); });
@ -12,6 +13,7 @@ export const minimizableChatBox = {
minimize () { minimize () {
u.safeSave(this, { u.safeSave(this, {
'hidden': true,
'minimized': true, 'minimized': true,
'time_minimized': new Date().toISOString() 'time_minimized': new Date().toISOString()
}); });

View File

@ -104,7 +104,7 @@ function getOldestMaximizedChat (exclude_ids) {
export function addMinimizeButtonToChat (view, buttons) { export function addMinimizeButtonToChat (view, buttons) {
const data = { const data = {
'a_class': 'toggle-chatbox-button', 'a_class': 'toggle-chatbox-button',
'handler': ev => view.minimize(ev), 'handler': ev => view.model.minimize(ev),
'i18n_text': __('Minimize'), 'i18n_text': __('Minimize'),
'i18n_title': __('Minimize this chat'), 'i18n_title': __('Minimize this chat'),
'icon_class': "fa-minus", 'icon_class': "fa-minus",
@ -119,7 +119,7 @@ export function addMinimizeButtonToChat (view, buttons) {
export function addMinimizeButtonToMUC (view, buttons) { export function addMinimizeButtonToMUC (view, buttons) {
const data = { const data = {
'a_class': 'toggle-chatbox-button', 'a_class': 'toggle-chatbox-button',
'handler': ev => view.minimize(ev), 'handler': ev => view.model.minimize(ev),
'i18n_text': __('Minimize'), 'i18n_text': __('Minimize'),
'i18n_title': __('Minimize this groupchat'), 'i18n_title': __('Minimize this groupchat'),
'icon_class': "fa-minus", 'icon_class': "fa-minus",

View File

@ -89,6 +89,8 @@ export default class MUCView extends BaseChatView {
debounce(() => this.renderHeading(), 250) debounce(() => this.renderHeading(), 250)
); );
this.listenTo(this.model, 'change:composing_spoiler', this.renderMessageForm); this.listenTo(this.model, 'change:composing_spoiler', this.renderMessageForm);
this.listenTo(this.model, 'change:hidden', () => this.afterShown());
this.listenTo(this.model, 'change:minimized', () => this.afterShown());
this.listenTo(this.model, 'change:hidden_occupants', this.onSidebarToggle); this.listenTo(this.model, 'change:hidden_occupants', this.onSidebarToggle);
this.listenTo(this.model, 'configurationNeeded', this.getAndRenderConfigurationForm); this.listenTo(this.model, 'configurationNeeded', this.getAndRenderConfigurationForm);
this.listenTo(this.model, 'show', this.show); this.listenTo(this.model, 'show', this.show);
@ -695,12 +697,11 @@ export default class MUCView extends BaseChatView {
* @method _converse.ChatRoomView#afterShown * @method _converse.ChatRoomView#afterShown
*/ */
afterShown () { afterShown () {
// Override from converse-chatview, specifically to avoid if (!this.model.get('hidden') && !this.model.get('minimized')) {
// the 'active' chat state from being sent out prematurely.
// This is instead done in `onConnectionStatusChanged` below.
this.model.clearUnreadMsgCounter(); this.model.clearUnreadMsgCounter();
this.scrollDown(); this.scrollDown();
} }
}
onConnectionStatusChanged () { onConnectionStatusChanged () {
const conn_status = this.model.session.get('connection_status'); const conn_status = this.model.session.get('connection_status');