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

Distinguish between chat content and messages content.

Browse Source 
Fixes a bug that prevented scrolling from working correctly
This commit is contained in:
JC Brand 2020-03-24 13:41:13 +01:00
parent dc2eb30120
commit e3bd7b45f5
7 changed files with 58 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
spec/chatbox.js
View File

@ -41,7 +41,7 @@
}).c('body').t('hello world').tree();
await _converse.handleMessageStanza(msg);
await u.waitUntil(() => view.content.querySelectorAll('.chat-msg').length);
expect(view.content.lastElementChild.textContent.trim().indexOf('hello world')).not.toBe(-1);
expect(view.msgs_container.lastElementChild.textContent.trim().indexOf('hello world')).not.toBe(-1);
done();
}));

26
spec/messages.js
View File

@ -788,16 +788,16 @@
expect(msg_obj.get('sender')).toEqual('them');
expect(msg_obj.get('is_delayed')).toEqual(true);
await u.waitUntil(() => chatbox.vcard.get('fullname') === 'Juliet Capulet')
expect(view.content.querySelector('.chat-msg .chat-msg__text').textContent).toEqual(message);
expect(view.content.querySelector('.chat-msg__time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy();
expect(view.content.querySelector('span.chat-msg__author').textContent.trim()).toBe('Juliet Capulet');
expect(view.msgs_container.querySelector('.chat-msg .chat-msg__text').textContent).toEqual(message);
expect(view.msgs_container.querySelector('.chat-msg__time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy();
expect(view.msgs_container.querySelector('span.chat-msg__author').textContent.trim()).toBe('Juliet Capulet');
expect(view.content.querySelectorAll('.date-separator').length).toEqual(1);
let day = view.content.querySelector('.date-separator');
expect(view.msgs_container.querySelectorAll('.date-separator').length).toEqual(1);
let day = view.msgs_container.querySelector('.date-separator');
expect(day.getAttribute('class')).toEqual('message date-separator');
expect(day.getAttribute('data-isodate')).toEqual(dayjs(one_day_ago.startOf('day')).toISOString());
let time = view.content.querySelector('time.separator-text');
let time = view.msgs_container.querySelector('time.separator-text');
expect(time.textContent).toEqual(dayjs(one_day_ago.startOf('day')).format("dddd MMM Do YYYY"));
message = 'This is a current message';
@ -813,15 +813,15 @@
expect(_converse.api.trigger).toHaveBeenCalledWith('message', jasmine.any(Object));
// Check that there is a <time> element, with the required props.
expect(view.content.querySelectorAll('time.separator-text').length).toEqual(2); // There are now two time elements
expect(view.msgs_container.querySelectorAll('time.separator-text').length).toEqual(2); // There are now two time elements
const message_date = new Date();
day = sizzle('.date-separator:last', view.content);
day = sizzle('.date-separator:last', view.msgs_container);
expect(day.length).toEqual(1);
expect(day[0].getAttribute('class')).toEqual('message date-separator');
expect(day[0].getAttribute('data-isodate')).toEqual(dayjs(message_date).startOf('day').toISOString());
time = sizzle('time.separator-text:last', view.content).pop();
time = sizzle('time.separator-text:last', view.msgs_container).pop();
expect(time.textContent).toEqual(dayjs(message_date).startOf('day').format("dddd MMM Do YYYY"));
// Normal checks for the 2nd message
@ -831,12 +831,12 @@
expect(msg_obj.get('fullname')).toBeUndefined();
expect(msg_obj.get('sender')).toEqual('them');
expect(msg_obj.get('is_delayed')).toEqual(false);
const msg_txt = sizzle('.chat-msg:last .chat-msg__text', view.content).pop().textContent;
const msg_txt = sizzle('.chat-msg:last .chat-msg__text', view.msgs_container).pop().textContent;
expect(msg_txt).toEqual(message);
expect(view.content.querySelector('.chat-msg:last-child .chat-msg__text').textContent).toEqual(message);
expect(view.content.querySelector('.chat-msg:last-child .chat-msg__time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy();
expect(view.content.querySelector('.chat-msg:last-child .chat-msg__author').textContent.trim()).toBe('Juliet Capulet');
expect(view.msgs_container.querySelector('.chat-msg:last-child .chat-msg__text').textContent).toEqual(message);
expect(view.msgs_container.querySelector('.chat-msg:last-child .chat-msg__time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy();
expect(view.msgs_container.querySelector('.chat-msg:last-child .chat-msg__author').textContent.trim()).toBe('Juliet Capulet');
done();
}));

4
spec/muc.js
View File

@ -522,7 +522,7 @@
await view.model.close();
await u.waitUntil(() => view.model.clearMessages.calls.count());
expect(view.model.messages.length).toBe(0);
expect(view.content.innerHTML).toBe('');
expect(view.msgs_container.innerHTML).toBe('');
done()
}));
@ -996,7 +996,7 @@
// XXX: hack so that we can test leave/enter of occupants
// who were already in the room when we joined.
view.content.innerHTML = '';
view.msgs_container.innerHTML = '';
presence = u.toStanza(
`<presence xmlns="jabber:client" to="romeo@montague.lit/orchard" type="unavailable" from="coven@chat.shakespeare.lit/fabio">

31
src/converse-chatview.js
View File

@ -199,7 +199,7 @@ converse.plugins.add('converse-chatview', {
this.listenTo(this.model.messages, 'add', this.onMessageAdded);
this.listenTo(this.model.messages, 'rendered', this.scrollDown);
this.model.messages.on('reset', () => {
this.content.innerHTML = '';
this.msgs_container.innerHTML = '';
this.removeAll();
});
@ -248,8 +248,9 @@ converse.plugins.add('converse-chatview', {
)
);
render(result, this.el);
this.content = this.el.querySelector('.chat-content__messages');
this.content = this.el.querySelector('.chat-content');
this.csn = this.el.querySelector('.chat-content__notifications');
this.msgs_container = this.el.querySelector('.chat-content__messages');
this.renderChatStateNotification();
this.renderMessageForm();
this.renderHeading();
@ -493,20 +494,20 @@ converse.plugins.add('converse-chatview', {
showChatEvent (message) {
const isodate = (new Date()).toISOString();
this.content.insertAdjacentHTML(
this.msgs_container.insertAdjacentHTML(
'beforeend',
tpl_info({
'extra_classes': 'chat-event',
'message': message,
'isodate': isodate,
}));
this.insertDayIndicator(this.content.lastElementChild);
this.insertDayIndicator(this.msgs_container.lastElementChild);
this.scrollDown();
return isodate;
},
showErrorMessage (message) {
this.content.insertAdjacentHTML(
this.msgs_container.insertAdjacentHTML(
'beforeend',
tpl_error_message({'message': message, 'isodate': (new Date()).toISOString() })
);
@ -566,12 +567,12 @@ converse.plugins.add('converse-chatview', {
* @returns { Date }
*/
getLastMessageDate (cutoff) {
const first_msg = u.getFirstChildElement(this.content, '.message:not(.chat-state-notification)');
const first_msg = u.getFirstChildElement(this.msgs_container, '.message:not(.chat-state-notification)');
const oldest_date = first_msg ? first_msg.getAttribute('data-isodate') : null;
if (oldest_date !== null && dayjs(oldest_date).isAfter(cutoff)) {
return null;
}
const last_msg = u.getLastChildElement(this.content, '.message:not(.chat-state-notification)');
const last_msg = u.getLastChildElement(this.msgs_container, '.message:not(.chat-state-notification)');
const most_recent_date = last_msg ? last_msg.getAttribute('data-isodate') : null;
if (most_recent_date === null) {
return null;
@ -586,7 +587,7 @@ converse.plugins.add('converse-chatview', {
* upon element insertion.
*/
const sel = '.message:not(.chat-state-notification)';
const msg_dates = sizzle(sel, this.content).map(e => e.getAttribute('data-isodate'));
const msg_dates = sizzle(sel, this.msgs_container).map(e => e.getAttribute('data-isodate'));
const cutoff_iso = cutoff.toISOString();
msg_dates.push(cutoff_iso);
msg_dates.sort();
@ -639,7 +640,7 @@ converse.plugins.add('converse-chatview', {
showHelpMessages (msgs, type='info', spinner) {
msgs.forEach(msg => {
this.content.insertAdjacentHTML(
this.msgs_container.insertAdjacentHTML(
'beforeend',
tpl_help_message({
'isodate': (new Date()).toISOString(),
@ -669,7 +670,7 @@ converse.plugins.add('converse-chatview', {
*/
insertMessage (view) {
if (view.model.get('type') === 'error') {
const previous_msg_el = this.content.querySelector(`[data-msgid="${view.model.get('msgid')}"]`);
const previous_msg_el = this.msgs_container.querySelector(`[data-msgid="${view.model.get('msgid')}"]`);
if (previous_msg_el) {
previous_msg_el.insertAdjacentElement('afterend', view.el);
return this.trigger('messageInserted', view.el);
@ -679,9 +680,9 @@ converse.plugins.add('converse-chatview', {
const previous_msg_date = this.getLastMessageDate(current_msg_date);
if (previous_msg_date === null) {
this.content.insertAdjacentElement('afterbegin', view.el);
this.msgs_container.insertAdjacentElement('afterbegin', view.el);
} else {
const previous_msg_el = sizzle(`[data-isodate="${previous_msg_date.toISOString()}"]:last`, this.content).pop();
const previous_msg_el = sizzle(`[data-isodate="${previous_msg_date.toISOString()}"]:last`, this.msgs_container).pop();
if (view.model.get('type') === 'error' &&
u.hasClass('chat-error', previous_msg_el) &&
previous_msg_el.textContent === view.model.get('message')) {
@ -865,14 +866,14 @@ converse.plugins.add('converse-chatview', {
if (_converse.view_mode === 'overlayed') {
// XXX: Chrome flexbug workaround. The .chat-content area
// doesn't resize when the textarea is resized to its original size.
this.content.parentElement.style.display = 'none';
this.msgs_container.parentElement.style.display = 'none';
}
textarea.removeAttribute('disabled');
u.removeClass('disabled', textarea);
if (_converse.view_mode === 'overlayed') {
// XXX: Chrome flexbug workaround.
this.content.parentElement.style.display = '';
this.msgs_container.parentElement.style.display = '';
}
// Suppress events, otherwise superfluous CSN gets set
@ -1192,7 +1193,7 @@ converse.plugins.add('converse-chatview', {
text = __('%1$s is online', fullname);
}
if (text) {
this.content.insertAdjacentHTML(
this.msgs_container.insertAdjacentHTML(
'beforeend',
tpl_status_message({
'message': text,

3
src/converse-headlines-view.js
View File

@ -165,7 +165,8 @@ converse.plugins.add('converse-headlines-view', {
}
));
render(result, this.el);
this.content = this.el.querySelector('.chat-content__messages');
this.content = this.el.querySelector('.chat-content');
this.msgs_container = this.el.querySelector('.chat-content__messages');
return this;
},

58
src/converse-muc-views.js
View File

@ -697,7 +697,7 @@ converse.plugins.add('converse-muc-views', {
this.listenTo(this.model.messages, 'change:edited', this.onMessageEdited);
this.listenTo(this.model.messages, 'rendered', this.scrollDown);
this.model.messages.on('reset', () => {
this.content.innerHTML = '';
this.msgs_container.innerHTML = '';
this.removeAll();
});
@ -746,7 +746,8 @@ converse.plugins.add('converse-muc-views', {
}), this.el);
this.renderHeading();
this.renderBottomPanel();
this.content = this.el.querySelector('.chat-content__messages');
this.content = this.el.querySelector('.chat-content');
this.msgs_container = this.el.querySelector('.chat-content__messages');
this.csn = this.el.querySelector('.chat-content__notifications');
if (!_converse.muc_show_logs_before_join) {
this.model.session.get('connection_status') !== converse.ROOMSTATUS.ENTERED && this.showSpinner();
@ -1847,23 +1848,10 @@ converse.plugins.add('converse-muc-views', {
u.showElement(container);
},
getNotificationWithMessage (message) {
let el = this.content.lastElementChild;
while (el) {
if (!u.hasClass(el, 'chat-info')) {
return;
}
if (el.textContent === message) {
return el;
}
el = el.previousElementSibling;
}
},
removeEmptyHistoryFeedback () {
const el = this.content.firstElementChild;
const el = this.msgs_container.firstElementChild;
if (_converse.muc_show_logs_before_join && el && el.matches('.empty-history-feedback')) {
this.content.removeChild(this.content.firstElementChild);
this.msgs_container.removeChild(this.msgs_container.firstElementChild);
}
},
@ -1879,7 +1867,7 @@ converse.plugins.add('converse-muc-views', {
insertNotification (message) {
this.removeEmptyHistoryFeedback();
this.content.insertAdjacentHTML(
this.msgs_container.insertAdjacentHTML(
'beforeend',
tpl_info({
'isodate': (new Date()).toISOString(),
@ -1955,7 +1943,7 @@ converse.plugins.add('converse-muc-views', {
}
const nick = occupant.get('nick'),
stat = _converse.muc_show_join_leave_status ? occupant.get('status') : null,
prev_info_el = this.getPreviousJoinOrLeaveNotification(this.content.lastElementChild, nick),
prev_info_el = this.getPreviousJoinOrLeaveNotification(this.msgs_container.lastElementChild, nick),
data = prev_info_el?.dataset || {};
if (data.leave === nick) {
@ -1972,9 +1960,9 @@ converse.plugins.add('converse-muc-views', {
'extra_classes': 'chat-event',
'message': message
};
this.content.removeChild(prev_info_el);
this.content.insertAdjacentHTML('beforeend', tpl_info(data));
const el = this.content.lastElementChild;
this.msgs_container.removeChild(prev_info_el);
this.msgs_container.insertAdjacentHTML('beforeend', tpl_info(data));
const el = this.msgs_container.lastElementChild;
setTimeout(() => u.addClass('fade-out', el), 5000);
setTimeout(() => el.parentElement && el.parentElement.removeChild(el), 5500);
} else {
@ -1992,11 +1980,11 @@ converse.plugins.add('converse-muc-views', {
'message': message
};
if (prev_info_el) {
this.content.removeChild(prev_info_el);
this.content.insertAdjacentHTML('beforeend', tpl_info(data));
this.msgs_container.removeChild(prev_info_el);
this.msgs_container.insertAdjacentHTML('beforeend', tpl_info(data));
} else {
this.content.insertAdjacentHTML('beforeend', tpl_info(data));
this.insertDayIndicator(this.content.lastElementChild);
this.msgs_container.insertAdjacentHTML('beforeend', tpl_info(data));
this.insertDayIndicator(this.msgs_container.lastElementChild);
}
}
this.scrollDown();
@ -2010,7 +1998,7 @@ converse.plugins.add('converse-muc-views', {
}
const nick = occupant.get('nick'),
stat = _converse.muc_show_join_leave_status ? occupant.get('status') : null,
prev_info_el = this.getPreviousJoinOrLeaveNotification(this.content.lastElementChild, nick),
prev_info_el = this.getPreviousJoinOrLeaveNotification(this.msgs_container.lastElementChild, nick),
dataset = prev_info_el?.dataset || {};
if (dataset.join === nick) {
@ -2027,9 +2015,9 @@ converse.plugins.add('converse-muc-views', {
'extra_classes': 'chat-event',
'message': message
};
this.content.removeChild(prev_info_el);
this.content.insertAdjacentHTML('beforeend', tpl_info(data));
const el = this.content.lastElementChild;
this.msgs_container.removeChild(prev_info_el);
this.msgs_container.insertAdjacentHTML('beforeend', tpl_info(data));
const el = this.msgs_container.lastElementChild;
setTimeout(() => u.addClass('fade-out', el), 5000);
setTimeout(() => el.parentElement && el.parentElement.removeChild(el), 5500);
} else {
@ -2047,11 +2035,11 @@ converse.plugins.add('converse-muc-views', {
'data_value': nick
}
if (prev_info_el) {
this.content.removeChild(prev_info_el);
this.content.insertAdjacentHTML('beforeend', tpl_info(data));
this.msgs_container.removeChild(prev_info_el);
this.msgs_container.insertAdjacentHTML('beforeend', tpl_info(data));
} else {
this.content.insertAdjacentHTML('beforeend', tpl_info(data));
this.insertDayIndicator(this.content.lastElementChild);
this.msgs_container.insertAdjacentHTML('beforeend', tpl_info(data));
this.insertDayIndicator(this.msgs_container.lastElementChild);
}
}
this.scrollDown();
@ -2111,7 +2099,7 @@ converse.plugins.add('converse-muc-views', {
// replaced by the user's name.
// Example: Topic set by JC Brand
const message = subject.text ? __('Topic set by %1$s', author) : __('Topic cleared by %1$s', author);
this.content.insertAdjacentHTML(
this.msgs_container.insertAdjacentHTML(
'beforeend',
tpl_info({
'isodate': (new Date()).toISOString(),

2
tests/utils.js
View File

@ -314,7 +314,7 @@
utils.clearChatBoxMessages = function (converse, jid) {
const view = converse.chatboxviews.get(jid);
view.el.querySelector('.chat-content').innerHTML = '';
view.msgs_container.innerHTML = '';
return view.model.messages.clearStore();
};