minchats: Use utility methods instead of mixins

Various fixes to chat minimization

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<online_contacts.length; i++) {
@@ -187,21 +169,17 @@ describe("A Chatbox", function () {
         await u.waitUntil(() => _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<online_contacts.length; i++) {
             const el = online_contacts[i];
             jid = el.textContent.trim().replace(/ /g,'.').toLowerCase() + '@montague.lit';
             chatboxview = _converse.chatboxviews.get(jid);
             chatboxview.model.set({'minimized': true});
-            expect(chatboxview.onMinimized).toHaveBeenCalled();
         }
         await u.waitUntil(() => _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
         // <composing> 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());
 
         // <paused> 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());
 
         // <gone> 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());
 
         // <inactive> 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();
     }));
 });

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);
 

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

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);
     }
 }
 

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();
         });
 

src/plugins/minimize/mixins.js

@@ -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();
-        }
-    }
-};

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);
+    }
+}