Skip to content

C
converse.js
Commit da3670d9 authored by JC Brand's avatar JC Brand
Browse files
Options

MUC Join/Leave messages now also show a new day indicator

parent 46e54667
Show whitespace changes
Inline Side-by-side
Showing with 112 additions and 147 deletions
CHANGES.md
View file @ da3670d9
...@@ -34,6 +34,7 @@ ...@@ -34,6 +34,7 @@
- Show status messages in an MUC room when a user's role changes. - Show status messages in an MUC room when a user's role changes.
- In MUC chat rooms, collapse multiple, consecutive join/leave messages. - In MUC chat rooms, collapse multiple, consecutive join/leave messages.
- Performance improvements for rendering private chats, rooms and the contacts roster. - Performance improvements for rendering private chats, rooms and the contacts roster.
- MUC Leave/Join messages now also show a new day indicator if applicable.
### API changes ### API changes
- New API method `_converse.disco.supports` to check whether a certain - New API method `_converse.disco.supports` to check whether a certain
......
spec/chatroom.js
View file @ da3670d9
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
var $msg = converse.env.$msg; var $msg = converse.env.$msg;
var Strophe = converse.env.Strophe; var Strophe = converse.env.Strophe;
var Promise = converse.env.Promise; var Promise = converse.env.Promise;
var moment = converse.env.moment;
return describe("ChatRooms", function () { return describe("ChatRooms", function () {
describe("The \"rooms\" API", function () { describe("The \"rooms\" API", function () {
...@@ -591,7 +592,7 @@ ...@@ -591,7 +592,7 @@
done(); done();
})); }));
it("shows join/leave messages when users enter or exit a room", it("shows a new day indicator if a join/leave message is received on a new day",
mock.initConverseWithPromises( mock.initConverseWithPromises(
null, ['rosterGroupsFetched'], {}, null, ['rosterGroupsFetched'], {},
function (done, _converse) { function (done, _converse) {
...@@ -600,22 +601,6 @@ ...@@ -600,22 +601,6 @@
var view = _converse.chatboxviews.get('coven@chat.shakespeare.lit'); var view = _converse.chatboxviews.get('coven@chat.shakespeare.lit');
var $chat_content = view.$el.find('.chat-content'); var $chat_content = view.$el.find('.chat-content');
/* We don't show join/leave messages for existing occupants. We
* know about them because we receive their presences before we
* receive our own.
*/
presence = $pres({
to: 'dummy@localhost/_converse.js-29092160',
from: 'coven@chat.shakespeare.lit/oldguy'
}).c('x', {xmlns: Strophe.NS.MUC_USER})
.c('item', {
'affiliation': 'none',
'jid': 'oldguy@localhost/_converse.js-290929789',
'role': 'participant'
});
_converse.connection._dataRecv(test_utils.createRequest(presence));
expect($chat_content[0].querySelectorAll('div.chat-info').length).toBe(0);
/* <presence to="dummy@localhost/_converse.js-29092160" /* <presence to="dummy@localhost/_converse.js-29092160"
* from="coven@chat.shakespeare.lit/some1"> * from="coven@chat.shakespeare.lit/some1">
* <x xmlns="http://jabber.org/protocol/muc#user"> * <x xmlns="http://jabber.org/protocol/muc#user">
...@@ -635,83 +620,55 @@ ...@@ -635,83 +620,55 @@
}).up() }).up()
.c('status', {code: '110'}); .c('status', {code: '110'});
_converse.connection._dataRecv(test_utils.createRequest(presence)); _converse.connection._dataRecv(test_utils.createRequest(presence));
expect($chat_content.find('div.chat-info:first').html()).toBe("some1 has entered the room.");
presence = $pres({
to: 'dummy@localhost/_converse.js-29092160',
from: 'coven@chat.shakespeare.lit/newguy'
})
.c('x', {xmlns: Strophe.NS.MUC_USER})
.c('item', {
'affiliation': 'none',
'jid': 'newguy@localhost/_converse.js-290929789',
'role': 'participant'
});
_converse.connection._dataRecv(test_utils.createRequest(presence));
expect($chat_content[0].querySelectorAll('div.chat-info').length).toBe(2);
expect($chat_content.find('div.chat-info:last').html()).toBe("newguy has entered the room.");
// Add another entrant, otherwise the above message will be var $time = $chat_content.find('time');
// collapsed if "newguy" leaves immediately again expect($time.length).toEqual(1);
presence = $pres({ expect($time.attr('class')).toEqual('chat-info chat-date');
to: 'dummy@localhost/_converse.js-29092160', expect($time.data('isodate')).toEqual(moment().startOf('day').format());
from: 'coven@chat.shakespeare.lit/newgirl' expect($time.text()).toEqual(moment().startOf('day').format("dddd MMM Do YYYY"));
}) expect($chat_content.find('div.chat-info:first').html()).toBe("some1 has entered the room.");
.c('x', {xmlns: Strophe.NS.MUC_USER})
.c('item', {
'affiliation': 'none',
'jid': 'newgirl@localhost/_converse.js-213098781',
'role': 'participant'
});
_converse.connection._dataRecv(test_utils.createRequest(presence));
expect($chat_content[0].querySelectorAll('div.chat-info').length).toBe(3);
expect($chat_content.find('div.chat-info:last').html()).toBe("newgirl has entered the room.");
// Don't show duplicate join messages // XXX: Hack. We clear the chat contents instead of mocking the date
presence = $pres({ $chat_content.html('');
to: 'dummy@localhost/_converse.js-290918392',
from: 'coven@chat.shakespeare.lit/newguy'
}).c('x', {xmlns: Strophe.NS.MUC_USER})
.c('item', {
'affiliation': 'none',
'jid': 'newguy@localhost/_converse.js-290929789',
'role': 'participant'
});
_converse.connection._dataRecv(test_utils.createRequest(presence));
expect($chat_content[0].querySelectorAll('div.chat-info').length).toBe(3);
/* <presence // Test a user leaving a chat room
* from='coven@chat.shakespeare.lit/thirdwitch'
* to='crone1@shakespeare.lit/desktop'
* type='unavailable'>
* <status>Disconnected: Replaced by new connection</status>
* <x xmlns='http://jabber.org/protocol/muc#user'>
* <item affiliation='member'
* jid='hag66@shakespeare.lit/pda'
* role='none'/>
* </x>
* </presence>
*/
presence = $pres({ presence = $pres({
to: 'dummy@localhost/_converse.js-29092160', to: 'dummy@localhost/_converse.js-29092160',
type: 'unavailable', type: 'unavailable',
from: 'coven@chat.shakespeare.lit/newguy' from: 'coven@chat.shakespeare.lit/some1'
}) })
.c('status', 'Disconnected: Replaced by new connection').up() .c('status', 'Disconnected: Replaced by new connection').up()
.c('x', {xmlns: Strophe.NS.MUC_USER}) .c('x', {xmlns: Strophe.NS.MUC_USER})
.c('item', { .c('item', {
'affiliation': 'none', 'affiliation': 'none',
'jid': 'newguy@localhost/_converse.js-290929789', 'jid': 'some1@localhost/_converse.js-290929789',
'role': 'none' 'role': 'none'
}); });
_converse.connection._dataRecv(test_utils.createRequest(presence)); _converse.connection._dataRecv(test_utils.createRequest(presence));
expect($chat_content.find('div.chat-info').length).toBe(4);
$time = $chat_content.find('time');
expect($time.length).toEqual(1);
expect($time.attr('class')).toEqual('chat-info chat-date');
expect($time.data('isodate')).toEqual(moment().startOf('day').format());
expect($time.text()).toEqual(moment().startOf('day').format("dddd MMM Do YYYY"));
expect($chat_content.find('div.chat-info').length).toBe(1);
expect($chat_content.find('div.chat-info:last').html()).toBe( expect($chat_content.find('div.chat-info:last').html()).toBe(
'newguy has left the room. '+ 'some1 has left the room. '+
'"Disconnected: Replaced by new connection"'); '"Disconnected: Replaced by new connection"');
// When the user immediately joins again, we collapse the // XXX: Hack. We clear the chat contents instead of mocking the date
// multiple join/leave messages. $chat_content.html('');
var stanza = Strophe.xmlHtmlNode(
'<message xmlns="jabber:client"' +
' to="dummy@localhost/_converse.js-290929789"' +
' type="groupchat"' +
' from="coven@chat.shakespeare.lit/some1">'+
' <body>hello world</body>'+
' <delay xmlns="urn:xmpp:delay" stamp="2018-01-01T09:35:39Z" from="some1@localhost"/>'+
'</message>').firstChild;
_converse.connection._dataRecv(test_utils.createRequest(stanza));
presence = $pres({ presence = $pres({
to: 'dummy@localhost/_converse.js-29092160', to: 'dummy@localhost/_converse.js-29092160',
from: 'coven@chat.shakespeare.lit/newguy' from: 'coven@chat.shakespeare.lit/newguy'
...@@ -722,70 +679,58 @@ ...@@ -722,70 +679,58 @@
'role': 'participant' 'role': 'participant'
}); });
_converse.connection._dataRecv(test_utils.createRequest(presence)); _converse.connection._dataRecv(test_utils.createRequest(presence));
expect($chat_content.find('div.chat-info').length).toBe(4);
var $msg_el = $chat_content.find('div.chat-info:last');
expect($msg_el.html()).toBe("newguy has left and re-entered the room.");
expect($msg_el.data('leavejoin')).toBe('"newguy"');
$time = $chat_content.find('time');
expect($time.length).toEqual(2);
$time = $chat_content.find('time:eq(1)');
expect($time.attr('class')).toEqual('chat-info chat-date');
expect($time.data('isodate')).toEqual(moment().startOf('day').format());
expect($time.text()).toEqual(moment().startOf('day').format("dddd MMM Do YYYY"));
expect($chat_content.find('div.chat-info').length).toBe(1);
expect($chat_content.find('div.chat-info:first').html()).toBe("newguy has entered the room.");
// XXX: Hack. We clear the chat contents instead of mocking the date
$chat_content.html('');
stanza = Strophe.xmlHtmlNode(
'<message xmlns="jabber:client"' +
' to="dummy@localhost/_converse.js-290929789"' +
' type="groupchat"' +
' from="coven@chat.shakespeare.lit/some1">'+
' <body>hello world</body>'+
' <delay xmlns="urn:xmpp:delay" stamp="2018-01-01T09:35:39Z" from="some1@localhost"/>'+
'</message>').firstChild;
_converse.connection._dataRecv(test_utils.createRequest(stanza));
// Test a user leaving a chat room
presence = $pres({ presence = $pres({
to: 'dummy@localhost/_converse.js-29092160', to: 'dummy@localhost/_converse.js-29092160',
type: 'unavailable', type: 'unavailable',
from: 'coven@chat.shakespeare.lit/newguy' from: 'coven@chat.shakespeare.lit/some1'
}) })
.c('status', 'Disconnected: Replaced by new connection').up()
.c('x', {xmlns: Strophe.NS.MUC_USER}) .c('x', {xmlns: Strophe.NS.MUC_USER})
.c('item', { .c('item', {
'affiliation': 'none', 'affiliation': 'none',
'jid': 'newguy@localhost/_converse.js-290929789', 'jid': 'some1@localhost/_converse.js-290929789',
'role': 'none' 'role': 'none'
}); });
_converse.connection._dataRecv(test_utils.createRequest(presence)); _converse.connection._dataRecv(test_utils.createRequest(presence));
expect($chat_content.find('div.chat-info').length).toBe(4);
$msg_el = $chat_content.find('div.chat-info:last');
expect($msg_el.html()).toBe('newguy has left the room.');
expect($msg_el.data('leave')).toBe('"newguy"');
presence = $pres({ $time = $chat_content.find('time');
to: 'dummy@localhost/_converse.js-29092160', expect($time.length).toEqual(2);
from: 'coven@chat.shakespeare.lit/nomorenicks'
})
.c('x', {xmlns: Strophe.NS.MUC_USER})
.c('item', {
'affiliation': 'none',
'jid': 'nomorenicks@localhost/_converse.js-290929789',
'role': 'participant'
});
_converse.connection._dataRecv(test_utils.createRequest(presence));
expect($chat_content[0].querySelectorAll('div.chat-info').length).toBe(5);
expect($chat_content.find('div.chat-info:last').html()).toBe("nomorenicks has entered the room.");
presence = $pres({ $time = $chat_content.find('time:eq(1)');
to: 'dummy@localhost/_converse.js-290918392', expect($time.attr('class')).toEqual('chat-info chat-date');
type: 'unavailable', expect($time.data('isodate')).toEqual(moment().startOf('day').format());
from: 'coven@chat.shakespeare.lit/nomorenicks' expect($time.text()).toEqual(moment().startOf('day').format("dddd MMM Do YYYY"));
}).c('x', {xmlns: Strophe.NS.MUC_USER}) expect($chat_content.find('div.chat-info').length).toBe(1);
.c('item', { expect($chat_content.find('div.chat-info:last').html()).toBe(
'affiliation': 'none', 'some1 has left the room. '+
'jid': 'nomorenicks@localhost/_converse.js-290929789', '"Disconnected: Replaced by new connection"');
'role': 'none'
});
_converse.connection._dataRecv(test_utils.createRequest(presence));
expect($chat_content[0].querySelectorAll('div.chat-info').length).toBe(5);
expect($chat_content.find('div.chat-info:last').html()).toBe("nomorenicks has entered and left the room.");
presence = $pres({
to: 'dummy@localhost/_converse.js-29092160',
from: 'coven@chat.shakespeare.lit/nomorenicks'
})
.c('x', {xmlns: Strophe.NS.MUC_USER})
.c('item', {
'affiliation': 'none',
'jid': 'nomorenicks@localhost/_converse.js-290929789',
'role': 'participant'
});
_converse.connection._dataRecv(test_utils.createRequest(presence));
expect($chat_content[0].querySelectorAll('div.chat-info').length).toBe(5);
expect($chat_content.find('div.chat-info:last').html()).toBe("nomorenicks has entered the room.");
done(); done();
return;
})); }));
it("shows its description in the chat heading", it("shows its description in the chat heading",
...@@ -2060,7 +2005,7 @@ ...@@ -2060,7 +2005,7 @@
textarea.textContent = '/help This is the room subject'; textarea.textContent = '/help This is the room subject';
$(textarea).trigger($.Event('keypress', {keyCode: 13})); $(textarea).trigger($.Event('keypress', {keyCode: 13}));
expect(view.onMessageSubmitted).toHaveBeenCalled(); expect(view.onMessageSubmitted).toHaveBeenCalled();
const info_messages = Array.prototype.slice.call(view.el.querySelectorAll('.chat-info'), 0); const info_messages = Array.prototype.slice.call(view.el.querySelectorAll('.chat-info:not(.chat-date)'), 0);
expect(info_messages.length).toBe(17); expect(info_messages.length).toBe(17);
expect(info_messages.pop().textContent).toBe('/voice: Allow muted user to post messages'); expect(info_messages.pop().textContent).toBe('/voice: Allow muted user to post messages');
expect(info_messages.pop().textContent).toBe('/topic: Set room subject (alias for /subject)'); expect(info_messages.pop().textContent).toBe('/topic: Set room subject (alias for /subject)');
...@@ -2302,7 +2247,7 @@ ...@@ -2302,7 +2247,7 @@
.c('status', {'code': '307'}); .c('status', {'code': '307'});
_converse.connection._dataRecv(test_utils.createRequest(presence)); _converse.connection._dataRecv(test_utils.createRequest(presence));
expect( expect(
view.el.querySelectorAll('.chat-info')[2].textContent).toBe( view.el.querySelectorAll('.chat-info')[3].textContent).toBe(
"annoyingGuy has been kicked out"); "annoyingGuy has been kicked out");
done(); done();
}); });
......
src/converse-chatview.js
View file @ da3670d9
...@@ -386,21 +386,37 @@ ...@@ -386,21 +386,37 @@
/* Inserts an indicator into the chat area, showing the /* Inserts an indicator into the chat area, showing the
* day as given by the passed in date. * day as given by the passed in date.
* *
* The indicator is only inserted if necessary.
*
* Parameters: * Parameters:
* (HTMLElement) next_msg_el - The message element before * (HTMLElement) next_msg_el - The message element before
* which the day indicator element must be inserted. * which the day indicator element must be inserted.
* This element must have a "data-isodate" attribute * This element must have a "data-isodate" attribute
* which specifies its creation date. * which specifies its creation date.
*/ */
const date = next_msg_el.getAttribute('data-isodate'), const prev_msg_el = this.getPreviousMessageElement(next_msg_el),
day_date = moment(date).startOf('day'); prev_msg_date = _.isNull(prev_msg_el) ? null : prev_msg_el.getAttribute('data-isodate'),
next_msg_date = next_msg_el.getAttribute('data-isodate');
if (_.isNull(prev_msg_date) || moment(next_msg_date).isAfter(prev_msg_date, 'day')) {
const day_date = moment(next_msg_date).startOf('day');
next_msg_el.insertAdjacentHTML('beforeBegin', next_msg_el.insertAdjacentHTML('beforeBegin',
tpl_new_day({ tpl_new_day({
'isodate': day_date.format(), 'isodate': day_date.format(),
'datestring': day_date.format("dddd MMM Do YYYY") 'datestring': day_date.format("dddd MMM Do YYYY")
}) })
); );
}
},
getPreviousMessageElement (el) {
let prev_msg_el = el.previousSibling;
while (!_.isNull(prev_msg_el) &&
!u.hasClass(prev_msg_el, 'message') &&
!u.hasClass(prev_msg_el, 'chat-info')) {
prev_msg_el = prev_msg_el.previousSibling
}
return prev_msg_el;
}, },
getLastMessageElement () { getLastMessageElement () {
...@@ -476,14 +492,11 @@ ...@@ -476,14 +492,11 @@
if (_.isNull(previous_msg_date)) { if (_.isNull(previous_msg_date)) {
this.content.insertAdjacentElement('afterbegin', message_el); this.content.insertAdjacentElement('afterbegin', message_el);
this.insertDayIndicator(message_el);
} else { } else {
const previous_msg_el = sizzle(`[data-isodate="${previous_msg_date}"]:last`, this.content).pop(); const previous_msg_el = sizzle(`[data-isodate="${previous_msg_date}"]:last`, this.content).pop();
previous_msg_el.insertAdjacentElement('afterend', message_el); previous_msg_el.insertAdjacentElement('afterend', message_el);
if (current_msg_date.isAfter(previous_msg_date, 'day')) {
this.insertDayIndicator(message_el);
}
} }
this.insertDayIndicator(message_el);
this.scrollDown(); this.scrollDown();
}, },
......
src/converse-muc.js
View file @ da3670d9
...@@ -1837,6 +1837,7 @@ ...@@ -1837,6 +1837,7 @@
const nick = Strophe.getResourceFromJid(stanza.getAttribute('from')); const nick = Strophe.getResourceFromJid(stanza.getAttribute('from'));
const stat = stanza.querySelector('status'); const stat = stanza.querySelector('status');
const last_el = this.content.lastElementChild; const last_el = this.content.lastElementChild;
if (_.includes(_.get(last_el, 'classList', []), 'chat-info') && if (_.includes(_.get(last_el, 'classList', []), 'chat-info') &&
_.get(last_el, 'dataset', {}).leave === `"${nick}"`) { _.get(last_el, 'dataset', {}).leave === `"${nick}"`) {
last_el.outerHTML = last_el.outerHTML =
...@@ -1860,7 +1861,9 @@ ...@@ -1860,7 +1861,9 @@
last_el.outerHTML = tpl_info(data); last_el.outerHTML = tpl_info(data);
} else { } else {
this.content.insertAdjacentHTML('beforeend', tpl_info(data)); const el = u.stringToElement(tpl_info(data));
this.content.insertAdjacentElement('beforeend', el);
this.insertDayIndicator(el);
} }
} }
this.scrollDown(); this.scrollDown();
...@@ -1890,6 +1893,7 @@ ...@@ -1890,6 +1893,7 @@
} }
const data = { const data = {
'message': message, 'message': message,
'isodate': moment().format(),
'data': `data-leave="${nick}"` 'data': `data-leave="${nick}"`
} }
if (_.includes(_.get(last_el, 'classList', []), 'chat-info') && if (_.includes(_.get(last_el, 'classList', []), 'chat-info') &&
...@@ -1897,7 +1901,9 @@ ...@@ -1897,7 +1901,9 @@
last_el.outerHTML = tpl_info(data); last_el.outerHTML = tpl_info(data);
} else { } else {
this.content.insertAdjacentHTML('beforeend', tpl_info(data)); const el = u.stringToElement(tpl_info(data));
this.content.insertAdjacentElement('beforeend', el);
this.insertDayIndicator(el);
} }
} }
this.scrollDown(); this.scrollDown();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7