From 22b6b4b50268de55a9b1bba4cdb504dc435fbe89 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Fri, 29 Jan 2021 15:27:54 +0100 Subject: [PATCH] minchats: Use utility methods instead of mixins Various fixes to chat minimization --- spec/minchats.js | 172 +++++++----------- src/plugins/chatview/view.js | 3 +- src/plugins/controlbox/view.js | 6 +- .../minimize/components/minimized-chat.js | 3 +- src/plugins/minimize/index.js | 23 ++- src/plugins/minimize/mixins.js | 96 ---------- src/plugins/minimize/utils.js | 89 ++++++++- 7 files changed, 175 insertions(+), 217 deletions(-) delete mode 100644 src/plugins/minimize/mixins.js diff --git a/spec/minchats.js b/spec/minchats.js index 89180dc87..c2ff554d4 100644 --- a/spec/minchats.js +++ b/spec/minchats.js @@ -8,9 +8,7 @@ const sizzle = converse.env.sizzle; describe("A chat message", function () { it("received for a minimized chat box will increment a counter on its header", - mock.initConverse( - ['rosterContactsFetched', 'chatBoxesFetched'], {}, - async function (done, _converse) { + mock.initConverse(['chatBoxesFetched'], {}, async function (done, _converse) { if (_converse.view_mode === 'fullscreen') { return done(); @@ -21,7 +19,8 @@ describe("A chat message", function () { await mock.openControlBox(_converse); spyOn(_converse.api, "trigger").and.callThrough(); - await u.waitUntil(() => _converse.rosterview.querySelectorAll('.roster-group').length); + const rosterview = document.querySelector('converse-roster'); + await u.waitUntil(() => rosterview.querySelectorAll('.roster-group').length); await mock.openChatBoxFor(_converse, contact_jid); const chatview = _converse.api.chatviews.get(contact_jid); expect(u.isVisible(chatview)).toBeTruthy(); @@ -42,8 +41,7 @@ describe("A chat message", function () { await u.waitUntil(() => chatview.model.messages.length); expect(_converse.api.trigger).toHaveBeenCalledWith('message', jasmine.any(Object)); - const trimmed_chatboxes = _converse.minimized_chats; - let count = trimmed_chatboxes.el.querySelector('converse-minimized-chat .message-count'); + let count = document.querySelector('converse-minimized-chat .message-count'); expect(u.isVisible(chatview)).toBeFalsy(); expect(chatview.model.get('minimized')).toBeTruthy(); @@ -62,10 +60,10 @@ describe("A chat message", function () { await u.waitUntil(() => (chatview.model.messages.length > 1)); expect(u.isVisible(chatview)).toBeFalsy(); expect(chatview.model.get('minimized')).toBeTruthy(); - count = trimmed_chatboxes.el.querySelector('converse-minimized-chat .message-count'); + count = document.querySelector('converse-minimized-chat .message-count'); expect(u.isVisible(count)).toBeTruthy(); expect(count.textContent).toBe('2'); - _converse.minimized_chats.el.querySelector("a.restore-chat").click(); + document.querySelector("converse-minimized-chat a.restore-chat").click(); expect(_converse.chatboxes.filter('minimized').length).toBe(0); done(); })); @@ -75,27 +73,20 @@ describe("A chat message", function () { describe("A Groupcaht", function () { it("can be minimized by clicking a DOM element with class 'toggle-chatbox-button'", - mock.initConverse( - ['rosterContactsFetched', 'chatBoxesFetched'], {}, - async function (done, _converse) { + mock.initConverse(['chatBoxesFetched'], {}, async function (done, _converse) { await mock.openChatRoom(_converse, 'lounge', 'montague.lit', 'romeo'); const view = _converse.chatboxviews.get('lounge@montague.lit'); - spyOn(view, 'onMinimized').and.callThrough(); - spyOn(view, 'onMaximized').and.callThrough(); spyOn(_converse.api, "trigger").and.callThrough(); view.delegateEvents(); // We need to rebind all events otherwise our spy won't be called const button = await u.waitUntil(() => view.querySelector('.toggle-chatbox-button')); button.click(); - expect(view.onMinimized).toHaveBeenCalled(); expect(_converse.api.trigger).toHaveBeenCalledWith('chatBoxMinimized', jasmine.any(Object)); expect(u.isVisible(view)).toBeFalsy(); expect(view.model.get('minimized')).toBeTruthy(); - expect(view.onMinimized).toHaveBeenCalled(); - const el = await u.waitUntil(() => _converse.minimized_chats.el.querySelector("a.restore-chat")); + const el = await u.waitUntil(() => document.querySelector("converse-minimized-chat a.restore-chat")); el.click(); - expect(view.onMaximized).toHaveBeenCalled(); expect(_converse.api.trigger).toHaveBeenCalledWith('chatBoxMaximized', jasmine.any(Object)); expect(view.model.get('minimized')).toBeFalsy(); expect(_converse.api.trigger.calls.count(), 3); @@ -107,24 +98,21 @@ describe("A Groupcaht", function () { describe("A Chatbox", function () { it("can be minimized by clicking a DOM element with class 'toggle-chatbox-button'", - mock.initConverse( - ['rosterContactsFetched', 'chatBoxesFetched'], {}, - async function (done, _converse) { + mock.initConverse(['chatBoxesFetched'], {}, async function (done, _converse) { await mock.waitForRoster(_converse, 'current'); await mock.openControlBox(_converse); const contact_jid = mock.cur_names[7].replace(/ /g,'.').toLowerCase() + '@montague.lit'; - await u.waitUntil(() => _converse.rosterview.querySelectorAll('.roster-group').length); + const rosterview = document.querySelector('converse-roster'); + await u.waitUntil(() => rosterview.querySelectorAll('.roster-group').length); await mock.openChatBoxFor(_converse, contact_jid); const chatview = _converse.chatboxviews.get(contact_jid); - spyOn(chatview, 'minimize').and.callThrough(); spyOn(_converse.api, "trigger").and.callThrough(); // We need to rebind all events otherwise our spy won't be called chatview.delegateEvents(); chatview.querySelector('.toggle-chatbox-button').click(); - expect(chatview.minimize).toHaveBeenCalled(); expect(_converse.api.trigger).toHaveBeenCalledWith('chatBoxMinimized', jasmine.any(Object)); expect(_converse.api.trigger.calls.count(), 2); expect(u.isVisible(chatview)).toBeFalsy(); @@ -132,38 +120,32 @@ describe("A Chatbox", function () { chatview.querySelector('.toggle-chatbox-button').click(); await u.waitUntil(() => _converse.chatboxviews.keys().length); - _converse.minimized_chats.el.querySelector("a.restore-chat").click(); + const minimized_chats = document.querySelector("converse-minimized-chat") + minimized_chats.querySelector("a.restore-chat").click(); expect(_converse.api.trigger).toHaveBeenCalledWith('chatBoxMaximized', jasmine.any(Object)); expect(chatview.model.get('minimized')).toBeFalsy(); done(); })); - it("can be opened in minimized mode initially", - mock.initConverse( - ['rosterContactsFetched'], {}, - async function (done, _converse) { - + it("can be opened in minimized mode initially", mock.initConverse([], {}, async function (done, _converse) { await mock.waitForRoster(_converse, 'current'); const sender_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit'; - expect(u.isVisible(_converse.minimized_chats.el.firstElementChild)).toBe(false); + const minimized_chats = document.querySelector("converse-minimized-chats") + expect(u.isVisible(minimized_chats.firstElementChild)).toBe(false); await _converse.api.chats.create(sender_jid, {'minimized': true}); await u.waitUntil(() => _converse.chatboxes.length > 1); - const chatBoxView = _converse.chatboxviews.get(sender_jid); - expect(u.isVisible(chatBoxview)).toBeFalsy(); - expect(u.isVisible(_converse.minimized_chats.el.firstElementChild)).toBe(true); - expect(_converse.minimized_chats.el.firstElementChild.querySelectorAll('converse-minimized-chat').length).toBe(1); + const view = _converse.chatboxviews.get(sender_jid); + expect(u.isVisible(view)).toBeFalsy(); + expect(u.isVisible(minimized_chats.firstElementChild)).toBe(true); + expect(minimized_chats.firstElementChild.querySelectorAll('converse-minimized-chat').length).toBe(1); expect(_converse.chatboxes.filter('minimized').length).toBe(1); done(); })); - it("can be trimmed to conserve space", - mock.initConverse(['rosterContactsFetched'], {}, - async function (done, _converse) { - + it("can be trimmed to conserve space", mock.initConverse([], {}, async function (done, _converse) { spyOn(_converse.minimize, 'trimChats'); - await mock.waitForRoster(_converse, 'current'); await mock.openControlBox(_converse); expect(_converse.minimize.trimChats.calls.count()).toBe(1); @@ -174,10 +156,10 @@ describe("A Chatbox", function () { expect(_converse.chatboxes.length).toEqual(1); expect(document.querySelectorAll("#conversejs .chatbox").length).toBe(1); // Controlbox is open - _converse.rosterview.update(); // XXX: Hack to make sure $roster element is attached. - await u.waitUntil(() => _converse.rosterview.querySelectorAll('.roster-group li').length); + const rosterview = document.querySelector('converse-roster'); + await u.waitUntil(() => rosterview.querySelectorAll('.roster-group li').length); // Test that they can be maximized again - const online_contacts = _converse.rosterview.querySelectorAll('.roster-group .current-xmpp-contact a.open-chat'); + const online_contacts = rosterview.querySelectorAll('.roster-group .current-xmpp-contact a.open-chat'); expect(online_contacts.length).toBe(17); let i; for (i=0; i _converse.chatboxes.length == 16); expect(_converse.minimize.trimChats.calls.count()).toBe(16); - _converse.api.chatviews.get().forEach(v => spyOn(v, 'onMinimized').and.callThrough()); for (i=0; i _converse.chatboxviews.keys().length); - var key = _converse.chatboxviews.keys()[1]; - const chatbox = _converse.chatboxes.get(key); - spyOn(chatbox, 'maximize').and.callThrough(); - _converse.minimized_chats.el.querySelector("a.restore-chat").click(); - - expect(chatbox.maximize).toHaveBeenCalled(); + spyOn(_converse.minimize, 'maximize').and.callThrough(); + const minimized_chats = document.querySelector("converse-minimized-chats") + minimized_chats.querySelector("a.restore-chat").click(); + expect(_converse.minimize.maximize).toHaveBeenCalled(); expect(_converse.minimize.trimChats.calls.count()).toBe(17); done(); })); @@ -211,22 +189,20 @@ describe("A Chatbox", function () { describe("A Minimized ChatBoxView's Unread Message Count", function () { it("is displayed when scrolled up chatbox is minimized after receiving unread messages", - mock.initConverse( - ['rosterContactsFetched', 'chatBoxesFetched'], {}, - async function (done, _converse) { + mock.initConverse(['chatBoxesFetched'], {}, async function (done, _converse) { await mock.waitForRoster(_converse, 'current', 1); const sender_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit'; await mock.openChatBoxFor(_converse, sender_jid); const msgFactory = () => mock.createChatMessage(_converse, sender_jid, 'This message will be received as unread, but eventually will be read'); - const selectUnreadMsgCount = () => _converse.minimized_chats.el.querySelector('#toggle-minimized-chats .unread-message-count'); + const minimized_chats = document.querySelector("converse-minimized-chats") + const selectUnreadMsgCount = () => minimized_chats.querySelector('#toggle-minimized-chats .unread-message-count'); const chatbox = _converse.chatboxes.get(sender_jid); chatbox.save('scrolled', true); _converse.handleMessageStanza(msgFactory()); await u.waitUntil(() => chatbox.messages.length); - const chatboxview = _converse.chatboxviews.get(sender_jid); - chatboxview.minimize(); - + const view = _converse.chatboxviews.get(sender_jid); + _converse.minimize.minimize(view.model); const unread_count = selectUnreadMsgCount(); expect(u.isVisible(unread_count)).toBeTruthy(); expect(unread_count.innerHTML.replace(//g, '')).toBe('1'); @@ -234,16 +210,15 @@ describe("A Minimized ChatBoxView's Unread Message Count", function () { })); it("is incremented when message is received and windows is not focused", - mock.initConverse( - ['rosterContactsFetched', 'chatBoxesFetched'], {}, - async function (done, _converse) { + mock.initConverse(['chatBoxesFetched'], {}, async function (done, _converse) { await mock.waitForRoster(_converse, 'current', 1); const sender_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit'; const view = await mock.openChatBoxFor(_converse, sender_jid) const msgFactory = () => mock.createChatMessage(_converse, sender_jid, 'This message will be received as unread, but eventually will be read'); - const selectUnreadMsgCount = () => _converse.minimized_chats.el.querySelector('#toggle-minimized-chats .unread-message-count'); - view.minimize(); + const minimized_chats = document.querySelector("converse-minimized-chats") + const selectUnreadMsgCount = () => minimized_chats.querySelector('#toggle-minimized-chats .unread-message-count'); + _converse.minimize.minimize(view.model); _converse.handleMessageStanza(msgFactory()); await u.waitUntil(() => view.model.messages.length); const unread_count = selectUnreadMsgCount(); @@ -253,12 +228,9 @@ describe("A Minimized ChatBoxView's Unread Message Count", function () { })); it("will render Openstreetmap-URL from geo-URI", - mock.initConverse( - ['rosterContactsFetched', 'chatBoxesFetched'], {}, - async function (done, _converse) { + mock.initConverse(['chatBoxesFetched'], {}, async function (done, _converse) { await mock.waitForRoster(_converse, 'current', 1); - const message = "geo:37.786971,-122.399677"; const contact_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit'; await mock.openChatBoxFor(_converse, contact_jid); @@ -279,22 +251,21 @@ describe("A Minimized ChatBoxView's Unread Message Count", function () { describe("The Minimized Chats Widget", function () { it("shows chats that have been minimized", - mock.initConverse( - ['rosterContactsFetched'], {}, - async function (done, _converse) { + mock.initConverse([], {}, async function (done, _converse) { await mock.waitForRoster(_converse, 'current'); await mock.openControlBox(_converse); - _converse.minimized_chats.initToggle(); + const minimized_chats = document.querySelector("converse-minimized-chats") + minimized_chats.initToggle(); let contact_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit'; await mock.openChatBoxFor(_converse, contact_jid) let chatview = _converse.chatboxviews.get(contact_jid); expect(chatview.model.get('minimized')).toBeFalsy(); - expect(u.isVisible(_converse.minimized_chats.el.firstElementChild)).toBe(false); + expect(u.isVisible(minimized_chats.firstElementChild)).toBe(false); chatview.querySelector('.toggle-chatbox-button').click(); expect(chatview.model.get('minimized')).toBeTruthy(); - expect(u.isVisible(_converse.minimized_chats.el)).toBe(true); + expect(u.isVisible(minimized_chats)).toBe(true); expect(_converse.chatboxes.filter('minimized').length).toBe(1); expect(_converse.chatboxes.models.filter(c => c.get('minimized')).pop().get('jid')).toBe(contact_jid); @@ -304,51 +275,48 @@ describe("The Minimized Chats Widget", function () { expect(chatview.model.get('minimized')).toBeFalsy(); chatview.querySelector('.toggle-chatbox-button').click(); expect(chatview.model.get('minimized')).toBeTruthy(); - expect(u.isVisible(_converse.minimized_chats.el)).toBe(true); + expect(u.isVisible(minimized_chats)).toBe(true); expect(_converse.chatboxes.filter('minimized').length).toBe(2); expect(_converse.chatboxes.filter('minimized').map(c => c.get('jid')).includes(contact_jid)).toBeTruthy(); done(); })); it("can be toggled to hide or show minimized chats", - mock.initConverse( - ['rosterContactsFetched'], {}, - async function (done, _converse) { + mock.initConverse([], {}, async function (done, _converse) { await mock.waitForRoster(_converse, 'current'); await mock.openControlBox(_converse); - _converse.minimized_chats.initToggle(); + const minimized_chats = document.querySelector("converse-minimized-chats") + minimized_chats.initToggle(); const contact_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit'; await mock.openChatBoxFor(_converse, contact_jid); const chatview = _converse.chatboxviews.get(contact_jid); - expect(u.isVisible(_converse.minimized_chats.el.firstElementChild)).toBe(false); + expect(u.isVisible(minimized_chats.firstElementChild)).toBe(false); chatview.model.set({'minimized': true}); - expect(u.isVisible(_converse.minimized_chats.el)).toBeTruthy(); + expect(u.isVisible(minimized_chats)).toBeTruthy(); expect(_converse.chatboxes.filter('minimized').length).toBe(1); expect(_converse.chatboxes.models.filter(c => c.get('minimized')).pop().get('jid')).toBe(contact_jid); - expect(u.isVisible(_converse.minimized_chats.el.querySelector('.minimized-chats-flyout'))).toBeTruthy(); - expect(_converse.minimized_chats.minchats.get('collapsed')).toBeFalsy(); - _converse.minimized_chats.el.querySelector('#toggle-minimized-chats').click(); - await u.waitUntil(() => u.isVisible(_converse.minimized_chats.el.querySelector('.minimized-chats-flyout'))); - expect(_converse.minimized_chats.minchats.get('collapsed')).toBeTruthy(); + expect(u.isVisible(minimized_chats.querySelector('.minimized-chats-flyout'))).toBeTruthy(); + expect(minimized_chats.minchats.get('collapsed')).toBeFalsy(); + minimized_chats.querySelector('#toggle-minimized-chats').click(); + await u.waitUntil(() => u.isVisible(minimized_chats.querySelector('.minimized-chats-flyout'))); + expect(minimized_chats.minchats.get('collapsed')).toBeTruthy(); done(); })); it("shows the number messages received to minimized chats", - mock.initConverse( - ['rosterContactsFetched', 'chatBoxesFetched'], {}, - async function (done, _converse) { + mock.initConverse(['chatBoxesFetched'], {}, async function (done, _converse) { await mock.waitForRoster(_converse, 'current', 4); await mock.openControlBox(_converse); - _converse.minimized_chats.initToggle(); + const minimized_chats = document.querySelector("converse-minimized-chats") + minimized_chats.initToggle(); + minimized_chats.minchats.set({'collapsed': true}); - _converse.minimized_chats.minchats.set({'collapsed': true}); - - const unread_el = _converse.minimized_chats.el.querySelector('.unread-message-count'); + const unread_el = minimized_chats.querySelector('.unread-message-count'); expect(u.isVisible(unread_el)).toBe(false); let i, contact_jid; @@ -372,8 +340,9 @@ describe("The Minimized Chats Widget", function () { } await u.waitUntil(() => chatview.model.messages.length === 3, 500); - expect(u.isVisible(_converse.minimized_chats.el.querySelector('.unread-message-count'))).toBeTruthy(); - expect(_converse.minimized_chats.el.querySelector('.unread-message-count').textContent).toBe((3).toString()); + + expect(u.isVisible(minimized_chats.querySelector('.unread-message-count'))).toBeTruthy(); + expect(minimized_chats.querySelector('.unread-message-count').textContent).toBe((3).toString()); // Chat state notifications don't increment the unread messages counter // state _converse.handleMessageStanza($msg({ @@ -382,7 +351,7 @@ describe("The Minimized Chats Widget", function () { type: 'chat', id: u.getUniqueId() }).c('composing', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree()); - expect(_converse.minimized_chats.el.querySelector('.unread-message-count').textContent).toBe((i).toString()); + expect(minimized_chats.querySelector('.unread-message-count').textContent).toBe((i).toString()); // state _converse.handleMessageStanza($msg({ @@ -391,7 +360,7 @@ describe("The Minimized Chats Widget", function () { type: 'chat', id: u.getUniqueId() }).c('paused', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree()); - expect(_converse.minimized_chats.el.querySelector('.unread-message-count').textContent).toBe((i).toString()); + expect(minimized_chats.querySelector('.unread-message-count').textContent).toBe((i).toString()); // state _converse.handleMessageStanza($msg({ @@ -400,7 +369,7 @@ describe("The Minimized Chats Widget", function () { type: 'chat', id: u.getUniqueId() }).c('gone', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree()); - expect(_converse.minimized_chats.el.querySelector('.unread-message-count').textContent).toBe((i).toString()); + expect(minimized_chats.querySelector('.unread-message-count').textContent).toBe((i).toString()); // state _converse.handleMessageStanza($msg({ @@ -409,14 +378,12 @@ describe("The Minimized Chats Widget", function () { type: 'chat', id: u.getUniqueId() }).c('inactive', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree()); - expect(_converse.minimized_chats.el.querySelector('.unread-message-count').textContent).toBe((i).toString()); + expect(minimized_chats.querySelector('.unread-message-count').textContent).toBe((i).toString()); done(); })); it("shows the number messages received to minimized groupchats", - mock.initConverse( - ['rosterContactsFetched'], {}, - async function (done, _converse) { + mock.initConverse([], {}, async function (done, _converse) { const muc_jid = 'kitchen@conference.shakespeare.lit'; await mock.openAndEnterChatRoom(_converse, 'kitchen@conference.shakespeare.lit', 'fires'); @@ -432,8 +399,9 @@ describe("The Minimized Chats Widget", function () { }).c('body').t(message).tree(); view.model.handleMessageStanza(msg); await u.waitUntil(() => view.model.messages.length); - expect(u.isVisible(_converse.minimized_chats.el.querySelector('.unread-message-count'))).toBeTruthy(); - expect(_converse.minimized_chats.el.querySelector('.unread-message-count').textContent).toBe('1'); + const minimized_chats = document.querySelector("converse-minimized-chats") + expect(u.isVisible(minimized_chats.querySelector('.unread-message-count'))).toBeTruthy(); + expect(minimized_chats.querySelector('.unread-message-count').textContent).toBe('1'); done(); })); }); diff --git a/src/plugins/chatview/view.js b/src/plugins/chatview/view.js index d7aff365f..8ebbc620e 100644 --- a/src/plugins/chatview/view.js +++ b/src/plugins/chatview/view.js @@ -42,8 +42,7 @@ export default class ChatView extends BaseChatView { api.listen.on('windowStateChanged', this.onWindowStateChanged); 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', () => !this.model.get('hidden') && this.afterShown()); this.listenTo(this.model, 'change:status', this.onStatusMessageChanged); this.listenTo(this.model, 'vcard:change', this.renderHeading); diff --git a/src/plugins/controlbox/view.js b/src/plugins/controlbox/view.js index 9b7b907e6..ce71173f5 100644 --- a/src/plugins/controlbox/view.js +++ b/src/plugins/controlbox/view.js @@ -43,7 +43,7 @@ class ControlBoxView extends ElementView { // element. this.listenTo(this.model, 'change:active-form', this.render); this.listenTo(this.model, 'change:connected', this.render); - this.listenTo(this.model, 'show', this.show); + this.listenTo(this.model, 'change:closed', () => !this.model.get('closed') && this.afterShown()); } render () { @@ -84,9 +84,7 @@ class ControlBoxView extends ElementView { return this; } - show () { - this.model.set('closed', false); - this.classList.remove('hidden'); + afterShown () { /** * Triggered once the controlbox has been opened * @event _converse#controlBoxOpened diff --git a/src/plugins/minimize/components/minimized-chat.js b/src/plugins/minimize/components/minimized-chat.js index 5c9b73160..8cb2086b4 100644 --- a/src/plugins/minimize/components/minimized-chat.js +++ b/src/plugins/minimize/components/minimized-chat.js @@ -1,6 +1,7 @@ import tpl_trimmed_chat from "../templates/trimmed_chat.js"; import { CustomElement } from 'components/element.js'; import { api, _converse } from "@converse/headless/core"; +import { maximize } from '../utils.js'; export default class MinimizedChat extends CustomElement { @@ -40,7 +41,7 @@ export default class MinimizedChat extends CustomElement { restore (ev) { ev?.preventDefault(); - this.model.maximize(); + maximize(this.model); } } diff --git a/src/plugins/minimize/index.js b/src/plugins/minimize/index.js index 7653a795c..705056dd9 100644 --- a/src/plugins/minimize/index.js +++ b/src/plugins/minimize/index.js @@ -8,9 +8,15 @@ import 'plugins/chatview/index.js'; import MinimizedChats from './view.js'; import MinimizedChatsToggle from './toggle.js'; import { _converse, api, converse } from '@converse/headless/core'; -import { addMinimizeButtonToChat, addMinimizeButtonToMUC, trimChats } from './utils.js'; +import { + addMinimizeButtonToChat, + addMinimizeButtonToMUC, + maximize, + minimize, + onMinimizedChanged, + trimChats +} from './utils.js'; import { debounce } from 'lodash-es'; -import { minimizableChatBox, minimizableChatBoxView } from './mixins.js'; const { dayjs } = converse.env; @@ -50,7 +56,7 @@ converse.plugins.add('converse-minimize', { ChatBox: { initialize () { this.__super__.initialize.apply(this, arguments); - this.on('change:hidden', m => !m.get('hidden') && this.maximize(), this); + this.on('change:hidden', m => !m.get('hidden') && maximize(this), this); if (this.get('id') === 'controlbox') { return; @@ -102,9 +108,6 @@ converse.plugins.add('converse-minimize', { api.settings.extend({'no_trimming': false}); - Object.assign(_converse.ChatBox.prototype, minimizableChatBox); - Object.assign(_converse.ChatBoxView.prototype, minimizableChatBoxView); - api.promises.add('minimizedChatsInitialized'); _converse.MinimizedChatsToggle = MinimizedChatsToggle; @@ -112,16 +115,18 @@ converse.plugins.add('converse-minimize', { _converse.minimize = {}; _converse.minimize.trimChats = trimChats; - + _converse.minimize.minimize = minimize; + _converse.minimize.maximize = maximize; /************************ BEGIN Event Handlers ************************/ api.listen.on('chatBoxViewInitialized', view => _converse.minimize.trimChats(view)); api.listen.on('chatRoomViewInitialized', view => _converse.minimize.trimChats(view)); + api.listen.on('chatBoxMaximized', view => _converse.minimize.trimChats(view)); api.listen.on('controlBoxOpened', view => _converse.minimize.trimChats(view)); - api.listen.on('chatBoxViewInitialized', v => v.listenTo(v.model, 'change:minimized', v.onMinimizedChanged)); + api.listen.on('chatBoxViewInitialized', v => v.listenTo(v.model, 'change:minimized', () => onMinimizedChanged(v))); api.listen.on('chatRoomViewInitialized', view => { - view.listenTo(view.model, 'change:minimized', view.onMinimizedChanged) + view.listenTo(view.model, 'change:minimized', () => onMinimizedChanged(view)); view.model.get('minimized') && view.hide(); }); diff --git a/src/plugins/minimize/mixins.js b/src/plugins/minimize/mixins.js deleted file mode 100644 index 5420dfa0e..000000000 --- a/src/plugins/minimize/mixins.js +++ /dev/null @@ -1,96 +0,0 @@ -import { _converse, api, converse } from '@converse/headless/core'; - -const u = converse.env.utils; - -export const minimizableChatBox = { - maximize () { - u.safeSave(this, { - 'hidden': false, - 'minimized': false, - 'time_opened': new Date().getTime() - }); - }, - - minimize () { - u.safeSave(this, { - 'hidden': true, - 'minimized': true, - 'time_minimized': new Date().toISOString() - }); - } -}; - -export const minimizableChatBoxView = { - /** - * Handler which gets called when a {@link _converse#ChatBox} has it's - * `minimized` property set to false. - * - * Will trigger {@link _converse#chatBoxMaximized} - * @private - * @returns {_converse.ChatBoxView|_converse.ChatRoomView} - */ - onMaximized () { - if (!this.model.isScrolledUp()) { - this.model.clearUnreadMsgCounter(); - } - this.model.setChatState(_converse.ACTIVE); - this.show(); - /** - * Triggered when a previously minimized chat gets maximized - * @event _converse#chatBoxMaximized - * @type { _converse.ChatBoxView } - * @example _converse.api.listen.on('chatBoxMaximized', view => { ... }); - */ - api.trigger('chatBoxMaximized', this); - return this; - }, - - /** - * Handler which gets called when a {@link _converse#ChatBox} has it's - * `minimized` property set to true. - * - * Will trigger {@link _converse#chatBoxMinimized} - * @private - * @returns {_converse.ChatBoxView|_converse.ChatRoomView} - */ - onMinimized (ev) { - 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 }); - } - this.model.setChatState(_converse.INACTIVE); - /** - * Triggered when a previously maximized chat gets Minimized - * @event _converse#chatBoxMinimized - * @type { _converse.ChatBoxView } - * @example _converse.api.listen.on('chatBoxMinimized', view => { ... }); - */ - api.trigger('chatBoxMinimized', this); - return this; - }, - - /** - * Minimizes a chat box. - * @returns {_converse.ChatBoxView|_converse.ChatRoomView} - */ - minimize (ev) { - if (ev && ev.preventDefault) { - ev.preventDefault(); - } - this.model.minimize(); - return this; - }, - - onMinimizedChanged (item) { - if (item.get('minimized')) { - this.onMinimized(); - } else { - this.onMaximized(); - } - } -}; diff --git a/src/plugins/minimize/utils.js b/src/plugins/minimize/utils.js index 8cda215b1..993499f7d 100644 --- a/src/plugins/minimize/utils.js +++ b/src/plugins/minimize/utils.js @@ -78,7 +78,7 @@ export async function trimChats (newchat) { if (view) { view.hide(); } - oldest_chat.minimize(); + minimize(oldest_chat); } else { break; } @@ -104,7 +104,7 @@ function getOldestMaximizedChat (exclude_ids) { export function addMinimizeButtonToChat (view, buttons) { const data = { 'a_class': 'toggle-chatbox-button', - 'handler': ev => view.model.minimize(ev), + 'handler': ev => minimize(ev, view.model), 'i18n_text': __('Minimize'), 'i18n_title': __('Minimize this chat'), 'icon_class': "fa-minus", @@ -119,7 +119,7 @@ export function addMinimizeButtonToChat (view, buttons) { export function addMinimizeButtonToMUC (view, buttons) { const data = { 'a_class': 'toggle-chatbox-button', - 'handler': ev => view.model.minimize(ev), + 'handler': ev => minimize(ev, view.model), 'i18n_text': __('Minimize'), 'i18n_title': __('Minimize this groupchat'), 'icon_class': "fa-minus", @@ -130,3 +130,86 @@ export function addMinimizeButtonToMUC (view, buttons) { const idx = names.indexOf('signout'); return idx > -1 ? [...buttons.slice(0, idx), data, ...buttons.slice(idx)] : [data, ...buttons]; } + + +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() + }); +} + +export function minimize (ev, chatbox) { + if (ev?.preventDefault) { + ev.preventDefault(); + } else { + chatbox = ev; + } + u.safeSave(chatbox, { + '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} + */ +function onMaximized (view) { + if (!view.model.isScrolledUp()) { + view.model.clearUnreadMsgCounter(); + } + view.model.setChatState(_converse.ACTIVE); + view.show(); + /** + * Triggered when a previously minimized chat gets maximized + * @event _converse#chatBoxMaximized + * @type { _converse.ChatBoxView } + * @example _converse.api.listen.on('chatBoxMaximized', view => { ... }); + */ + api.trigger('chatBoxMaximized', view); + return view; +} + +/** + * 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} + */ +function onMinimized (view) { + // save the scroll position to restore it on maximize + if (view.model.collection && view.model.collection.browserStorage) { + view.model.save({ 'scroll': view.content.scrollTop }); + } else { + view.model.set({ 'scroll': view.content.scrollTop }); + } + view.model.setChatState(_converse.INACTIVE); + /** + * Triggered when a previously maximized chat gets Minimized + * @event _converse#chatBoxMinimized + * @type { _converse.ChatBoxView } + * @example _converse.api.listen.on('chatBoxMinimized', view => { ... }); + */ + api.trigger('chatBoxMinimized', view); + return view; +} + +export function onMinimizedChanged (view) { + if (view.model.get('minimized')) { + onMinimized(view); + } else { + onMaximized(view); + } +}