Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

minchats: Use utility methods instead of mixins

Browse Source 
Various fixes to chat minimization
This commit is contained in:
JC Brand 2021-01-29 15:27:54 +01:00
parent 7abc81f8a4
commit 22b6b4b502
7 changed files with 175 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
spec/minchats.js
View File

@ -8,9 +8,7 @@ const sizzle = converse.env.sizzle;
describe("A chat message", function () { describe("A chat message", function () {
it("received for a minimized chat box will increment a counter on its header", it("received for a minimized chat box will increment a counter on its header",
mock.initConverse( mock.initConverse(['chatBoxesFetched'], {}, async function (done, _converse) {
['rosterContactsFetched', 'chatBoxesFetched'], {},
async function (done, _converse) {
if (_converse.view_mode === 'fullscreen') { if (_converse.view_mode === 'fullscreen') {
return done(); return done();
@ -21,7 +19,8 @@ describe("A chat message", function () {
await mock.openControlBox(_converse); await mock.openControlBox(_converse);
spyOn(_converse.api, "trigger").and.callThrough(); 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); await mock.openChatBoxFor(_converse, contact_jid);
const chatview = _converse.api.chatviews.get(contact_jid); const chatview = _converse.api.chatviews.get(contact_jid);
expect(u.isVisible(chatview)).toBeTruthy(); expect(u.isVisible(chatview)).toBeTruthy();
@ -42,8 +41,7 @@ describe("A chat message", function () {
await u.waitUntil(() => chatview.model.messages.length); await u.waitUntil(() => chatview.model.messages.length);
expect(_converse.api.trigger).toHaveBeenCalledWith('message', jasmine.any(Object)); expect(_converse.api.trigger).toHaveBeenCalledWith('message', jasmine.any(Object));
const trimmed_chatboxes = _converse.minimized_chats; let count = document.querySelector('converse-minimized-chat .message-count');
let count = trimmed_chatboxes.el.querySelector('converse-minimized-chat .message-count');
expect(u.isVisible(chatview)).toBeFalsy(); expect(u.isVisible(chatview)).toBeFalsy();
expect(chatview.model.get('minimized')).toBeTruthy(); expect(chatview.model.get('minimized')).toBeTruthy();
@ -62,10 +60,10 @@ describe("A chat message", function () {
await u.waitUntil(() => (chatview.model.messages.length > 1)); await u.waitUntil(() => (chatview.model.messages.length > 1));
expect(u.isVisible(chatview)).toBeFalsy(); expect(u.isVisible(chatview)).toBeFalsy();
expect(chatview.model.get('minimized')).toBeTruthy(); 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(u.isVisible(count)).toBeTruthy();
expect(count.textContent).toBe('2'); 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); expect(_converse.chatboxes.filter('minimized').length).toBe(0);
done(); done();
})); }));
@ -75,27 +73,20 @@ describe("A chat message", function () {
describe("A Groupcaht", function () { describe("A Groupcaht", function () {
it("can be minimized by clicking a DOM element with class 'toggle-chatbox-button'", it("can be minimized by clicking a DOM element with class 'toggle-chatbox-button'",
mock.initConverse( mock.initConverse(['chatBoxesFetched'], {}, async function (done, _converse) {
['rosterContactsFetched', 'chatBoxesFetched'], {},
async function (done, _converse) {
await mock.openChatRoom(_converse, 'lounge', 'montague.lit', 'romeo'); await mock.openChatRoom(_converse, 'lounge', 'montague.lit', 'romeo');
const view = _converse.chatboxviews.get('lounge@montague.lit'); const view = _converse.chatboxviews.get('lounge@montague.lit');
spyOn(view, 'onMinimized').and.callThrough();
spyOn(view, 'onMaximized').and.callThrough();
spyOn(_converse.api, "trigger").and.callThrough(); spyOn(_converse.api, "trigger").and.callThrough();
view.delegateEvents(); // We need to rebind all events otherwise our spy won't be called 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')); const button = await u.waitUntil(() => view.querySelector('.toggle-chatbox-button'));
button.click(); button.click();
expect(view.onMinimized).toHaveBeenCalled();
expect(_converse.api.trigger).toHaveBeenCalledWith('chatBoxMinimized', jasmine.any(Object)); expect(_converse.api.trigger).toHaveBeenCalledWith('chatBoxMinimized', jasmine.any(Object));
expect(u.isVisible(view)).toBeFalsy(); expect(u.isVisible(view)).toBeFalsy();
expect(view.model.get('minimized')).toBeTruthy(); expect(view.model.get('minimized')).toBeTruthy();
expect(view.onMinimized).toHaveBeenCalled(); const el = await u.waitUntil(() => document.querySelector("converse-minimized-chat a.restore-chat"));
const el = await u.waitUntil(() => _converse.minimized_chats.el.querySelector("a.restore-chat"));
el.click(); el.click();
expect(view.onMaximized).toHaveBeenCalled();
expect(_converse.api.trigger).toHaveBeenCalledWith('chatBoxMaximized', jasmine.any(Object)); expect(_converse.api.trigger).toHaveBeenCalledWith('chatBoxMaximized', jasmine.any(Object));
expect(view.model.get('minimized')).toBeFalsy(); expect(view.model.get('minimized')).toBeFalsy();
expect(_converse.api.trigger.calls.count(), 3); expect(_converse.api.trigger.calls.count(), 3);
@ -107,24 +98,21 @@ describe("A Groupcaht", function () {
describe("A Chatbox", function () { describe("A Chatbox", function () {
it("can be minimized by clicking a DOM element with class 'toggle-chatbox-button'", it("can be minimized by clicking a DOM element with class 'toggle-chatbox-button'",
mock.initConverse( mock.initConverse(['chatBoxesFetched'], {}, async function (done, _converse) {
['rosterContactsFetched', 'chatBoxesFetched'], {},
async function (done, _converse) {
await mock.waitForRoster(_converse, 'current'); await mock.waitForRoster(_converse, 'current');
await mock.openControlBox(_converse); await mock.openControlBox(_converse);
const contact_jid = mock.cur_names[7].replace(/ /g,'.').toLowerCase() + '@montague.lit'; 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); await mock.openChatBoxFor(_converse, contact_jid);
const chatview = _converse.chatboxviews.get(contact_jid); const chatview = _converse.chatboxviews.get(contact_jid);
spyOn(chatview, 'minimize').and.callThrough();
spyOn(_converse.api, "trigger").and.callThrough(); spyOn(_converse.api, "trigger").and.callThrough();
// We need to rebind all events otherwise our spy won't be called // We need to rebind all events otherwise our spy won't be called
chatview.delegateEvents(); chatview.delegateEvents();
chatview.querySelector('.toggle-chatbox-button').click(); chatview.querySelector('.toggle-chatbox-button').click();
expect(chatview.minimize).toHaveBeenCalled();
expect(_converse.api.trigger).toHaveBeenCalledWith('chatBoxMinimized', jasmine.any(Object)); expect(_converse.api.trigger).toHaveBeenCalledWith('chatBoxMinimized', jasmine.any(Object));
expect(_converse.api.trigger.calls.count(), 2); expect(_converse.api.trigger.calls.count(), 2);
expect(u.isVisible(chatview)).toBeFalsy(); expect(u.isVisible(chatview)).toBeFalsy();
@ -132,38 +120,32 @@ describe("A Chatbox", function () {
chatview.querySelector('.toggle-chatbox-button').click(); chatview.querySelector('.toggle-chatbox-button').click();
await u.waitUntil(() => _converse.chatboxviews.keys().length); 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(_converse.api.trigger).toHaveBeenCalledWith('chatBoxMaximized', jasmine.any(Object));
expect(chatview.model.get('minimized')).toBeFalsy(); expect(chatview.model.get('minimized')).toBeFalsy();
done(); done();
})); }));
it("can be opened in minimized mode initially", it("can be opened in minimized mode initially", mock.initConverse([], {}, async function (done, _converse) {
mock.initConverse(
['rosterContactsFetched'], {},
async function (done, _converse) {
await mock.waitForRoster(_converse, 'current'); await mock.waitForRoster(_converse, 'current');
const sender_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit'; 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 _converse.api.chats.create(sender_jid, {'minimized': true});
await u.waitUntil(() => _converse.chatboxes.length > 1); await u.waitUntil(() => _converse.chatboxes.length > 1);
const chatBoxView = _converse.chatboxviews.get(sender_jid); const view = _converse.chatboxviews.get(sender_jid);
expect(u.isVisible(chatBoxview)).toBeFalsy(); expect(u.isVisible(view)).toBeFalsy();
expect(u.isVisible(_converse.minimized_chats.el.firstElementChild)).toBe(true); expect(u.isVisible(minimized_chats.firstElementChild)).toBe(true);
expect(_converse.minimized_chats.el.firstElementChild.querySelectorAll('converse-minimized-chat').length).toBe(1); expect(minimized_chats.firstElementChild.querySelectorAll('converse-minimized-chat').length).toBe(1);
expect(_converse.chatboxes.filter('minimized').length).toBe(1); expect(_converse.chatboxes.filter('minimized').length).toBe(1);
done(); done();
})); }));
it("can be trimmed to conserve space", it("can be trimmed to conserve space", mock.initConverse([], {}, async function (done, _converse) {
mock.initConverse(['rosterContactsFetched'], {},
async function (done, _converse) {
spyOn(_converse.minimize, 'trimChats'); spyOn(_converse.minimize, 'trimChats');
await mock.waitForRoster(_converse, 'current'); await mock.waitForRoster(_converse, 'current');
await mock.openControlBox(_converse); await mock.openControlBox(_converse);
expect(_converse.minimize.trimChats.calls.count()).toBe(1); expect(_converse.minimize.trimChats.calls.count()).toBe(1);
@ -174,10 +156,10 @@ describe("A Chatbox", function () {
expect(_converse.chatboxes.length).toEqual(1); expect(_converse.chatboxes.length).toEqual(1);
expect(document.querySelectorAll("#conversejs .chatbox").length).toBe(1); // Controlbox is open expect(document.querySelectorAll("#conversejs .chatbox").length).toBe(1); // Controlbox is open
_converse.rosterview.update(); // XXX: Hack to make sure $roster element is attached. const rosterview = document.querySelector('converse-roster');
await u.waitUntil(() => _converse.rosterview.querySelectorAll('.roster-group li').length); await u.waitUntil(() => rosterview.querySelectorAll('.roster-group li').length);
// Test that they can be maximized again // 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); expect(online_contacts.length).toBe(17);
let i; let i;
for (i=0; i<online_contacts.length; i++) { for (i=0; i<online_contacts.length; i++) {
@ -187,21 +169,17 @@ describe("A Chatbox", function () {
await u.waitUntil(() => _converse.chatboxes.length == 16); await u.waitUntil(() => _converse.chatboxes.length == 16);
expect(_converse.minimize.trimChats.calls.count()).toBe(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++) { for (i=0; i<online_contacts.length; i++) {
const el = online_contacts[i]; const el = online_contacts[i];
jid = el.textContent.trim().replace(/ /g,'.').toLowerCase() + '@montague.lit'; jid = el.textContent.trim().replace(/ /g,'.').toLowerCase() + '@montague.lit';
chatboxview = _converse.chatboxviews.get(jid); chatboxview = _converse.chatboxviews.get(jid);
chatboxview.model.set({'minimized': true}); chatboxview.model.set({'minimized': true});
expect(chatboxview.onMinimized).toHaveBeenCalled();
} }
await u.waitUntil(() => _converse.chatboxviews.keys().length); await u.waitUntil(() => _converse.chatboxviews.keys().length);
var key = _converse.chatboxviews.keys()[1]; spyOn(_converse.minimize, 'maximize').and.callThrough();
const chatbox = _converse.chatboxes.get(key); const minimized_chats = document.querySelector("converse-minimized-chats")
spyOn(chatbox, 'maximize').and.callThrough(); minimized_chats.querySelector("a.restore-chat").click();
_converse.minimized_chats.el.querySelector("a.restore-chat").click(); expect(_converse.minimize.maximize).toHaveBeenCalled();
expect(chatbox.maximize).toHaveBeenCalled();
expect(_converse.minimize.trimChats.calls.count()).toBe(17); expect(_converse.minimize.trimChats.calls.count()).toBe(17);
done(); done();
})); }));
@ -211,22 +189,20 @@ describe("A Chatbox", function () {
describe("A Minimized ChatBoxView's Unread Message Count", function () { describe("A Minimized ChatBoxView's Unread Message Count", function () {
it("is displayed when scrolled up chatbox is minimized after receiving unread messages", it("is displayed when scrolled up chatbox is minimized after receiving unread messages",
mock.initConverse( mock.initConverse(['chatBoxesFetched'], {}, async function (done, _converse) {
['rosterContactsFetched', 'chatBoxesFetched'], {},
async function (done, _converse) {
await mock.waitForRoster(_converse, 'current', 1); await mock.waitForRoster(_converse, 'current', 1);
const sender_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit'; const sender_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit';
await mock.openChatBoxFor(_converse, sender_jid); 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 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); const chatbox = _converse.chatboxes.get(sender_jid);
chatbox.save('scrolled', true); chatbox.save('scrolled', true);
_converse.handleMessageStanza(msgFactory()); _converse.handleMessageStanza(msgFactory());
await u.waitUntil(() => chatbox.messages.length); await u.waitUntil(() => chatbox.messages.length);
const chatboxview = _converse.chatboxviews.get(sender_jid); const view = _converse.chatboxviews.get(sender_jid);
chatboxview.minimize(); _converse.minimize.minimize(view.model);
const unread_count = selectUnreadMsgCount(); const unread_count = selectUnreadMsgCount();
expect(u.isVisible(unread_count)).toBeTruthy(); expect(u.isVisible(unread_count)).toBeTruthy();
expect(unread_count.innerHTML.replace(/<!---->/g, '')).toBe('1'); 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", it("is incremented when message is received and windows is not focused",
mock.initConverse( mock.initConverse(['chatBoxesFetched'], {}, async function (done, _converse) {
['rosterContactsFetched', 'chatBoxesFetched'], {},
async function (done, _converse) {
await mock.waitForRoster(_converse, 'current', 1); await mock.waitForRoster(_converse, 'current', 1);
const sender_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit'; const sender_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit';
const view = await mock.openChatBoxFor(_converse, sender_jid) 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 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")
view.minimize(); const selectUnreadMsgCount = () => minimized_chats.querySelector('#toggle-minimized-chats .unread-message-count');
_converse.minimize.minimize(view.model);
_converse.handleMessageStanza(msgFactory()); _converse.handleMessageStanza(msgFactory());
await u.waitUntil(() => view.model.messages.length); await u.waitUntil(() => view.model.messages.length);
const unread_count = selectUnreadMsgCount(); 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", it("will render Openstreetmap-URL from geo-URI",
mock.initConverse( mock.initConverse(['chatBoxesFetched'], {}, async function (done, _converse) {
['rosterContactsFetched', 'chatBoxesFetched'], {},
async function (done, _converse) {
await mock.waitForRoster(_converse, 'current', 1); await mock.waitForRoster(_converse, 'current', 1);
const message = "geo:37.786971,-122.399677"; const message = "geo:37.786971,-122.399677";
const contact_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit'; const contact_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit';
await mock.openChatBoxFor(_converse, contact_jid); 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 () { describe("The Minimized Chats Widget", function () {
it("shows chats that have been minimized", it("shows chats that have been minimized",
mock.initConverse( mock.initConverse([], {}, async function (done, _converse) {
['rosterContactsFetched'], {},
async function (done, _converse) {
await mock.waitForRoster(_converse, 'current'); await mock.waitForRoster(_converse, 'current');
await mock.openControlBox(_converse); 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'; let contact_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit';
await mock.openChatBoxFor(_converse, contact_jid) await mock.openChatBoxFor(_converse, contact_jid)
let chatview = _converse.chatboxviews.get(contact_jid); let chatview = _converse.chatboxviews.get(contact_jid);
expect(chatview.model.get('minimized')).toBeFalsy(); 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(); chatview.querySelector('.toggle-chatbox-button').click();
expect(chatview.model.get('minimized')).toBeTruthy(); 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.filter('minimized').length).toBe(1);
expect(_converse.chatboxes.models.filter(c => c.get('minimized')).pop().get('jid')).toBe(contact_jid); 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(); expect(chatview.model.get('minimized')).toBeFalsy();
chatview.querySelector('.toggle-chatbox-button').click(); chatview.querySelector('.toggle-chatbox-button').click();
expect(chatview.model.get('minimized')).toBeTruthy(); 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').length).toBe(2);
expect(_converse.chatboxes.filter('minimized').map(c => c.get('jid')).includes(contact_jid)).toBeTruthy(); expect(_converse.chatboxes.filter('minimized').map(c => c.get('jid')).includes(contact_jid)).toBeTruthy();
done(); done();
})); }));
it("can be toggled to hide or show minimized chats", it("can be toggled to hide or show minimized chats",
mock.initConverse( mock.initConverse([], {}, async function (done, _converse) {
['rosterContactsFetched'], {},
async function (done, _converse) {
await mock.waitForRoster(_converse, 'current'); await mock.waitForRoster(_converse, 'current');
await mock.openControlBox(_converse); 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'; const contact_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit';
await mock.openChatBoxFor(_converse, contact_jid); await mock.openChatBoxFor(_converse, contact_jid);
const chatview = _converse.chatboxviews.get(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}); 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.filter('minimized').length).toBe(1);
expect(_converse.chatboxes.models.filter(c => c.get('minimized')).pop().get('jid')).toBe(contact_jid); 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(u.isVisible(minimized_chats.querySelector('.minimized-chats-flyout'))).toBeTruthy();
expect(_converse.minimized_chats.minchats.get('collapsed')).toBeFalsy(); expect(minimized_chats.minchats.get('collapsed')).toBeFalsy();
_converse.minimized_chats.el.querySelector('#toggle-minimized-chats').click(); minimized_chats.querySelector('#toggle-minimized-chats').click();
await u.waitUntil(() => u.isVisible(_converse.minimized_chats.el.querySelector('.minimized-chats-flyout'))); await u.waitUntil(() => u.isVisible(minimized_chats.querySelector('.minimized-chats-flyout')));
expect(_converse.minimized_chats.minchats.get('collapsed')).toBeTruthy(); expect(minimized_chats.minchats.get('collapsed')).toBeTruthy();
done(); done();
})); }));
it("shows the number messages received to minimized chats", it("shows the number messages received to minimized chats",
mock.initConverse( mock.initConverse(['chatBoxesFetched'], {}, async function (done, _converse) {
['rosterContactsFetched', 'chatBoxesFetched'], {},
async function (done, _converse) {
await mock.waitForRoster(_converse, 'current', 4); await mock.waitForRoster(_converse, 'current', 4);
await mock.openControlBox(_converse); 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 = minimized_chats.querySelector('.unread-message-count');
const unread_el = _converse.minimized_chats.el.querySelector('.unread-message-count');
expect(u.isVisible(unread_el)).toBe(false); expect(u.isVisible(unread_el)).toBe(false);
let i, contact_jid; let i, contact_jid;
@ -372,8 +340,9 @@ describe("The Minimized Chats Widget", function () {
} }
await u.waitUntil(() => chatview.model.messages.length === 3, 500); 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 // Chat state notifications don't increment the unread messages counter
// <composing> state // <composing> state
_converse.handleMessageStanza($msg({ _converse.handleMessageStanza($msg({
@ -382,7 +351,7 @@ describe("The Minimized Chats Widget", function () {
type: 'chat', type: 'chat',
id: u.getUniqueId() id: u.getUniqueId()
}).c('composing', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree()); }).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 // <paused> state
_converse.handleMessageStanza($msg({ _converse.handleMessageStanza($msg({
@ -391,7 +360,7 @@ describe("The Minimized Chats Widget", function () {
type: 'chat', type: 'chat',
id: u.getUniqueId() id: u.getUniqueId()
}).c('paused', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree()); }).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 // <gone> state
_converse.handleMessageStanza($msg({ _converse.handleMessageStanza($msg({
@ -400,7 +369,7 @@ describe("The Minimized Chats Widget", function () {
type: 'chat', type: 'chat',
id: u.getUniqueId() id: u.getUniqueId()
}).c('gone', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree()); }).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 // <inactive> state
_converse.handleMessageStanza($msg({ _converse.handleMessageStanza($msg({
@ -409,14 +378,12 @@ describe("The Minimized Chats Widget", function () {
type: 'chat', type: 'chat',
id: u.getUniqueId() id: u.getUniqueId()
}).c('inactive', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree()); }).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(); done();
})); }));
it("shows the number messages received to minimized groupchats", it("shows the number messages received to minimized groupchats",
mock.initConverse( mock.initConverse([], {}, async function (done, _converse) {
['rosterContactsFetched'], {},
async function (done, _converse) {
const muc_jid = 'kitchen@conference.shakespeare.lit'; const muc_jid = 'kitchen@conference.shakespeare.lit';
await mock.openAndEnterChatRoom(_converse, 'kitchen@conference.shakespeare.lit', 'fires'); await mock.openAndEnterChatRoom(_converse, 'kitchen@conference.shakespeare.lit', 'fires');
@ -432,8 +399,9 @@ describe("The Minimized Chats Widget", function () {
}).c('body').t(message).tree(); }).c('body').t(message).tree();
view.model.handleMessageStanza(msg); view.model.handleMessageStanza(msg);
await u.waitUntil(() => view.model.messages.length); await u.waitUntil(() => view.model.messages.length);
expect(u.isVisible(_converse.minimized_chats.el.querySelector('.unread-message-count'))).toBeTruthy(); const minimized_chats = document.querySelector("converse-minimized-chats")
expect(_converse.minimized_chats.el.querySelector('.unread-message-count').textContent).toBe('1'); expect(u.isVisible(minimized_chats.querySelector('.unread-message-count'))).toBeTruthy();
expect(minimized_chats.querySelector('.unread-message-count').textContent).toBe('1');
done(); done();
})); }));
}); });

3
src/plugins/chatview/view.js
View File

@ -42,8 +42,7 @@ 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', () => this.afterShown()); this.listenTo(this.model, 'change:hidden', () => !this.model.get('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, 'vcard:change', this.renderHeading); this.listenTo(this.model, 'vcard:change', this.renderHeading);

6
src/plugins/controlbox/view.js
View File

@ -43,7 +43,7 @@ class ControlBoxView extends ElementView {
// element. // element.
this.listenTo(this.model, 'change:active-form', this.render); this.listenTo(this.model, 'change:active-form', this.render);
this.listenTo(this.model, 'change:connected', 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 () { render () {
@ -84,9 +84,7 @@ class ControlBoxView extends ElementView {
return this; return this;
} }
show () { afterShown () {
this.model.set('closed', false);
this.classList.remove('hidden');
/** /**
* Triggered once the controlbox has been opened * Triggered once the controlbox has been opened
* @event _converse#controlBoxOpened * @event _converse#controlBoxOpened

3
src/plugins/minimize/components/minimized-chat.js
View File

@ -1,6 +1,7 @@
import tpl_trimmed_chat from "../templates/trimmed_chat.js"; import tpl_trimmed_chat from "../templates/trimmed_chat.js";
import { CustomElement } from 'components/element.js'; import { CustomElement } from 'components/element.js';
import { api, _converse } from "@converse/headless/core"; import { api, _converse } from "@converse/headless/core";
import { maximize } from '../utils.js';
export default class MinimizedChat extends CustomElement { export default class MinimizedChat extends CustomElement {
@ -40,7 +41,7 @@ export default class MinimizedChat extends CustomElement {
restore (ev) { restore (ev) {
ev?.preventDefault(); ev?.preventDefault();
this.model.maximize(); maximize(this.model);
} }
} }

23
src/plugins/minimize/index.js
View File

@ -8,9 +8,15 @@ import 'plugins/chatview/index.js';
import MinimizedChats from './view.js'; import MinimizedChats from './view.js';
import MinimizedChatsToggle from './toggle.js'; import MinimizedChatsToggle from './toggle.js';
import { _converse, api, converse } from '@converse/headless/core'; 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 { debounce } from 'lodash-es';
import { minimizableChatBox, minimizableChatBoxView } from './mixins.js';
const { dayjs } = converse.env; const { dayjs } = converse.env;
@ -50,7 +56,7 @@ converse.plugins.add('converse-minimize', {
ChatBox: { ChatBox: {
initialize () { initialize () {
this.__super__.initialize.apply(this, arguments); 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') { if (this.get('id') === 'controlbox') {
return; return;
@ -102,9 +108,6 @@ converse.plugins.add('converse-minimize', {
api.settings.extend({'no_trimming': false}); api.settings.extend({'no_trimming': false});
Object.assign(_converse.ChatBox.prototype, minimizableChatBox);
Object.assign(_converse.ChatBoxView.prototype, minimizableChatBoxView);
api.promises.add('minimizedChatsInitialized'); api.promises.add('minimizedChatsInitialized');
_converse.MinimizedChatsToggle = MinimizedChatsToggle; _converse.MinimizedChatsToggle = MinimizedChatsToggle;
@ -112,16 +115,18 @@ converse.plugins.add('converse-minimize', {
_converse.minimize = {}; _converse.minimize = {};
_converse.minimize.trimChats = trimChats; _converse.minimize.trimChats = trimChats;
_converse.minimize.minimize = minimize;
_converse.minimize.maximize = maximize;
/************************ BEGIN Event Handlers ************************/ /************************ BEGIN Event Handlers ************************/
api.listen.on('chatBoxViewInitialized', view => _converse.minimize.trimChats(view)); api.listen.on('chatBoxViewInitialized', view => _converse.minimize.trimChats(view));
api.listen.on('chatRoomViewInitialized', 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('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 => { 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(); view.model.get('minimized') && view.hide();
}); });

96
src/plugins/minimize/mixins.js
View File

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

89
src/plugins/minimize/utils.js
View File

@ -78,7 +78,7 @@ export async function trimChats (newchat) {
if (view) { if (view) {
view.hide(); view.hide();
} }
oldest_chat.minimize(); minimize(oldest_chat);
} else { } else {
break; break;
} }
@ -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.model.minimize(ev), 'handler': ev => minimize(ev, view.model),
'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.model.minimize(ev), 'handler': ev => minimize(ev, view.model),
'i18n_text': __('Minimize'), 'i18n_text': __('Minimize'),
'i18n_title': __('Minimize this groupchat'), 'i18n_title': __('Minimize this groupchat'),
'icon_class': "fa-minus", 'icon_class': "fa-minus",
@ -130,3 +130,86 @@ export function addMinimizeButtonToMUC (view, buttons) {
const idx = names.indexOf('signout'); const idx = names.indexOf('signout');
return idx > -1 ? [...buttons.slice(0, idx), data, ...buttons.slice(idx)] : [data, ...buttons]; 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);
}
}