Create converse-muc-chatarea
component
This commit is contained in:
parent
4fd848ff3e
commit
4ca30c4b93
@ -140,6 +140,13 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
|
converse-muc-chatarea {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-flow: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
.row {
|
.row {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
@ -37,7 +37,7 @@ describe("Chatboxes", function () {
|
|||||||
id: u.getUniqueId()
|
id: u.getUniqueId()
|
||||||
}).c('body').t('hello world').tree();
|
}).c('body').t('hello world').tree();
|
||||||
await _converse.handleMessageStanza(msg);
|
await _converse.handleMessageStanza(msg);
|
||||||
await u.waitUntil(() => view.content.querySelectorAll('.chat-msg').length);
|
await u.waitUntil(() => view.querySelectorAll('.chat-msg').length);
|
||||||
const msg_txt_sel = 'converse-chat-message:last-child .chat-msg__body';
|
const msg_txt_sel = 'converse-chat-message:last-child .chat-msg__body';
|
||||||
await u.waitUntil(() => view.querySelector(msg_txt_sel).textContent.trim() === 'hello world');
|
await u.waitUntil(() => view.querySelector(msg_txt_sel).textContent.trim() === 'hello world');
|
||||||
done();
|
done();
|
||||||
@ -524,7 +524,7 @@ describe("Chatboxes", function () {
|
|||||||
id: u.getUniqueId()
|
id: u.getUniqueId()
|
||||||
}).c('body').t('hello world').tree();
|
}).c('body').t('hello world').tree();
|
||||||
await _converse.handleMessageStanza(msg);
|
await _converse.handleMessageStanza(msg);
|
||||||
const msg_el = await u.waitUntil(() => view.content.querySelector('.chat-msg'));
|
const msg_el = await u.waitUntil(() => view.querySelector('.chat-msg'));
|
||||||
await u.waitUntil( () => view.querySelector('.chat-content__notifications').innerText === '');
|
await u.waitUntil( () => view.querySelector('.chat-content__notifications').innerText === '');
|
||||||
expect(msg_el.querySelector('.chat-msg__text').textContent).toBe('hello world');
|
expect(msg_el.querySelector('.chat-msg__text').textContent).toBe('hello world');
|
||||||
done();
|
done();
|
||||||
|
@ -267,7 +267,7 @@ describe("Emojis", function () {
|
|||||||
await new Promise(resolve => _converse.on('chatBoxViewInitialized', resolve));
|
await new Promise(resolve => _converse.on('chatBoxViewInitialized', resolve));
|
||||||
const view = _converse.api.chatviews.get(sender_jid);
|
const view = _converse.api.chatviews.get(sender_jid);
|
||||||
await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length);
|
await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length);
|
||||||
await u.waitUntil(() => u.hasClass('chat-msg__text--larger', view.content.querySelector('.chat-msg__text')));
|
await u.waitUntil(() => u.hasClass('chat-msg__text--larger', view.querySelector('.chat-msg__text')));
|
||||||
|
|
||||||
_converse.handleMessageStanza($msg({
|
_converse.handleMessageStanza($msg({
|
||||||
'from': sender_jid,
|
'from': sender_jid,
|
||||||
@ -279,7 +279,7 @@ describe("Emojis", function () {
|
|||||||
await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length === 2);
|
await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length === 2);
|
||||||
|
|
||||||
let sel = '.message:last-child .chat-msg__text';
|
let sel = '.message:last-child .chat-msg__text';
|
||||||
await u.waitUntil(() => u.hasClass('chat-msg__text--larger', view.content.querySelector(sel)));
|
await u.waitUntil(() => u.hasClass('chat-msg__text--larger', view.querySelector(sel)));
|
||||||
|
|
||||||
// Test that a modified message that no longer contains only
|
// Test that a modified message that no longer contains only
|
||||||
// emojis now renders normally again.
|
// emojis now renders normally again.
|
||||||
@ -293,7 +293,7 @@ describe("Emojis", function () {
|
|||||||
});
|
});
|
||||||
await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length === 3);
|
await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length === 3);
|
||||||
const last_msg_sel = 'converse-chat-message:last-child .chat-msg__text';
|
const last_msg_sel = 'converse-chat-message:last-child .chat-msg__text';
|
||||||
await u.waitUntil(() => view.content.querySelector(last_msg_sel).textContent === '💩 😇');
|
await u.waitUntil(() => view.querySelector(last_msg_sel).textContent === '💩 😇');
|
||||||
|
|
||||||
expect(textarea.value).toBe('');
|
expect(textarea.value).toBe('');
|
||||||
bottom_panel.onKeyDown({
|
bottom_panel.onKeyDown({
|
||||||
@ -314,7 +314,7 @@ describe("Emojis", function () {
|
|||||||
await u.waitUntil(() => Array.from(view.querySelectorAll('.chat-msg__text'))
|
await u.waitUntil(() => Array.from(view.querySelectorAll('.chat-msg__text'))
|
||||||
.filter(el => el.textContent === edited_text).length);
|
.filter(el => el.textContent === edited_text).length);
|
||||||
expect(view.model.messages.models.length).toBe(3);
|
expect(view.model.messages.models.length).toBe(3);
|
||||||
let message = view.content.querySelector(last_msg_sel);
|
let message = view.querySelector(last_msg_sel);
|
||||||
expect(u.hasClass('chat-msg__text--larger', message)).toBe(false);
|
expect(u.hasClass('chat-msg__text--larger', message)).toBe(false);
|
||||||
|
|
||||||
textarea.value = ':smile: Hello world!';
|
textarea.value = ':smile: Hello world!';
|
||||||
@ -333,7 +333,7 @@ describe("Emojis", function () {
|
|||||||
});
|
});
|
||||||
await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length === 5);
|
await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length === 5);
|
||||||
|
|
||||||
message = view.content.querySelector('.message:last-child .chat-msg__text');
|
message = view.querySelector('.message:last-child .chat-msg__text');
|
||||||
expect(u.hasClass('chat-msg__text--larger', message)).toBe(true);
|
expect(u.hasClass('chat-msg__text--larger', message)).toBe(true);
|
||||||
done()
|
done()
|
||||||
}));
|
}));
|
||||||
@ -355,11 +355,11 @@ describe("Emojis", function () {
|
|||||||
await new Promise(resolve => _converse.on('chatBoxViewInitialized', resolve));
|
await new Promise(resolve => _converse.on('chatBoxViewInitialized', resolve));
|
||||||
const view = _converse.api.chatviews.get(contact_jid);
|
const view = _converse.api.chatviews.get(contact_jid);
|
||||||
await new Promise(resolve => view.model.messages.once('rendered', resolve));
|
await new Promise(resolve => view.model.messages.once('rendered', resolve));
|
||||||
await u.waitUntil(() => view.content.querySelector('.chat-msg__text').innerHTML.replace(/<!---->/g, '') ===
|
await u.waitUntil(() => view.querySelector('.chat-msg__text').innerHTML.replace(/<!---->/g, '') ===
|
||||||
'<img class="emoji" draggable="false" title=":innocent:" alt="😇" src="https://twemoji.maxcdn.com/v/12.1.6//72x72/1f607.png">');
|
'<img class="emoji" draggable="false" title=":innocent:" alt="😇" src="https://twemoji.maxcdn.com/v/12.1.6//72x72/1f607.png">');
|
||||||
|
|
||||||
const last_msg_sel = 'converse-chat-message:last-child .chat-msg__text';
|
const last_msg_sel = 'converse-chat-message:last-child .chat-msg__text';
|
||||||
let message = view.content.querySelector(last_msg_sel);
|
let message = view.querySelector(last_msg_sel);
|
||||||
await u.waitUntil(() => u.isVisible(message.querySelector('.emoji')), 1000);
|
await u.waitUntil(() => u.isVisible(message.querySelector('.emoji')), 1000);
|
||||||
let imgs = message.querySelectorAll('.emoji');
|
let imgs = message.querySelectorAll('.emoji');
|
||||||
expect(imgs.length).toBe(1);
|
expect(imgs.length).toBe(1);
|
||||||
@ -374,7 +374,7 @@ describe("Emojis", function () {
|
|||||||
keyCode: 13 // Enter
|
keyCode: 13 // Enter
|
||||||
});
|
});
|
||||||
await new Promise(resolve => view.model.messages.once('rendered', resolve));
|
await new Promise(resolve => view.model.messages.once('rendered', resolve));
|
||||||
message = view.content.querySelector(last_msg_sel);
|
message = view.querySelector(last_msg_sel);
|
||||||
await u.waitUntil(() => u.isVisible(message.querySelector('.emoji')), 1000);
|
await u.waitUntil(() => u.isVisible(message.querySelector('.emoji')), 1000);
|
||||||
imgs = message.querySelectorAll('.emoji');
|
imgs = message.querySelectorAll('.emoji');
|
||||||
expect(imgs.length).toBe(2);
|
expect(imgs.length).toBe(2);
|
||||||
|
18
spec/mam.js
18
spec/mam.js
@ -267,8 +267,8 @@ describe("Message Archive Management", function () {
|
|||||||
</iq>`);
|
</iq>`);
|
||||||
_converse.connection._dataRecv(mock.createRequest(result));
|
_converse.connection._dataRecv(mock.createRequest(result));
|
||||||
await u.waitUntil(() => view.model.messages.length === 5);
|
await u.waitUntil(() => view.model.messages.length === 5);
|
||||||
await u.waitUntil(() => view.content.querySelectorAll('.chat-msg__text').length);
|
await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length);
|
||||||
await u.waitUntil(() => Array.from(view.content.querySelectorAll('.chat-msg__text'))
|
await u.waitUntil(() => Array.from(view.querySelectorAll('.chat-msg__text'))
|
||||||
.map(e => e.textContent).join(' ') === "2nd Message 3rd Message 4th Message 5th Message 6th Message", 1000);
|
.map(e => e.textContent).join(' ') === "2nd Message 3rd Message 4th Message 5th Message 6th Message", 1000);
|
||||||
done();
|
done();
|
||||||
}));
|
}));
|
||||||
@ -455,7 +455,7 @@ describe("Message Archive Management", function () {
|
|||||||
<stanza-id xmlns="urn:xmpp:sid:0" id="45fbbf2a-1059-479d-9283-c8effaf05621" by="trek-radio@conference.lightwitch.org"/>
|
<stanza-id xmlns="urn:xmpp:sid:0" id="45fbbf2a-1059-479d-9283-c8effaf05621" by="trek-radio@conference.lightwitch.org"/>
|
||||||
</message>`);
|
</message>`);
|
||||||
_converse.connection._dataRecv(mock.createRequest(stanza));
|
_converse.connection._dataRecv(mock.createRequest(stanza));
|
||||||
await u.waitUntil(() => view.content.querySelectorAll('.chat-msg').length);
|
await u.waitUntil(() => view.querySelectorAll('.chat-msg').length);
|
||||||
expect(view.model.messages.length).toBe(1);
|
expect(view.model.messages.length).toBe(1);
|
||||||
expect(view.model.messages.at(0).get('is_archived')).toBe(false);
|
expect(view.model.messages.at(0).get('is_archived')).toBe(false);
|
||||||
expect(view.model.messages.at(0).get('stanza_id trek-radio@conference.lightwitch.org')).toBe('45fbbf2a-1059-479d-9283-c8effaf05621');
|
expect(view.model.messages.at(0).get('stanza_id trek-radio@conference.lightwitch.org')).toBe('45fbbf2a-1059-479d-9283-c8effaf05621');
|
||||||
@ -480,7 +480,7 @@ describe("Message Archive Management", function () {
|
|||||||
expect(view.model.getDuplicateMessage.calls.count()).toBe(1);
|
expect(view.model.getDuplicateMessage.calls.count()).toBe(1);
|
||||||
const result = view.model.getDuplicateMessage.calls.all()[0].returnValue
|
const result = view.model.getDuplicateMessage.calls.all()[0].returnValue
|
||||||
expect(result instanceof _converse.Message).toBe(true);
|
expect(result instanceof _converse.Message).toBe(true);
|
||||||
expect(view.content.querySelectorAll('.chat-msg').length).toBe(1);
|
expect(view.querySelectorAll('.chat-msg').length).toBe(1);
|
||||||
|
|
||||||
await u.waitUntil(() => view.model.updateMessage.calls.count());
|
await u.waitUntil(() => view.model.updateMessage.calls.count());
|
||||||
expect(view.model.messages.length).toBe(1);
|
expect(view.model.messages.length).toBe(1);
|
||||||
@ -502,7 +502,7 @@ describe("Message Archive Management", function () {
|
|||||||
<stanza-id xmlns="urn:xmpp:sid:0" id="45fbbf2a-1059-479d-9283-c8effaf05621" by="trek-radio@conference.lightwitch.org"/>
|
<stanza-id xmlns="urn:xmpp:sid:0" id="45fbbf2a-1059-479d-9283-c8effaf05621" by="trek-radio@conference.lightwitch.org"/>
|
||||||
</message>`);
|
</message>`);
|
||||||
_converse.connection._dataRecv(mock.createRequest(stanza));
|
_converse.connection._dataRecv(mock.createRequest(stanza));
|
||||||
await u.waitUntil(() => view.content.querySelectorAll('.chat-msg').length);
|
await u.waitUntil(() => view.querySelectorAll('.chat-msg').length);
|
||||||
// Not sure whether such a race-condition might pose a problem
|
// Not sure whether such a race-condition might pose a problem
|
||||||
// in "real-world" situations.
|
// in "real-world" situations.
|
||||||
stanza = u.toStanza(
|
stanza = u.toStanza(
|
||||||
@ -524,7 +524,7 @@ describe("Message Archive Management", function () {
|
|||||||
expect(view.model.getDuplicateMessage.calls.count()).toBe(1);
|
expect(view.model.getDuplicateMessage.calls.count()).toBe(1);
|
||||||
const result = await view.model.getDuplicateMessage.calls.all()[0].returnValue
|
const result = await view.model.getDuplicateMessage.calls.all()[0].returnValue
|
||||||
expect(result instanceof _converse.Message).toBe(true);
|
expect(result instanceof _converse.Message).toBe(true);
|
||||||
expect(view.content.querySelectorAll('.chat-msg').length).toBe(1);
|
expect(view.querySelectorAll('.chat-msg').length).toBe(1);
|
||||||
done();
|
done();
|
||||||
}));
|
}));
|
||||||
|
|
||||||
@ -550,8 +550,8 @@ describe("Message Archive Management", function () {
|
|||||||
</result>
|
</result>
|
||||||
</message>`);
|
</message>`);
|
||||||
_converse.handleMAMResult(view.model, { 'messages': [stanza] });
|
_converse.handleMAMResult(view.model, { 'messages': [stanza] });
|
||||||
await u.waitUntil(() => view.content.querySelectorAll('.chat-msg').length);
|
await u.waitUntil(() => view.querySelectorAll('.chat-msg').length);
|
||||||
expect(view.content.querySelectorAll('.chat-msg').length).toBe(1);
|
expect(view.querySelectorAll('.chat-msg').length).toBe(1);
|
||||||
|
|
||||||
stanza = u.toStanza(
|
stanza = u.toStanza(
|
||||||
`<message xmlns="jabber:client" to="romeo@montague.lit/orchard" from="discuss@conference.conversejs.org">
|
`<message xmlns="jabber:client" to="romeo@montague.lit/orchard" from="discuss@conference.conversejs.org">
|
||||||
@ -574,7 +574,7 @@ describe("Message Archive Management", function () {
|
|||||||
expect(view.model.getDuplicateMessage.calls.count()).toBe(1);
|
expect(view.model.getDuplicateMessage.calls.count()).toBe(1);
|
||||||
const result = await view.model.getDuplicateMessage.calls.all()[0].returnValue
|
const result = await view.model.getDuplicateMessage.calls.all()[0].returnValue
|
||||||
expect(result instanceof _converse.Message).toBe(true);
|
expect(result instanceof _converse.Message).toBe(true);
|
||||||
expect(view.content.querySelectorAll('.chat-msg').length).toBe(1);
|
expect(view.querySelectorAll('.chat-msg').length).toBe(1);
|
||||||
done();
|
done();
|
||||||
}))
|
}))
|
||||||
});
|
});
|
||||||
|
@ -22,7 +22,7 @@ describe("A Groupchat Message", function () {
|
|||||||
'type': 'groupchat'
|
'type': 'groupchat'
|
||||||
}).c('body').t(message).tree();
|
}).c('body').t(message).tree();
|
||||||
await view.model.handleMessageStanza(msg);
|
await view.model.handleMessageStanza(msg);
|
||||||
await u.waitUntil(() => sizzle('.chat-msg:last .chat-msg__text', view.content).pop());
|
await u.waitUntil(() => sizzle('.chat-msg:last .chat-msg__text', view).pop());
|
||||||
await u.waitUntil(() => view.querySelector('.chat-msg__text').textContent.trim() === 'is tired');
|
await u.waitUntil(() => view.querySelector('.chat-msg__text').textContent.trim() === 'is tired');
|
||||||
expect(view.querySelector('.chat-msg__author').textContent.includes('**Dyon van de Wege')).toBeTruthy();
|
expect(view.querySelector('.chat-msg__author').textContent.includes('**Dyon van de Wege')).toBeTruthy();
|
||||||
|
|
||||||
|
@ -381,7 +381,7 @@ describe("A sent groupchat message", function () {
|
|||||||
|
|
||||||
const last_msg_sel = 'converse-chat-message:last-child .chat-msg__text';
|
const last_msg_sel = 'converse-chat-message:last-child .chat-msg__text';
|
||||||
await u.waitUntil(() =>
|
await u.waitUntil(() =>
|
||||||
view.content.querySelector(last_msg_sel).innerHTML.replace(/<!---->/g, '') ===
|
view.querySelector(last_msg_sel).innerHTML.replace(/<!---->/g, '') ===
|
||||||
'hello <span class="mention">z3r0</span> <span class="mention">gibson</span> <span class="mention">mr.robot</span>, how are you?'
|
'hello <span class="mention">z3r0</span> <span class="mention">gibson</span> <span class="mention">mr.robot</span>, how are you?'
|
||||||
);
|
);
|
||||||
|
|
||||||
|
164
spec/messages.js
164
spec/messages.js
@ -190,53 +190,53 @@ describe("A Chat Message", function () {
|
|||||||
await u.waitUntil(() => view.querySelectorAll('.chat-msg').length === 7);
|
await u.waitUntil(() => view.querySelectorAll('.chat-msg').length === 7);
|
||||||
|
|
||||||
view.clearSpinner(); //cleanup
|
view.clearSpinner(); //cleanup
|
||||||
expect(view.content.querySelectorAll('.date-separator').length).toEqual(4);
|
expect(view.querySelectorAll('.date-separator').length).toEqual(4);
|
||||||
|
|
||||||
let day = sizzle('.date-separator:first', view.content).pop();
|
let day = sizzle('.date-separator:first', view).pop();
|
||||||
expect(day.getAttribute('data-isodate')).toEqual(dayjs('2017-12-31T00:00:00').toISOString());
|
expect(day.getAttribute('data-isodate')).toEqual(dayjs('2017-12-31T00:00:00').toISOString());
|
||||||
|
|
||||||
let time = sizzle('time:first', view.content).pop();
|
let time = sizzle('time:first', view).pop();
|
||||||
expect(time.textContent).toEqual('Sunday Dec 31st 2017')
|
expect(time.textContent).toEqual('Sunday Dec 31st 2017')
|
||||||
|
|
||||||
day = sizzle('.date-separator:first', view.content).pop();
|
day = sizzle('.date-separator:first', view).pop();
|
||||||
expect(day.nextElementSibling.querySelector('.chat-msg__text').textContent).toBe('Older message');
|
expect(day.nextElementSibling.querySelector('.chat-msg__text').textContent).toBe('Older message');
|
||||||
|
|
||||||
let el = sizzle('.chat-msg:first', view.content).pop().querySelector('.chat-msg__text')
|
let el = sizzle('.chat-msg:first', view).pop().querySelector('.chat-msg__text')
|
||||||
expect(u.hasClass('chat-msg--followup', el)).toBe(false);
|
expect(u.hasClass('chat-msg--followup', el)).toBe(false);
|
||||||
expect(el.textContent).toEqual('Older message');
|
expect(el.textContent).toEqual('Older message');
|
||||||
|
|
||||||
time = sizzle('time.separator-text:eq(1)', view.content).pop();
|
time = sizzle('time.separator-text:eq(1)', view).pop();
|
||||||
expect(time.textContent).toEqual("Monday Jan 1st 2018");
|
expect(time.textContent).toEqual("Monday Jan 1st 2018");
|
||||||
|
|
||||||
day = sizzle('.date-separator:eq(1)', view.content).pop();
|
day = sizzle('.date-separator:eq(1)', view).pop();
|
||||||
expect(day.getAttribute('data-isodate')).toEqual(dayjs('2018-01-01T00:00:00').toISOString());
|
expect(day.getAttribute('data-isodate')).toEqual(dayjs('2018-01-01T00:00:00').toISOString());
|
||||||
expect(day.nextElementSibling.querySelector('.chat-msg__text').textContent).toBe('Inbetween message');
|
expect(day.nextElementSibling.querySelector('.chat-msg__text').textContent).toBe('Inbetween message');
|
||||||
|
|
||||||
el = sizzle('.chat-msg:eq(1)', view.content).pop();
|
el = sizzle('.chat-msg:eq(1)', view).pop();
|
||||||
expect(el.querySelector('.chat-msg__text').textContent).toEqual('Inbetween message');
|
expect(el.querySelector('.chat-msg__text').textContent).toEqual('Inbetween message');
|
||||||
expect(el.parentElement.nextElementSibling.querySelector('.chat-msg__text').textContent).toEqual('another inbetween message');
|
expect(el.parentElement.nextElementSibling.querySelector('.chat-msg__text').textContent).toEqual('another inbetween message');
|
||||||
el = sizzle('.chat-msg:eq(2)', view.content).pop();
|
el = sizzle('.chat-msg:eq(2)', view).pop();
|
||||||
expect(el.querySelector('.chat-msg__text').textContent)
|
expect(el.querySelector('.chat-msg__text').textContent)
|
||||||
.toEqual('another inbetween message');
|
.toEqual('another inbetween message');
|
||||||
expect(u.hasClass('chat-msg--followup', el)).toBe(true);
|
expect(u.hasClass('chat-msg--followup', el)).toBe(true);
|
||||||
|
|
||||||
time = sizzle('time.separator-text:nth(2)', view.content).pop();
|
time = sizzle('time.separator-text:nth(2)', view).pop();
|
||||||
expect(time.textContent).toEqual("Tuesday Jan 2nd 2018");
|
expect(time.textContent).toEqual("Tuesday Jan 2nd 2018");
|
||||||
|
|
||||||
day = sizzle('.date-separator:nth(2)', view.content).pop();
|
day = sizzle('.date-separator:nth(2)', view).pop();
|
||||||
expect(day.getAttribute('data-isodate')).toEqual(dayjs('2018-01-02T00:00:00').toISOString());
|
expect(day.getAttribute('data-isodate')).toEqual(dayjs('2018-01-02T00:00:00').toISOString());
|
||||||
expect(day.nextElementSibling.querySelector('.chat-msg__text').textContent).toBe('An earlier message on the next day');
|
expect(day.nextElementSibling.querySelector('.chat-msg__text').textContent).toBe('An earlier message on the next day');
|
||||||
|
|
||||||
el = sizzle('.chat-msg:eq(3)', view.content).pop();
|
el = sizzle('.chat-msg:eq(3)', view).pop();
|
||||||
expect(el.querySelector('.chat-msg__text').textContent).toEqual('An earlier message on the next day');
|
expect(el.querySelector('.chat-msg__text').textContent).toEqual('An earlier message on the next day');
|
||||||
expect(u.hasClass('chat-msg--followup', el)).toBe(false);
|
expect(u.hasClass('chat-msg--followup', el)).toBe(false);
|
||||||
|
|
||||||
el = sizzle('.chat-msg:eq(4)', view.content).pop();
|
el = sizzle('.chat-msg:eq(4)', view).pop();
|
||||||
expect(el.querySelector('.chat-msg__text').textContent).toEqual('message');
|
expect(el.querySelector('.chat-msg__text').textContent).toEqual('message');
|
||||||
expect(el.parentElement.nextElementSibling.querySelector('.chat-msg__text').textContent).toEqual('newer message from the next day');
|
expect(el.parentElement.nextElementSibling.querySelector('.chat-msg__text').textContent).toEqual('newer message from the next day');
|
||||||
expect(u.hasClass('chat-msg--followup', el)).toBe(false);
|
expect(u.hasClass('chat-msg--followup', el)).toBe(false);
|
||||||
|
|
||||||
day = sizzle('.date-separator:last', view.content).pop();
|
day = sizzle('.date-separator:last', view).pop();
|
||||||
expect(day.getAttribute('data-isodate')).toEqual(dayjs().startOf('day').toISOString());
|
expect(day.getAttribute('data-isodate')).toEqual(dayjs().startOf('day').toISOString());
|
||||||
expect(day.nextElementSibling.querySelector('.chat-msg__text').textContent).toBe('latest message');
|
expect(day.nextElementSibling.querySelector('.chat-msg__text').textContent).toBe('latest message');
|
||||||
expect(u.hasClass('chat-msg--followup', el)).toBe(false);
|
expect(u.hasClass('chat-msg--followup', el)).toBe(false);
|
||||||
@ -310,12 +310,12 @@ describe("A Chat Message", function () {
|
|||||||
expect(msg_obj.get('sender')).toEqual('them');
|
expect(msg_obj.get('sender')).toEqual('them');
|
||||||
expect(msg_obj.get('is_delayed')).toEqual(false);
|
expect(msg_obj.get('is_delayed')).toEqual(false);
|
||||||
// Now check that the message appears inside the chatbox in the DOM
|
// Now check that the message appears inside the chatbox in the DOM
|
||||||
await u.waitUntil(() => view.content.querySelector('.chat-msg .chat-msg__text'));
|
await u.waitUntil(() => view.querySelector('.chat-msg .chat-msg__text'));
|
||||||
|
|
||||||
expect(view.content.querySelector('.chat-msg .chat-msg__text').textContent).toEqual(msgtext);
|
expect(view.querySelector('.chat-msg .chat-msg__text').textContent).toEqual(msgtext);
|
||||||
expect(view.content.querySelector('.chat-msg__time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy();
|
expect(view.querySelector('.chat-msg__time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy();
|
||||||
await u.waitUntil(() => chatbox.vcard.get('fullname') === 'Juliet Capulet')
|
await u.waitUntil(() => chatbox.vcard.get('fullname') === 'Juliet Capulet')
|
||||||
expect(view.content.querySelector('span.chat-msg__author').textContent.trim()).toBe('Juliet Capulet');
|
expect(view.querySelector('span.chat-msg__author').textContent.trim()).toBe('Juliet Capulet');
|
||||||
done();
|
done();
|
||||||
}));
|
}));
|
||||||
|
|
||||||
@ -578,7 +578,7 @@ describe("A Chat Message", function () {
|
|||||||
</message>`);
|
</message>`);
|
||||||
_converse.connection._dataRecv(mock.createRequest(stanza));
|
_converse.connection._dataRecv(mock.createRequest(stanza));
|
||||||
await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length);
|
await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length);
|
||||||
expect(view.content.querySelector('.chat-msg__text').innerHTML.replace(/<!---->/g, '')).toBe('Hey\nHave you heard the news?');
|
expect(view.querySelector('.chat-msg__text').innerHTML.replace(/<!---->/g, '')).toBe('Hey\nHave you heard the news?');
|
||||||
stanza = u.toStanza(`
|
stanza = u.toStanza(`
|
||||||
<message from="${contact_jid}"
|
<message from="${contact_jid}"
|
||||||
type="chat"
|
type="chat"
|
||||||
@ -587,7 +587,7 @@ describe("A Chat Message", function () {
|
|||||||
</message>`);
|
</message>`);
|
||||||
_converse.connection._dataRecv(mock.createRequest(stanza));
|
_converse.connection._dataRecv(mock.createRequest(stanza));
|
||||||
await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length === 2);
|
await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length === 2);
|
||||||
const text = view.content.querySelector('converse-chat-message:last-child .chat-msg__text').innerHTML.replace(/<!---->/g, '');
|
const text = view.querySelector('converse-chat-message:last-child .chat-msg__text').innerHTML.replace(/<!---->/g, '');
|
||||||
expect(text).toBe('Hey\n\u200B\nHave you heard the news?');
|
expect(text).toBe('Hey\n\u200B\nHave you heard the news?');
|
||||||
stanza = u.toStanza(`
|
stanza = u.toStanza(`
|
||||||
<message from="${contact_jid}"
|
<message from="${contact_jid}"
|
||||||
@ -597,7 +597,7 @@ describe("A Chat Message", function () {
|
|||||||
</message>`);
|
</message>`);
|
||||||
_converse.connection._dataRecv(mock.createRequest(stanza));
|
_converse.connection._dataRecv(mock.createRequest(stanza));
|
||||||
await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length === 3);
|
await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length === 3);
|
||||||
expect(view.content.querySelector('converse-chat-message:last-child .chat-msg__text').innerHTML.replace(/<!---->/g, '')).toBe('Hey\nHave you heard\nthe news?');
|
expect(view.querySelector('converse-chat-message:last-child .chat-msg__text').innerHTML.replace(/<!---->/g, '')).toBe('Hey\nHave you heard\nthe news?');
|
||||||
|
|
||||||
stanza = u.toStanza(`
|
stanza = u.toStanza(`
|
||||||
<message from="${contact_jid}"
|
<message from="${contact_jid}"
|
||||||
@ -608,7 +608,7 @@ describe("A Chat Message", function () {
|
|||||||
_converse.connection._dataRecv(mock.createRequest(stanza));
|
_converse.connection._dataRecv(mock.createRequest(stanza));
|
||||||
await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length === 4);
|
await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length === 4);
|
||||||
await u.waitUntil(() => {
|
await u.waitUntil(() => {
|
||||||
const text = view.content.querySelector('converse-chat-message:last-child .chat-msg__text').innerHTML.replace(/<!---->/g, '');
|
const text = view.querySelector('converse-chat-message:last-child .chat-msg__text').innerHTML.replace(/<!---->/g, '');
|
||||||
return text === 'Hey\nHave you heard\n\u200B\nthe news?\n<a target="_blank" rel="noopener" href="https://conversejs.org/">https://conversejs.org</a>';
|
return text === 'Hey\nHave you heard\n\u200B\nthe news?\n<a target="_blank" rel="noopener" href="https://conversejs.org/">https://conversejs.org</a>';
|
||||||
});
|
});
|
||||||
done();
|
done();
|
||||||
@ -655,7 +655,7 @@ describe("A Chat Message", function () {
|
|||||||
message = 'https://imgur.com/oxymPax';
|
message = 'https://imgur.com/oxymPax';
|
||||||
await mock.sendMessage(view, message);
|
await mock.sendMessage(view, message);
|
||||||
await u.waitUntil(() => view.querySelectorAll('.chat-content .chat-image').length === 5, 1000);
|
await u.waitUntil(() => view.querySelectorAll('.chat-content .chat-image').length === 5, 1000);
|
||||||
expect(view.content.querySelectorAll('.chat-content .chat-image').length).toBe(5);
|
expect(view.querySelectorAll('.chat-content .chat-image').length).toBe(5);
|
||||||
|
|
||||||
// Check that the Imgur URL gets a .png attached to make it render
|
// Check that the Imgur URL gets a .png attached to make it render
|
||||||
await u.waitUntil(() => Array.from(view.querySelectorAll('.chat-content .chat-image')).pop().src.endsWith('png'), 1000);
|
await u.waitUntil(() => Array.from(view.querySelectorAll('.chat-content .chat-image')).pop().src.endsWith('png'), 1000);
|
||||||
@ -681,7 +681,7 @@ describe("A Chat Message", function () {
|
|||||||
await mock.sendMessage(view, message);
|
await mock.sendMessage(view, message);
|
||||||
await u.waitUntil(() => view.querySelectorAll('.chat-content .chat-msg').length === 2, 1000);
|
await u.waitUntil(() => view.querySelectorAll('.chat-content .chat-msg').length === 2, 1000);
|
||||||
await u.waitUntil(() => view.querySelectorAll('.chat-content .chat-image').length === 1, 1000)
|
await u.waitUntil(() => view.querySelectorAll('.chat-content .chat-image').length === 1, 1000)
|
||||||
expect(view.content.querySelectorAll('.chat-content .chat-image').length).toBe(1);
|
expect(view.querySelectorAll('.chat-content .chat-image').length).toBe(1);
|
||||||
|
|
||||||
done();
|
done();
|
||||||
}));
|
}));
|
||||||
@ -821,24 +821,24 @@ describe("A Chat Message", function () {
|
|||||||
jasmine.clock().tick(1*ONE_MINUTE_LATER);
|
jasmine.clock().tick(1*ONE_MINUTE_LATER);
|
||||||
await mock.sendMessage(view, "Another message within 10 minutes, but from a different person");
|
await mock.sendMessage(view, "Another message within 10 minutes, but from a different person");
|
||||||
|
|
||||||
expect(view.content.querySelectorAll('.message').length).toBe(6);
|
expect(view.querySelectorAll('.message').length).toBe(6);
|
||||||
expect(view.content.querySelectorAll('.chat-msg').length).toBe(5);
|
expect(view.querySelectorAll('.chat-msg').length).toBe(5);
|
||||||
|
|
||||||
const nth_child = (n) => `converse-chat-message:nth-child(${n}) .chat-msg`;
|
const nth_child = (n) => `converse-chat-message:nth-child(${n}) .chat-msg`;
|
||||||
expect(u.hasClass('chat-msg--followup', view.content.querySelector(nth_child(2)))).toBe(false);
|
expect(u.hasClass('chat-msg--followup', view.querySelector(nth_child(2)))).toBe(false);
|
||||||
expect(view.content.querySelector(`${nth_child(2)} .chat-msg__text`).textContent).toBe("A message");
|
expect(view.querySelector(`${nth_child(2)} .chat-msg__text`).textContent).toBe("A message");
|
||||||
|
|
||||||
expect(u.hasClass('chat-msg--followup', view.content.querySelector(nth_child(3)))).toBe(true);
|
expect(u.hasClass('chat-msg--followup', view.querySelector(nth_child(3)))).toBe(true);
|
||||||
expect(view.content.querySelector(`${nth_child(3)} .chat-msg__text`).textContent).toBe(
|
expect(view.querySelector(`${nth_child(3)} .chat-msg__text`).textContent).toBe(
|
||||||
"Another message 3 minutes later");
|
"Another message 3 minutes later");
|
||||||
expect(u.hasClass('chat-msg--followup', view.content.querySelector(nth_child(4)))).toBe(false);
|
expect(u.hasClass('chat-msg--followup', view.querySelector(nth_child(4)))).toBe(false);
|
||||||
expect(view.content.querySelector(`${nth_child(4)} .chat-msg__text`).textContent).toBe(
|
expect(view.querySelector(`${nth_child(4)} .chat-msg__text`).textContent).toBe(
|
||||||
"Another message 14 minutes since we started");
|
"Another message 14 minutes since we started");
|
||||||
expect(u.hasClass('chat-msg--followup', view.content.querySelector(nth_child(5)))).toBe(true);
|
expect(u.hasClass('chat-msg--followup', view.querySelector(nth_child(5)))).toBe(true);
|
||||||
expect(view.content.querySelector(`${nth_child(5)} .chat-msg__text`).textContent).toBe(
|
expect(view.querySelector(`${nth_child(5)} .chat-msg__text`).textContent).toBe(
|
||||||
"Another message 1 minute and 1 second since the previous one");
|
"Another message 1 minute and 1 second since the previous one");
|
||||||
expect(u.hasClass('chat-msg--followup', view.content.querySelector(nth_child(6)))).toBe(false);
|
expect(u.hasClass('chat-msg--followup', view.querySelector(nth_child(6)))).toBe(false);
|
||||||
expect(view.content.querySelector(`${nth_child(6)} .chat-msg__text`).textContent).toBe(
|
expect(view.querySelector(`${nth_child(6)} .chat-msg__text`).textContent).toBe(
|
||||||
"Another message within 10 minutes, but from a different person");
|
"Another message within 10 minutes, but from a different person");
|
||||||
|
|
||||||
// Let's add a delayed, inbetween message
|
// Let's add a delayed, inbetween message
|
||||||
@ -854,29 +854,29 @@ describe("A Chat Message", function () {
|
|||||||
.tree());
|
.tree());
|
||||||
await new Promise(resolve => view.model.messages.once('rendered', resolve));
|
await new Promise(resolve => view.model.messages.once('rendered', resolve));
|
||||||
|
|
||||||
expect(view.content.querySelectorAll('.message').length).toBe(7);
|
expect(view.querySelectorAll('.message').length).toBe(7);
|
||||||
expect(view.content.querySelectorAll('.chat-msg').length).toBe(6);
|
expect(view.querySelectorAll('.chat-msg').length).toBe(6);
|
||||||
expect(u.hasClass('chat-msg--followup', view.content.querySelector(nth_child(2)))).toBe(false);
|
expect(u.hasClass('chat-msg--followup', view.querySelector(nth_child(2)))).toBe(false);
|
||||||
expect(view.content.querySelector(`${nth_child(2)} .chat-msg__text`).textContent).toBe("A message");
|
expect(view.querySelector(`${nth_child(2)} .chat-msg__text`).textContent).toBe("A message");
|
||||||
|
|
||||||
|
|
||||||
expect(u.hasClass('chat-msg--followup', view.content.querySelector(nth_child(3)))).toBe(true);
|
expect(u.hasClass('chat-msg--followup', view.querySelector(nth_child(3)))).toBe(true);
|
||||||
expect(view.content.querySelector(`${nth_child(3)} .chat-msg__text`).textContent).toBe(
|
expect(view.querySelector(`${nth_child(3)} .chat-msg__text`).textContent).toBe(
|
||||||
"Another message 3 minutes later");
|
"Another message 3 minutes later");
|
||||||
expect(u.hasClass('chat-msg--followup', view.content.querySelector(nth_child(4)))).toBe(true);
|
expect(u.hasClass('chat-msg--followup', view.querySelector(nth_child(4)))).toBe(true);
|
||||||
expect(view.content.querySelector(`${nth_child(4)} .chat-msg__text`).textContent).toBe(
|
expect(view.querySelector(`${nth_child(4)} .chat-msg__text`).textContent).toBe(
|
||||||
"A delayed message, sent 5 minutes since we started");
|
"A delayed message, sent 5 minutes since we started");
|
||||||
|
|
||||||
expect(u.hasClass('chat-msg--followup', view.content.querySelector(nth_child(5)))).toBe(true);
|
expect(u.hasClass('chat-msg--followup', view.querySelector(nth_child(5)))).toBe(true);
|
||||||
expect(view.content.querySelector(`${nth_child(5)} .chat-msg__text`).textContent).toBe(
|
expect(view.querySelector(`${nth_child(5)} .chat-msg__text`).textContent).toBe(
|
||||||
"Another message 14 minutes since we started");
|
"Another message 14 minutes since we started");
|
||||||
|
|
||||||
expect(u.hasClass('chat-msg--followup', view.content.querySelector(nth_child(6)))).toBe(true);
|
expect(u.hasClass('chat-msg--followup', view.querySelector(nth_child(6)))).toBe(true);
|
||||||
expect(view.content.querySelector(`${nth_child(6)} .chat-msg__text`).textContent).toBe(
|
expect(view.querySelector(`${nth_child(6)} .chat-msg__text`).textContent).toBe(
|
||||||
"Another message 1 minute and 1 second since the previous one");
|
"Another message 1 minute and 1 second since the previous one");
|
||||||
|
|
||||||
expect(u.hasClass('chat-msg--followup', view.content.querySelector(nth_child(7)))).toBe(false);
|
expect(u.hasClass('chat-msg--followup', view.querySelector(nth_child(7)))).toBe(false);
|
||||||
expect(view.content.querySelector(`${nth_child(7)} .chat-msg__text`).textContent).toBe(
|
expect(view.querySelector(`${nth_child(7)} .chat-msg__text`).textContent).toBe(
|
||||||
"Another message within 10 minutes, but from a different person");
|
"Another message within 10 minutes, but from a different person");
|
||||||
|
|
||||||
_converse.handleMessageStanza(
|
_converse.handleMessageStanza(
|
||||||
@ -891,26 +891,26 @@ describe("A Chat Message", function () {
|
|||||||
.tree());
|
.tree());
|
||||||
await new Promise(resolve => view.model.messages.once('rendered', resolve));
|
await new Promise(resolve => view.model.messages.once('rendered', resolve));
|
||||||
|
|
||||||
expect(view.content.querySelectorAll('.chat-msg').length).toBe(7);
|
expect(view.querySelectorAll('.chat-msg').length).toBe(7);
|
||||||
expect(u.hasClass('chat-msg--followup', view.content.querySelector(nth_child(2)))).toBe(false);
|
expect(u.hasClass('chat-msg--followup', view.querySelector(nth_child(2)))).toBe(false);
|
||||||
expect(view.content.querySelector(`${nth_child(2)} .chat-msg__text`).textContent).toBe("A message");
|
expect(view.querySelector(`${nth_child(2)} .chat-msg__text`).textContent).toBe("A message");
|
||||||
expect(u.hasClass('chat-msg--followup', view.content.querySelector(nth_child(3)))).toBe(true);
|
expect(u.hasClass('chat-msg--followup', view.querySelector(nth_child(3)))).toBe(true);
|
||||||
expect(view.content.querySelector(`${nth_child(3)} .chat-msg__text`).textContent).toBe(
|
expect(view.querySelector(`${nth_child(3)} .chat-msg__text`).textContent).toBe(
|
||||||
"Another message 3 minutes later");
|
"Another message 3 minutes later");
|
||||||
expect(u.hasClass('chat-msg--followup', view.content.querySelector(nth_child(4)))).toBe(false);
|
expect(u.hasClass('chat-msg--followup', view.querySelector(nth_child(4)))).toBe(false);
|
||||||
expect(view.content.querySelector(`${nth_child(4)} .chat-msg__text`).textContent).toBe(
|
expect(view.querySelector(`${nth_child(4)} .chat-msg__text`).textContent).toBe(
|
||||||
"A carbon message 4 minutes later");
|
"A carbon message 4 minutes later");
|
||||||
expect(u.hasClass('chat-msg--followup', view.content.querySelector(nth_child(5)))).toBe(false);
|
expect(u.hasClass('chat-msg--followup', view.querySelector(nth_child(5)))).toBe(false);
|
||||||
expect(view.content.querySelector(`${nth_child(5)} .chat-msg__text`).textContent).toBe(
|
expect(view.querySelector(`${nth_child(5)} .chat-msg__text`).textContent).toBe(
|
||||||
"A delayed message, sent 5 minutes since we started");
|
"A delayed message, sent 5 minutes since we started");
|
||||||
expect(u.hasClass('chat-msg--followup', view.content.querySelector(nth_child(6)))).toBe(true);
|
expect(u.hasClass('chat-msg--followup', view.querySelector(nth_child(6)))).toBe(true);
|
||||||
expect(view.content.querySelector(`${nth_child(6)} .chat-msg__text`).textContent).toBe(
|
expect(view.querySelector(`${nth_child(6)} .chat-msg__text`).textContent).toBe(
|
||||||
"Another message 14 minutes since we started");
|
"Another message 14 minutes since we started");
|
||||||
expect(u.hasClass('chat-msg--followup', view.content.querySelector(nth_child(7)))).toBe(true);
|
expect(u.hasClass('chat-msg--followup', view.querySelector(nth_child(7)))).toBe(true);
|
||||||
expect(view.content.querySelector(`${nth_child(7)} .chat-msg__text`).textContent).toBe(
|
expect(view.querySelector(`${nth_child(7)} .chat-msg__text`).textContent).toBe(
|
||||||
"Another message 1 minute and 1 second since the previous one");
|
"Another message 1 minute and 1 second since the previous one");
|
||||||
expect(u.hasClass('chat-msg--followup', view.content.querySelector(nth_child(8)))).toBe(false);
|
expect(u.hasClass('chat-msg--followup', view.querySelector(nth_child(8)))).toBe(false);
|
||||||
expect(view.content.querySelector(`${nth_child(8)} .chat-msg__text`).textContent).toBe(
|
expect(view.querySelector(`${nth_child(8)} .chat-msg__text`).textContent).toBe(
|
||||||
"Another message within 10 minutes, but from a different person");
|
"Another message within 10 minutes, but from a different person");
|
||||||
|
|
||||||
jasmine.clock().uninstall();
|
jasmine.clock().uninstall();
|
||||||
@ -1000,11 +1000,11 @@ describe("A Chat Message", function () {
|
|||||||
expect(msg_obj.get('sender')).toEqual('them');
|
expect(msg_obj.get('sender')).toEqual('them');
|
||||||
expect(msg_obj.get('is_delayed')).toEqual(false);
|
expect(msg_obj.get('is_delayed')).toEqual(false);
|
||||||
// Now check that the message appears inside the chatbox in the DOM
|
// Now check that the message appears inside the chatbox in the DOM
|
||||||
const mel = await u.waitUntil(() => view.content.querySelector('.chat-msg .chat-msg__text'));
|
const mel = await u.waitUntil(() => view.querySelector('.chat-msg .chat-msg__text'));
|
||||||
expect(mel.textContent).toEqual(message);
|
expect(mel.textContent).toEqual(message);
|
||||||
expect(view.content.querySelector('.chat-msg__time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy();
|
expect(view.querySelector('.chat-msg__time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy();
|
||||||
await u.waitUntil(() => chatbox.vcard.get('fullname') === mock.cur_names[0]);
|
await u.waitUntil(() => chatbox.vcard.get('fullname') === mock.cur_names[0]);
|
||||||
expect(view.content.querySelector('span.chat-msg__author').textContent.trim()).toBe('Mercutio');
|
expect(view.querySelector('span.chat-msg__author').textContent.trim()).toBe('Mercutio');
|
||||||
done();
|
done();
|
||||||
}));
|
}));
|
||||||
|
|
||||||
@ -1030,7 +1030,7 @@ describe("A Chat Message", function () {
|
|||||||
expect(view.model.messages.length).toEqual(1);
|
expect(view.model.messages.length).toEqual(1);
|
||||||
const msg_obj = view.model.messages.at(0);
|
const msg_obj = view.model.messages.at(0);
|
||||||
expect(msg_obj.get('message')).toEqual(message.trim());
|
expect(msg_obj.get('message')).toEqual(message.trim());
|
||||||
const mel = await u.waitUntil(() => view.content.querySelector('.chat-msg .chat-msg__text'));
|
const mel = await u.waitUntil(() => view.querySelector('.chat-msg .chat-msg__text'));
|
||||||
expect(mel.textContent).toEqual(message.trim());
|
expect(mel.textContent).toEqual(message.trim());
|
||||||
done();
|
done();
|
||||||
}));
|
}));
|
||||||
@ -1138,9 +1138,9 @@ describe("A Chat Message", function () {
|
|||||||
|
|
||||||
await u.waitUntil(() => view.querySelector('.chat-msg__author').textContent.trim() === 'Mercutio');
|
await u.waitUntil(() => view.querySelector('.chat-msg__author').textContent.trim() === 'Mercutio');
|
||||||
// Now check that the message appears inside the chatbox in the DOM
|
// Now check that the message appears inside the chatbox in the DOM
|
||||||
expect(view.content.querySelector('.chat-msg .chat-msg__text').textContent).toEqual(message);
|
expect(view.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.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('Mercutio');
|
expect(view.querySelector('span.chat-msg__author').textContent.trim()).toBe('Mercutio');
|
||||||
done();
|
done();
|
||||||
}));
|
}));
|
||||||
});
|
});
|
||||||
@ -1174,7 +1174,7 @@ describe("A Chat Message", function () {
|
|||||||
const view = _converse.api.chatviews.get(sender_jid);
|
const view = _converse.api.chatviews.get(sender_jid);
|
||||||
const message = await view.model.sendMessage(msg_text);
|
const message = await view.model.sendMessage(msg_text);
|
||||||
await u.waitUntil(() => view.querySelectorAll('.chat-msg').length);
|
await u.waitUntil(() => view.querySelectorAll('.chat-msg').length);
|
||||||
let msg_txt = sizzle('.chat-msg:last .chat-msg__text', view.content).pop().textContent;
|
let msg_txt = sizzle('.chat-msg:last .chat-msg__text', view).pop().textContent;
|
||||||
expect(msg_txt).toEqual(msg_text);
|
expect(msg_txt).toEqual(msg_text);
|
||||||
|
|
||||||
// We send another message, for which an error will
|
// We send another message, for which an error will
|
||||||
@ -1182,8 +1182,8 @@ describe("A Chat Message", function () {
|
|||||||
// after the relevant message.
|
// after the relevant message.
|
||||||
msg_text = 'This message will be sent, and also receive an error';
|
msg_text = 'This message will be sent, and also receive an error';
|
||||||
const second_message = await view.model.sendMessage(msg_text);
|
const second_message = await view.model.sendMessage(msg_text);
|
||||||
await u.waitUntil(() => sizzle('.chat-msg .chat-msg__text', view.content).length === 2, 1000);
|
await u.waitUntil(() => sizzle('.chat-msg .chat-msg__text', view).length === 2, 1000);
|
||||||
msg_txt = sizzle('.chat-msg:last .chat-msg__text', view.content).pop().textContent;
|
msg_txt = sizzle('.chat-msg:last .chat-msg__text', view).pop().textContent;
|
||||||
expect(msg_txt).toEqual(msg_text);
|
expect(msg_txt).toEqual(msg_text);
|
||||||
|
|
||||||
/* <message xmlns="jabber:client"
|
/* <message xmlns="jabber:client"
|
||||||
@ -1208,7 +1208,7 @@ describe("A Chat Message", function () {
|
|||||||
.c('text', { 'xmlns': "urn:ietf:params:xml:ns:xmpp-stanzas" })
|
.c('text', { 'xmlns': "urn:ietf:params:xml:ns:xmpp-stanzas" })
|
||||||
.t('Server-to-server connection failed: Connecting failed: connection timeout');
|
.t('Server-to-server connection failed: Connecting failed: connection timeout');
|
||||||
_converse.connection._dataRecv(mock.createRequest(stanza));
|
_converse.connection._dataRecv(mock.createRequest(stanza));
|
||||||
await u.waitUntil(() => view.content.querySelector('.chat-msg__error').textContent.trim() === error_txt);
|
await u.waitUntil(() => view.querySelector('.chat-msg__error').textContent.trim() === error_txt);
|
||||||
|
|
||||||
const other_error_txt = 'Server-to-server connection failed: Connecting failed: connection timeout';
|
const other_error_txt = 'Server-to-server connection failed: Connecting failed: connection timeout';
|
||||||
stanza = $msg({
|
stanza = $msg({
|
||||||
@ -1223,7 +1223,7 @@ describe("A Chat Message", function () {
|
|||||||
.t(other_error_txt);
|
.t(other_error_txt);
|
||||||
_converse.connection._dataRecv(mock.createRequest(stanza));
|
_converse.connection._dataRecv(mock.createRequest(stanza));
|
||||||
await u.waitUntil(() =>
|
await u.waitUntil(() =>
|
||||||
view.content.querySelector('converse-chat-message:last-child .chat-msg__error').textContent.trim() === other_error_txt);
|
view.querySelector('converse-chat-message:last-child .chat-msg__error').textContent.trim() === other_error_txt);
|
||||||
|
|
||||||
// We don't render duplicates
|
// We don't render duplicates
|
||||||
stanza = $msg({
|
stanza = $msg({
|
||||||
@ -1237,11 +1237,11 @@ describe("A Chat Message", function () {
|
|||||||
.c('text', { 'xmlns': "urn:ietf:params:xml:ns:xmpp-stanzas" })
|
.c('text', { 'xmlns': "urn:ietf:params:xml:ns:xmpp-stanzas" })
|
||||||
.t('Server-to-server connection failed: Connecting failed: connection timeout');
|
.t('Server-to-server connection failed: Connecting failed: connection timeout');
|
||||||
_converse.connection._dataRecv(mock.createRequest(stanza));
|
_converse.connection._dataRecv(mock.createRequest(stanza));
|
||||||
expect(view.content.querySelectorAll('.chat-msg__error').length).toEqual(2);
|
expect(view.querySelectorAll('.chat-msg__error').length).toEqual(2);
|
||||||
|
|
||||||
msg_text = 'This message will be sent, and also receive an error';
|
msg_text = 'This message will be sent, and also receive an error';
|
||||||
const third_message = await view.model.sendMessage(msg_text);
|
const third_message = await view.model.sendMessage(msg_text);
|
||||||
await u.waitUntil(() => sizzle('converse-chat-message:last-child .chat-msg__text', view.content).pop()?.textContent === msg_text);
|
await u.waitUntil(() => sizzle('converse-chat-message:last-child .chat-msg__text', view).pop()?.textContent === msg_text);
|
||||||
|
|
||||||
// A different error message will however render
|
// A different error message will however render
|
||||||
stanza = $msg({
|
stanza = $msg({
|
||||||
@ -1302,7 +1302,7 @@ describe("A Chat Message", function () {
|
|||||||
const msg_text = 'This message will show!';
|
const msg_text = 'This message will show!';
|
||||||
await view.model.sendMessage(msg_text);
|
await view.model.sendMessage(msg_text);
|
||||||
await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length);
|
await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length);
|
||||||
expect(view.content.querySelectorAll('.chat-error').length).toEqual(0);
|
expect(view.querySelectorAll('.chat-error').length).toEqual(0);
|
||||||
done();
|
done();
|
||||||
}));
|
}));
|
||||||
});
|
});
|
||||||
@ -1317,7 +1317,7 @@ describe("A Chat Message", function () {
|
|||||||
const view = _converse.api.chatviews.get(sender_jid);
|
const view = _converse.api.chatviews.get(sender_jid);
|
||||||
// Create enough messages so that there's a scrollbar.
|
// Create enough messages so that there's a scrollbar.
|
||||||
const promises = [];
|
const promises = [];
|
||||||
view.content.scrollTop = 0;
|
view.querySelector('.chat-content').scrollTop = 0;
|
||||||
view.model.set('scrolled', true);
|
view.model.set('scrolled', true);
|
||||||
|
|
||||||
for (let i=0; i<20; i++) {
|
for (let i=0; i<20; i++) {
|
||||||
@ -1336,7 +1336,7 @@ describe("A Chat Message", function () {
|
|||||||
expect(u.isVisible(indicator_el)).toBeTruthy();
|
expect(u.isVisible(indicator_el)).toBeTruthy();
|
||||||
|
|
||||||
expect(view.model.get('scrolled')).toBe(true);
|
expect(view.model.get('scrolled')).toBe(true);
|
||||||
expect(view.content.scrollTop).toBe(0);
|
expect(view.querySelector('.chat-content').scrollTop).toBe(0);
|
||||||
indicator_el.click();
|
indicator_el.click();
|
||||||
expect(u.isVisible(indicator_el)).toBeFalsy();
|
expect(u.isVisible(indicator_el)).toBeFalsy();
|
||||||
expect(view.model.get('scrolled')).toBe(false);
|
expect(view.model.get('scrolled')).toBe(false);
|
||||||
|
42
spec/muc.js
42
spec/muc.js
@ -927,7 +927,7 @@ describe("Groupchats", function () {
|
|||||||
|
|
||||||
const num_info_msgs = await u.waitUntil(() => view.querySelectorAll('.chat-content .chat-info').length);
|
const num_info_msgs = await u.waitUntil(() => view.querySelectorAll('.chat-content .chat-info').length);
|
||||||
expect(num_info_msgs).toBe(1);
|
expect(num_info_msgs).toBe(1);
|
||||||
expect(sizzle('div.chat-info', view.content).pop().textContent.trim()).toBe("This groupchat is not anonymous");
|
expect(sizzle('div.chat-info', view).pop().textContent.trim()).toBe("This groupchat is not anonymous");
|
||||||
|
|
||||||
const csntext = await u.waitUntil(() => view.querySelector('.chat-content__notifications').textContent);
|
const csntext = await u.waitUntil(() => view.querySelector('.chat-content__notifications').textContent);
|
||||||
expect(csntext.trim()).toEqual("some1 has entered the groupchat");
|
expect(csntext.trim()).toEqual("some1 has entered the groupchat");
|
||||||
@ -1408,7 +1408,7 @@ describe("Groupchats", function () {
|
|||||||
}).c('body').t('Some message').tree();
|
}).c('body').t('Some message').tree();
|
||||||
|
|
||||||
await view.model.handleMessageStanza(msg);
|
await view.model.handleMessageStanza(msg);
|
||||||
await u.waitUntil(() => sizzle('.chat-msg:last .chat-msg__text', view.content).pop());
|
await u.waitUntil(() => sizzle('.chat-msg:last .chat-msg__text', view).pop());
|
||||||
|
|
||||||
let stanza = u.toStanza(
|
let stanza = u.toStanza(
|
||||||
`<presence xmlns="jabber:client" to="romeo@montague.lit/orchard" type="unavailable" from="conversations@conference.siacs.eu/Guus">
|
`<presence xmlns="jabber:client" to="romeo@montague.lit/orchard" type="unavailable" from="conversations@conference.siacs.eu/Guus">
|
||||||
@ -2089,8 +2089,8 @@ describe("Groupchats", function () {
|
|||||||
}).c('body').t(text);
|
}).c('body').t(text);
|
||||||
await view.model.handleMessageStanza(message.nodeTree);
|
await view.model.handleMessageStanza(message.nodeTree);
|
||||||
await u.waitUntil(() => view.querySelectorAll('.chat-msg').length);
|
await u.waitUntil(() => view.querySelectorAll('.chat-msg').length);
|
||||||
expect(view.content.querySelectorAll('.chat-msg').length).toBe(1);
|
expect(view.querySelectorAll('.chat-msg').length).toBe(1);
|
||||||
expect(view.content.querySelector('.chat-msg__text').textContent.trim()).toBe(text);
|
expect(view.querySelector('.chat-msg__text').textContent.trim()).toBe(text);
|
||||||
expect(_converse.api.trigger).toHaveBeenCalledWith('message', jasmine.any(Object));
|
expect(_converse.api.trigger).toHaveBeenCalledWith('message', jasmine.any(Object));
|
||||||
done();
|
done();
|
||||||
}));
|
}));
|
||||||
@ -2111,7 +2111,7 @@ describe("Groupchats", function () {
|
|||||||
await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length);
|
await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length);
|
||||||
|
|
||||||
expect(_converse.api.trigger).toHaveBeenCalledWith('messageSend', jasmine.any(_converse.Message));
|
expect(_converse.api.trigger).toHaveBeenCalledWith('messageSend', jasmine.any(_converse.Message));
|
||||||
expect(view.content.querySelectorAll('.chat-msg').length).toBe(1);
|
expect(view.querySelectorAll('.chat-msg').length).toBe(1);
|
||||||
|
|
||||||
// Let's check that if we receive the same message again, it's
|
// Let's check that if we receive the same message again, it's
|
||||||
// not shown.
|
// not shown.
|
||||||
@ -2127,7 +2127,7 @@ describe("Groupchats", function () {
|
|||||||
<origin-id xmlns="urn:xmpp:sid:0" id="${view.model.messages.at(0).get('origin_id')}"/>
|
<origin-id xmlns="urn:xmpp:sid:0" id="${view.model.messages.at(0).get('origin_id')}"/>
|
||||||
</message>`);
|
</message>`);
|
||||||
await view.model.handleMessageStanza(stanza);
|
await view.model.handleMessageStanza(stanza);
|
||||||
expect(view.content.querySelectorAll('.chat-msg').length).toBe(1);
|
expect(view.querySelectorAll('.chat-msg').length).toBe(1);
|
||||||
expect(sizzle('.chat-msg__text:last').pop().textContent.trim()).toBe(text);
|
expect(sizzle('.chat-msg__text:last').pop().textContent.trim()).toBe(text);
|
||||||
expect(view.model.messages.length).toBe(1);
|
expect(view.model.messages.length).toBe(1);
|
||||||
// We don't emit an event if it's our own message
|
// We don't emit an event if it's our own message
|
||||||
@ -2158,7 +2158,8 @@ describe("Groupchats", function () {
|
|||||||
await Promise.all(promises);
|
await Promise.all(promises);
|
||||||
// Give enough time for `markScrolled` to have been called
|
// Give enough time for `markScrolled` to have been called
|
||||||
setTimeout(async () => {
|
setTimeout(async () => {
|
||||||
view.content.scrollTop = 0;
|
const content = view.querySelector('.chat-content');
|
||||||
|
content.scrollTop = 0;
|
||||||
await view.model.handleMessageStanza(
|
await view.model.handleMessageStanza(
|
||||||
$msg({
|
$msg({
|
||||||
from: 'lounge@montague.lit/someone',
|
from: 'lounge@montague.lit/someone',
|
||||||
@ -2168,9 +2169,9 @@ describe("Groupchats", function () {
|
|||||||
}).c('body').t(message).tree());
|
}).c('body').t(message).tree());
|
||||||
await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length === 21);
|
await u.waitUntil(() => view.querySelectorAll('.chat-msg__text').length === 21);
|
||||||
// Now check that the message appears inside the chatbox in the DOM
|
// Now check that the message appears inside the chatbox in the DOM
|
||||||
const msg_txt = sizzle('.chat-msg:last .chat-msg__text', view.content).pop().textContent;
|
const msg_txt = sizzle('.chat-msg:last .chat-msg__text', content).pop().textContent;
|
||||||
expect(msg_txt).toEqual(message);
|
expect(msg_txt).toEqual(message);
|
||||||
expect(view.content.scrollTop).toBe(0);
|
expect(content.scrollTop).toBe(0);
|
||||||
done();
|
done();
|
||||||
}, 500);
|
}, 500);
|
||||||
}));
|
}));
|
||||||
@ -2346,8 +2347,8 @@ describe("Groupchats", function () {
|
|||||||
|
|
||||||
_converse.connection._dataRecv(mock.createRequest(presence));
|
_converse.connection._dataRecv(mock.createRequest(presence));
|
||||||
expect(view.model.session.get('connection_status')).toBe(converse.ROOMSTATUS.ENTERED);
|
expect(view.model.session.get('connection_status')).toBe(converse.ROOMSTATUS.ENTERED);
|
||||||
expect(view.content.querySelectorAll('div.chat-info').length).toBe(1);
|
expect(view.querySelectorAll('div.chat-info').length).toBe(1);
|
||||||
expect(sizzle('div.chat-info', view.content)[0].textContent.trim()).toBe(
|
expect(sizzle('div.chat-info', view)[0].textContent.trim()).toBe(
|
||||||
__(_converse.muc.new_nickname_messages["303"], "newnick")
|
__(_converse.muc.new_nickname_messages["303"], "newnick")
|
||||||
);
|
);
|
||||||
occupants = view.querySelector('.occupant-list');
|
occupants = view.querySelector('.occupant-list');
|
||||||
@ -2964,7 +2965,7 @@ describe("Groupchats", function () {
|
|||||||
bottom_panel.onKeyDown(enter);
|
bottom_panel.onKeyDown(enter);
|
||||||
|
|
||||||
await u.waitUntil(() => sizzle('converse-chat-help .chat-info', view).length);
|
await u.waitUntil(() => sizzle('converse-chat-help .chat-info', view).length);
|
||||||
const chat_help_el = view.querySelector('converse-chat-help');
|
let chat_help_el = view.querySelector('converse-chat-help');
|
||||||
let info_messages = sizzle('.chat-info', chat_help_el);
|
let info_messages = sizzle('.chat-info', chat_help_el);
|
||||||
expect(info_messages.length).toBe(19);
|
expect(info_messages.length).toBe(19);
|
||||||
expect(info_messages.pop().textContent.trim()).toBe('/voice: Allow muted user to post messages');
|
expect(info_messages.pop().textContent.trim()).toBe('/voice: Allow muted user to post messages');
|
||||||
@ -2991,11 +2992,12 @@ describe("Groupchats", function () {
|
|||||||
occupant.set('affiliation', 'admin');
|
occupant.set('affiliation', 'admin');
|
||||||
|
|
||||||
view.querySelector('.close-chat-help').click();
|
view.querySelector('.close-chat-help').click();
|
||||||
await u.waitUntil(() => chat_help_el.hidden);
|
expect(view.model.get('show_help_messages')).toBe(false);
|
||||||
|
await u.waitUntil(() => view.querySelector('converse-chat-help') === null);
|
||||||
|
|
||||||
textarea.value = '/help';
|
textarea.value = '/help';
|
||||||
bottom_panel.onKeyDown(enter);
|
bottom_panel.onKeyDown(enter);
|
||||||
await u.waitUntil(() => !chat_help_el.hidden);
|
chat_help_el = await u.waitUntil(() => view.querySelector('converse-chat-help'));
|
||||||
info_messages = sizzle('.chat-info', chat_help_el);
|
info_messages = sizzle('.chat-info', chat_help_el);
|
||||||
expect(info_messages.length).toBe(18);
|
expect(info_messages.length).toBe(18);
|
||||||
let commands = info_messages.map(m => m.textContent.replace(/:.*$/, ''));
|
let commands = info_messages.map(m => m.textContent.replace(/:.*$/, ''));
|
||||||
@ -3006,18 +3008,18 @@ describe("Groupchats", function () {
|
|||||||
]);
|
]);
|
||||||
occupant.set('affiliation', 'member');
|
occupant.set('affiliation', 'member');
|
||||||
view.querySelector('.close-chat-help').click();
|
view.querySelector('.close-chat-help').click();
|
||||||
await u.waitUntil(() => chat_help_el.hidden);
|
await u.waitUntil(() => view.querySelector('converse-chat-help') === null);
|
||||||
|
|
||||||
textarea.value = '/help';
|
textarea.value = '/help';
|
||||||
bottom_panel.onKeyDown(enter);
|
bottom_panel.onKeyDown(enter);
|
||||||
await u.waitUntil(() => !chat_help_el.hidden);
|
chat_help_el = await u.waitUntil(() => view.querySelector('converse-chat-help'));
|
||||||
info_messages = sizzle('.chat-info', chat_help_el);
|
info_messages = sizzle('.chat-info', chat_help_el);
|
||||||
expect(info_messages.length).toBe(9);
|
expect(info_messages.length).toBe(9);
|
||||||
commands = info_messages.map(m => m.textContent.replace(/:.*$/, ''));
|
commands = info_messages.map(m => m.textContent.replace(/:.*$/, ''));
|
||||||
expect(commands).toEqual(["/clear", "/help", "/kick", "/me", "/modtools", "/mute", "/nick", "/register", "/voice"]);
|
expect(commands).toEqual(["/clear", "/help", "/kick", "/me", "/modtools", "/mute", "/nick", "/register", "/voice"]);
|
||||||
|
|
||||||
view.querySelector('.close-chat-help').click();
|
view.querySelector('.close-chat-help').click();
|
||||||
await u.waitUntil(() => chat_help_el.hidden);
|
await u.waitUntil(() => view.querySelector('converse-chat-help') === null);
|
||||||
expect(view.model.get('show_help_messages')).toBe(false);
|
expect(view.model.get('show_help_messages')).toBe(false);
|
||||||
|
|
||||||
occupant.set('role', 'participant');
|
occupant.set('role', 'participant');
|
||||||
@ -3026,7 +3028,7 @@ describe("Groupchats", function () {
|
|||||||
textarea.value = '/help';
|
textarea.value = '/help';
|
||||||
bottom_panel.onKeyDown(enter);
|
bottom_panel.onKeyDown(enter);
|
||||||
await u.waitUntil(() => view.model.get('show_help_messages'));
|
await u.waitUntil(() => view.model.get('show_help_messages'));
|
||||||
await u.waitUntil(() => !chat_help_el.hidden);
|
chat_help_el = await u.waitUntil(() => view.querySelector('converse-chat-help'));
|
||||||
info_messages = sizzle('.chat-info', chat_help_el);
|
info_messages = sizzle('.chat-info', chat_help_el);
|
||||||
expect(info_messages.length).toBe(5);
|
expect(info_messages.length).toBe(5);
|
||||||
commands = info_messages.map(m => m.textContent.replace(/:.*$/, ''));
|
commands = info_messages.map(m => m.textContent.replace(/:.*$/, ''));
|
||||||
@ -3036,11 +3038,11 @@ describe("Groupchats", function () {
|
|||||||
// Note: we're making a shortcut here, this value should never be set manually
|
// Note: we're making a shortcut here, this value should never be set manually
|
||||||
view.model.config.set('changesubject', true);
|
view.model.config.set('changesubject', true);
|
||||||
view.querySelector('.close-chat-help').click();
|
view.querySelector('.close-chat-help').click();
|
||||||
await u.waitUntil(() => chat_help_el.hidden);
|
await u.waitUntil(() => view.querySelector('converse-chat-help') === null);
|
||||||
|
|
||||||
textarea.value = '/help';
|
textarea.value = '/help';
|
||||||
bottom_panel.onKeyDown(enter);
|
bottom_panel.onKeyDown(enter);
|
||||||
await u.waitUntil(() => !chat_help_el.hidden, 1000);
|
chat_help_el = await u.waitUntil(() => view.querySelector('converse-chat-help'));
|
||||||
info_messages = sizzle('.chat-info', chat_help_el);
|
info_messages = sizzle('.chat-info', chat_help_el);
|
||||||
expect(info_messages.length).toBe(7);
|
expect(info_messages.length).toBe(7);
|
||||||
commands = info_messages.map(m => m.textContent.replace(/:.*$/, ''));
|
commands = info_messages.map(m => m.textContent.replace(/:.*$/, ''));
|
||||||
|
@ -73,7 +73,7 @@ const RosterContacts = Collection.extend({
|
|||||||
if (u.isErrorObject(result)) {
|
if (u.isErrorObject(result)) {
|
||||||
log.error(result);
|
log.error(result);
|
||||||
// Force a full roster refresh
|
// Force a full roster refresh
|
||||||
_converse.session.set('roster_cached', false)
|
_converse.session.save('roster_cached', false)
|
||||||
this.data.save('version', undefined);
|
this.data.save('version', undefined);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -19,10 +19,10 @@ export default class ChatBottomPanel extends ElementView {
|
|||||||
super.connectedCallback();
|
super.connectedCallback();
|
||||||
this.model = _converse.chatboxes.get(this.getAttribute('jid'));
|
this.model = _converse.chatboxes.get(this.getAttribute('jid'));
|
||||||
this.listenTo(this.model, 'change:composing_spoiler', this.renderMessageForm);
|
this.listenTo(this.model, 'change:composing_spoiler', this.renderMessageForm);
|
||||||
|
|
||||||
await this.model.initialized;
|
await this.model.initialized;
|
||||||
this.listenTo(this.model.messages, 'change:correcting', this.onMessageCorrecting);
|
this.listenTo(this.model.messages, 'change:correcting', this.onMessageCorrecting);
|
||||||
this.render();
|
this.render();
|
||||||
|
api.listen.on('chatBoxScrolledDown', () => this.hideNewMessagesIndicator());
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
@ -79,6 +79,10 @@ export default class ChatBottomPanel extends ElementView {
|
|||||||
this.renderToolbar();
|
this.renderToolbar();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
hideNewMessagesIndicator () {
|
||||||
|
this.querySelector('.new-msgs-indicator')?.classList.add('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
onMessageCorrecting (message) {
|
onMessageCorrecting (message) {
|
||||||
if (message.get('correcting')) {
|
if (message.get('correcting')) {
|
||||||
this.insertIntoTextArea(u.prefixMentions(message), true, true);
|
this.insertIntoTextArea(u.prefixMentions(message), true, true);
|
||||||
|
@ -1,10 +1,10 @@
|
|||||||
import 'plugins/chatview/heading.js';
|
import 'plugins/chatview/heading.js';
|
||||||
import 'plugins/chatview/bottom_panel.js';
|
import 'plugins/chatview/bottom_panel.js';
|
||||||
|
import { html, render } from 'lit-html';
|
||||||
import BaseChatView from 'shared/chat/baseview.js';
|
import BaseChatView from 'shared/chat/baseview.js';
|
||||||
import tpl_chat from './templates/chat.js';
|
import tpl_chat from './templates/chat.js';
|
||||||
import { __ } from 'i18n';
|
import { __ } from 'i18n';
|
||||||
import { _converse, api, converse } from '@converse/headless/core';
|
import { _converse, api, converse } from '@converse/headless/core';
|
||||||
import { render } from 'lit-html';
|
|
||||||
|
|
||||||
const u = converse.env.utils;
|
const u = converse.env.utils;
|
||||||
const { dayjs } = converse.env;
|
const { dayjs } = converse.env;
|
||||||
@ -58,11 +58,25 @@ export default class ChatView extends BaseChatView {
|
|||||||
this.model.toJSON(), { 'markScrolled': ev => this.markScrolled(ev) })
|
this.model.toJSON(), { 'markScrolled': ev => this.markScrolled(ev) })
|
||||||
);
|
);
|
||||||
render(result, this);
|
render(result, this);
|
||||||
this.content = this.querySelector('.chat-content');
|
|
||||||
this.help_container = this.querySelector('.chat-content__help');
|
this.help_container = this.querySelector('.chat-content__help');
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
renderHelpMessages () {
|
||||||
|
render(
|
||||||
|
html`
|
||||||
|
<converse-chat-help
|
||||||
|
.model=${this.model}
|
||||||
|
.messages=${this.getHelpMessages()}
|
||||||
|
?hidden=${!this.model.get('show_help_messages')}
|
||||||
|
type="info"
|
||||||
|
chat_type="${this.model.get('type')}"
|
||||||
|
></converse-chat-help>
|
||||||
|
`,
|
||||||
|
this.help_container
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
getHelpMessages () { // eslint-disable-line class-methods-use-this
|
getHelpMessages () { // eslint-disable-line class-methods-use-this
|
||||||
return [
|
return [
|
||||||
`<strong>/clear</strong>: ${__('Remove messages')}`,
|
`<strong>/clear</strong>: ${__('Remove messages')}`,
|
||||||
|
@ -52,7 +52,6 @@ class HeadlinesView extends BaseChatView {
|
|||||||
})
|
})
|
||||||
);
|
);
|
||||||
render(result, this);
|
render(result, this);
|
||||||
this.content = this.querySelector('.chat-content');
|
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -190,10 +190,11 @@ function onMaximized (view) {
|
|||||||
*/
|
*/
|
||||||
function onMinimized (view) {
|
function onMinimized (view) {
|
||||||
// save the scroll position to restore it on maximize
|
// save the scroll position to restore it on maximize
|
||||||
|
const content = view.querySelector('.chat-content__messages');
|
||||||
if (view.model.collection && view.model.collection.browserStorage) {
|
if (view.model.collection && view.model.collection.browserStorage) {
|
||||||
view.model.save({ 'scroll': view.content.scrollTop });
|
view.model.save({ 'scroll': content.scrollTop });
|
||||||
} else {
|
} else {
|
||||||
view.model.set({ 'scroll': view.content.scrollTop });
|
view.model.set({ 'scroll': content.scrollTop });
|
||||||
}
|
}
|
||||||
view.model.setChatState(_converse.INACTIVE);
|
view.model.setChatState(_converse.INACTIVE);
|
||||||
/**
|
/**
|
||||||
|
129
src/plugins/muc-views/chatarea.js
Normal file
129
src/plugins/muc-views/chatarea.js
Normal file
@ -0,0 +1,129 @@
|
|||||||
|
import debounce from 'lodash-es/debounce';
|
||||||
|
import tpl_muc_chatarea from './templates/muc-chatarea.js';
|
||||||
|
import { CustomElement } from 'components/element.js';
|
||||||
|
import { __ } from 'i18n';
|
||||||
|
import { _converse, api, converse } from '@converse/headless/core';
|
||||||
|
|
||||||
|
|
||||||
|
const { u } = converse.env;
|
||||||
|
|
||||||
|
|
||||||
|
export default class MUCChatArea extends CustomElement {
|
||||||
|
|
||||||
|
static get properties () {
|
||||||
|
return {
|
||||||
|
jid: { type: String },
|
||||||
|
show_help_messages: { type: Boolean },
|
||||||
|
type: { type: String },
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback () {
|
||||||
|
super.connectedCallback();
|
||||||
|
this.model = _converse.chatboxes.get(this.jid);
|
||||||
|
this.markScrolled = debounce(this._markScrolled, 100);
|
||||||
|
this.listenTo(this.model, 'change:show_help_messages', () => this.requestUpdate());
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
return tpl_muc_chatarea({
|
||||||
|
'help_messages': this.getHelpMessages(),
|
||||||
|
'jid': this.jid,
|
||||||
|
'model': this.model,
|
||||||
|
'occupants': this.model.occupants,
|
||||||
|
'show_help_messages': this.model.get('show_help_messages'),
|
||||||
|
'show_send_button': _converse.show_send_button,
|
||||||
|
'show_sidebar': this.shouldShowSidebar(),
|
||||||
|
'type': this.type,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
shouldShowSidebar () {
|
||||||
|
return (
|
||||||
|
!this.model.get('hidden_occupants') &&
|
||||||
|
this.model.session.get('connection_status') === converse.ROOMSTATUS.ENTERED
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
getHelpMessages () {
|
||||||
|
const setting = api.settings.get('muc_disable_slash_commands');
|
||||||
|
const disabled_commands = Array.isArray(setting) ? setting : [];
|
||||||
|
return [
|
||||||
|
`<strong>/admin</strong>: ${__("Change user's affiliation to admin")}`,
|
||||||
|
`<strong>/ban</strong>: ${__('Ban user by changing their affiliation to outcast')}`,
|
||||||
|
`<strong>/clear</strong>: ${__('Clear the chat area')}`,
|
||||||
|
`<strong>/close</strong>: ${__('Close this groupchat')}`,
|
||||||
|
`<strong>/deop</strong>: ${__('Change user role to participant')}`,
|
||||||
|
`<strong>/destroy</strong>: ${__('Remove this groupchat')}`,
|
||||||
|
`<strong>/help</strong>: ${__('Show this menu')}`,
|
||||||
|
`<strong>/kick</strong>: ${__('Kick user from groupchat')}`,
|
||||||
|
`<strong>/me</strong>: ${__('Write in 3rd person')}`,
|
||||||
|
`<strong>/member</strong>: ${__('Grant membership to a user')}`,
|
||||||
|
`<strong>/modtools</strong>: ${__('Opens up the moderator tools GUI')}`,
|
||||||
|
`<strong>/mute</strong>: ${__("Remove user's ability to post messages")}`,
|
||||||
|
`<strong>/nick</strong>: ${__('Change your nickname')}`,
|
||||||
|
`<strong>/op</strong>: ${__('Grant moderator role to user')}`,
|
||||||
|
`<strong>/owner</strong>: ${__('Grant ownership of this groupchat')}`,
|
||||||
|
`<strong>/register</strong>: ${__('Register your nickname')}`,
|
||||||
|
`<strong>/revoke</strong>: ${__("Revoke the user's current affiliation")}`,
|
||||||
|
`<strong>/subject</strong>: ${__('Set groupchat subject')}`,
|
||||||
|
`<strong>/topic</strong>: ${__('Set groupchat subject (alias for /subject)')}`,
|
||||||
|
`<strong>/voice</strong>: ${__('Allow muted user to post messages')}`
|
||||||
|
]
|
||||||
|
.filter(line => disabled_commands.every(c => !line.startsWith(c + '<', 9)))
|
||||||
|
.filter(line => this.model.getAllowedCommands().some(c => line.startsWith(c + '<', 9)));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Called when the chat content is scrolled up or down.
|
||||||
|
* We want to record when the user has scrolled away from
|
||||||
|
* the bottom, so that we don't automatically scroll away
|
||||||
|
* from what the user is reading when new messages are received.
|
||||||
|
*
|
||||||
|
* Don't call this method directly, instead, call `markScrolled`,
|
||||||
|
* which debounces this method by 100ms.
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
_markScrolled (ev) {
|
||||||
|
let scrolled = true;
|
||||||
|
let scrollTop = null;
|
||||||
|
const msgs_container = this.querySelector('.chat-content__messages');
|
||||||
|
const is_at_bottom =
|
||||||
|
msgs_container.scrollTop + msgs_container.clientHeight >= msgs_container.scrollHeight - 62; // sigh...
|
||||||
|
|
||||||
|
if (is_at_bottom) {
|
||||||
|
scrolled = false;
|
||||||
|
this.onScrolledDown();
|
||||||
|
} else if (msgs_container.scrollTop === 0) {
|
||||||
|
/**
|
||||||
|
* Triggered once the chat's message area has been scrolled to the top
|
||||||
|
* @event _converse#chatBoxScrolledUp
|
||||||
|
* @property { _converse.ChatBoxView | _converse.ChatRoomView } view
|
||||||
|
* @example _converse.api.listen.on('chatBoxScrolledUp', obj => { ... });
|
||||||
|
*/
|
||||||
|
api.trigger('chatBoxScrolledUp', this);
|
||||||
|
} else {
|
||||||
|
scrollTop = ev.target.scrollTop;
|
||||||
|
}
|
||||||
|
u.safeSave(this.model, { scrolled, scrollTop });
|
||||||
|
}
|
||||||
|
|
||||||
|
onScrolledDown () {
|
||||||
|
if (!this.model.isHidden()) {
|
||||||
|
this.model.clearUnreadMsgCounter();
|
||||||
|
// Clear location hash if set to one of the messages in our history
|
||||||
|
const hash = window.location.hash;
|
||||||
|
hash && this.model.messages.get(hash.slice(1)) && _converse.router.history.navigate();
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* Triggered once the chat's message area has been scrolled down to the bottom.
|
||||||
|
* @event _converse#chatBoxScrolledDown
|
||||||
|
* @type {object}
|
||||||
|
* @property { _converse.ChatBox | _converse.ChatRoom } chatbox - The chat model
|
||||||
|
* @example _converse.api.listen.on('chatBoxScrolledDown', obj => { ... });
|
||||||
|
*/
|
||||||
|
api.trigger('chatBoxScrolledDown', { 'chatbox': this.model });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
api.elements.define('converse-muc-chatarea', MUCChatArea);
|
@ -63,7 +63,6 @@ export default class MUCView extends BaseChatView {
|
|||||||
await this.render();
|
await this.render();
|
||||||
|
|
||||||
// Need to be registered after render has been called.
|
// Need to be registered after render has been called.
|
||||||
this.listenTo(this.model, 'change:show_help_messages', this.renderHelpMessages);
|
|
||||||
this.listenTo(this.model.messages, 'add', this.onMessageAdded);
|
this.listenTo(this.model.messages, 'add', this.onMessageAdded);
|
||||||
this.listenTo(this.model.occupants, 'change:show', this.showJoinOrLeaveNotification);
|
this.listenTo(this.model.occupants, 'change:show', this.showJoinOrLeaveNotification);
|
||||||
this.listenTo(this.model.occupants, 'remove', this.onOccupantRemoved);
|
this.listenTo(this.model.occupants, 'remove', this.onOccupantRemoved);
|
||||||
@ -85,7 +84,8 @@ export default class MUCView extends BaseChatView {
|
|||||||
this.setAttribute('id', this.model.get('box_id'));
|
this.setAttribute('id', this.model.get('box_id'));
|
||||||
render(
|
render(
|
||||||
tpl_muc({
|
tpl_muc({
|
||||||
sidebar_hidden,
|
'chatview': this,
|
||||||
|
'conn_status': this.model.session.get('connection_status'),
|
||||||
'model': this.model,
|
'model': this.model,
|
||||||
'occupants': this.model.occupants,
|
'occupants': this.model.occupants,
|
||||||
'show_sidebar':
|
'show_sidebar':
|
||||||
@ -93,13 +93,13 @@ export default class MUCView extends BaseChatView {
|
|||||||
this.model.session.get('connection_status') === converse.ROOMSTATUS.ENTERED,
|
this.model.session.get('connection_status') === converse.ROOMSTATUS.ENTERED,
|
||||||
'markScrolled': ev => this.markScrolled(ev),
|
'markScrolled': ev => this.markScrolled(ev),
|
||||||
'muc_show_logs_before_join': api.settings.get('muc_show_logs_before_join'),
|
'muc_show_logs_before_join': api.settings.get('muc_show_logs_before_join'),
|
||||||
'show_send_button': _converse.show_send_button
|
'show_send_button': _converse.show_send_button,
|
||||||
|
sidebar_hidden,
|
||||||
}),
|
}),
|
||||||
this
|
this
|
||||||
);
|
);
|
||||||
|
|
||||||
this.notifications = this.querySelector('.chat-content__notifications');
|
this.notifications = this.querySelector('.chat-content__notifications');
|
||||||
this.content = this.querySelector('.chat-content');
|
|
||||||
this.help_container = this.querySelector('.chat-content__help');
|
this.help_container = this.querySelector('.chat-content__help');
|
||||||
|
|
||||||
if (
|
if (
|
||||||
@ -114,35 +114,6 @@ export default class MUCView extends BaseChatView {
|
|||||||
!this.model.get('hidden') && this.show();
|
!this.model.get('hidden') && this.show();
|
||||||
}
|
}
|
||||||
|
|
||||||
getHelpMessages () {
|
|
||||||
const setting = api.settings.get('muc_disable_slash_commands');
|
|
||||||
const disabled_commands = Array.isArray(setting) ? setting : [];
|
|
||||||
return [
|
|
||||||
`<strong>/admin</strong>: ${__("Change user's affiliation to admin")}`,
|
|
||||||
`<strong>/ban</strong>: ${__('Ban user by changing their affiliation to outcast')}`,
|
|
||||||
`<strong>/clear</strong>: ${__('Clear the chat area')}`,
|
|
||||||
`<strong>/close</strong>: ${__('Close this groupchat')}`,
|
|
||||||
`<strong>/deop</strong>: ${__('Change user role to participant')}`,
|
|
||||||
`<strong>/destroy</strong>: ${__('Remove this groupchat')}`,
|
|
||||||
`<strong>/help</strong>: ${__('Show this menu')}`,
|
|
||||||
`<strong>/kick</strong>: ${__('Kick user from groupchat')}`,
|
|
||||||
`<strong>/me</strong>: ${__('Write in 3rd person')}`,
|
|
||||||
`<strong>/member</strong>: ${__('Grant membership to a user')}`,
|
|
||||||
`<strong>/modtools</strong>: ${__('Opens up the moderator tools GUI')}`,
|
|
||||||
`<strong>/mute</strong>: ${__("Remove user's ability to post messages")}`,
|
|
||||||
`<strong>/nick</strong>: ${__('Change your nickname')}`,
|
|
||||||
`<strong>/op</strong>: ${__('Grant moderator role to user')}`,
|
|
||||||
`<strong>/owner</strong>: ${__('Grant ownership of this groupchat')}`,
|
|
||||||
`<strong>/register</strong>: ${__('Register your nickname')}`,
|
|
||||||
`<strong>/revoke</strong>: ${__("Revoke the user's current affiliation")}`,
|
|
||||||
`<strong>/subject</strong>: ${__('Set groupchat subject')}`,
|
|
||||||
`<strong>/topic</strong>: ${__('Set groupchat subject (alias for /subject)')}`,
|
|
||||||
`<strong>/voice</strong>: ${__('Allow muted user to post messages')}`
|
|
||||||
]
|
|
||||||
.filter(line => disabled_commands.every(c => !line.startsWith(c + '<', 9)))
|
|
||||||
.filter(line => this.model.getAllowedCommands().some(c => line.startsWith(c + '<', 9)));
|
|
||||||
}
|
|
||||||
|
|
||||||
onStartResizeOccupants (ev) {
|
onStartResizeOccupants (ev) {
|
||||||
this.resizing = true;
|
this.resizing = true;
|
||||||
this.addEventListener('mousemove', this.onMouseMove);
|
this.addEventListener('mousemove', this.onMouseMove);
|
||||||
@ -361,7 +332,7 @@ export default class MUCView extends BaseChatView {
|
|||||||
renderNicknameForm () {
|
renderNicknameForm () {
|
||||||
if (api.settings.get('muc_show_logs_before_join')) {
|
if (api.settings.get('muc_show_logs_before_join')) {
|
||||||
this.hideSpinner();
|
this.hideSpinner();
|
||||||
u.showElement(this.querySelector('.chat-area'));
|
u.showElement(this.querySelector('converse-muc-chatarea'));
|
||||||
} else {
|
} else {
|
||||||
const form = this.querySelector('.muc-nickname-form');
|
const form = this.querySelector('.muc-nickname-form');
|
||||||
const tpl_result = tpl_muc_nickname_form(this.model.toJSON());
|
const tpl_result = tpl_muc_nickname_form(this.model.toJSON());
|
||||||
@ -443,8 +414,7 @@ export default class MUCView extends BaseChatView {
|
|||||||
}
|
}
|
||||||
|
|
||||||
showDestroyedMessage () {
|
showDestroyedMessage () {
|
||||||
u.hideElement(this.querySelector('.chat-area'));
|
u.hideElement(this.querySelector('converse-muc-chatarea'));
|
||||||
u.hideElement(this.querySelector('.occupants'));
|
|
||||||
sizzle('.spinner', this).forEach(u.removeElement);
|
sizzle('.spinner', this).forEach(u.removeElement);
|
||||||
|
|
||||||
const reason = this.model.get('destroyed_reason');
|
const reason = this.model.get('destroyed_reason');
|
||||||
@ -472,8 +442,7 @@ export default class MUCView extends BaseChatView {
|
|||||||
if (!message) {
|
if (!message) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
u.hideElement(this.querySelector('.chat-area'));
|
u.hideElement(this.querySelector('converse-muc-chatarea'));
|
||||||
u.hideElement(this.querySelector('.occupants'));
|
|
||||||
sizzle('.spinner', this).forEach(u.removeElement);
|
sizzle('.spinner', this).forEach(u.removeElement);
|
||||||
|
|
||||||
const messages = [message];
|
const messages = [message];
|
||||||
@ -542,7 +511,7 @@ export default class MUCView extends BaseChatView {
|
|||||||
} else if (conn_status === converse.ROOMSTATUS.ENTERED) {
|
} else if (conn_status === converse.ROOMSTATUS.ENTERED) {
|
||||||
this.hideSpinner();
|
this.hideSpinner();
|
||||||
this.hideChatRoomContents();
|
this.hideChatRoomContents();
|
||||||
u.showElement(this.querySelector('.chat-area'));
|
u.showElement(this.querySelector('converse-muc-chatarea'));
|
||||||
this.querySelector('.occupants')?.setVisibility();
|
this.querySelector('.occupants')?.setVisibility();
|
||||||
this.scrollDown();
|
this.scrollDown();
|
||||||
this.maybeFocus();
|
this.maybeFocus();
|
||||||
|
27
src/plugins/muc-views/templates/muc-chatarea.js
Normal file
27
src/plugins/muc-views/templates/muc-chatarea.js
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import { html } from "lit-html";
|
||||||
|
import { _converse } from '@converse/headless/core';
|
||||||
|
|
||||||
|
export default (o) => html`
|
||||||
|
<div class="chat-area">
|
||||||
|
<div class="chat-content ${ o.show_send_button ? 'chat-content-sendbutton' : '' }" aria-live="polite">
|
||||||
|
<converse-chat-content
|
||||||
|
class="chat-content__messages"
|
||||||
|
jid="${o.jid}"
|
||||||
|
@scroll=${o.markScrolled}></converse-chat-content>
|
||||||
|
|
||||||
|
${o.show_help_messages ? html`<div class="chat-content__help">
|
||||||
|
<converse-chat-help
|
||||||
|
.model=${o.model}
|
||||||
|
.messages=${o.help_messages}
|
||||||
|
?hidden=${!o.show_help_messages}
|
||||||
|
type="info"
|
||||||
|
chat_type="${_converse.CHATROOMS_TYPE}"
|
||||||
|
></converse-chat-help></div>` : '' }
|
||||||
|
</div>
|
||||||
|
<converse-muc-bottom-panel jid="${o.jid}" class="bottom-panel"></converse-muc-bottom-panel>
|
||||||
|
</div>
|
||||||
|
<div class="disconnect-container hidden"></div>
|
||||||
|
<converse-muc-sidebar class="occupants col-md-3 col-4 ${o.show_sidebar ? '' : 'hidden' }"
|
||||||
|
.occupants=${o.occupants}
|
||||||
|
.chatroom=${o.model}></converse-muc-sidebar>
|
||||||
|
`;
|
@ -1,3 +1,4 @@
|
|||||||
|
import '../chatarea.js';
|
||||||
import '../bottom_panel.js';
|
import '../bottom_panel.js';
|
||||||
import '../heading.js';
|
import '../heading.js';
|
||||||
import '../sidebar.js';
|
import '../sidebar.js';
|
||||||
@ -8,22 +9,7 @@ export default (o) => html`
|
|||||||
<converse-dragresize></converse-dragresize>
|
<converse-dragresize></converse-dragresize>
|
||||||
<converse-muc-heading jid="${o.model.get('jid')}" class="chat-head chat-head-chatroom row no-gutters"></converse-muc-heading>
|
<converse-muc-heading jid="${o.model.get('jid')}" class="chat-head chat-head-chatroom row no-gutters"></converse-muc-heading>
|
||||||
<div class="chat-body chatroom-body row no-gutters">
|
<div class="chat-body chatroom-body row no-gutters">
|
||||||
<div class="chat-area col">
|
<converse-muc-chatarea jid="${o.model.get('jid')}"></converse-muc-chatarea>
|
||||||
<div class="chat-content ${ o.show_send_button ? 'chat-content-sendbutton' : '' }" aria-live="polite">
|
|
||||||
<converse-chat-content
|
|
||||||
class="chat-content__messages"
|
|
||||||
jid="${o.model.get('jid')}"
|
|
||||||
@scroll=${o.markScrolled}></converse-chat-content>
|
|
||||||
|
|
||||||
<div class="chat-content__help"></div>
|
|
||||||
</div>
|
|
||||||
<converse-muc-bottom-panel jid="${o.model.get('jid')}" class="bottom-panel"></converse-muc-bottom-panel>
|
|
||||||
</div>
|
|
||||||
<div class="disconnect-container hidden"></div>
|
|
||||||
<converse-muc-sidebar class="occupants col-md-3 col-4 ${o.sidebar_hidden ? 'hidden' : ''}"
|
|
||||||
.occupants=${o.occupants}
|
|
||||||
.chatroom=${o.model}></converse-muc-sidebar>
|
|
||||||
<div class="nickname-form-container"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
@ -3,7 +3,6 @@ import log from '@converse/headless/log';
|
|||||||
import tpl_spinner from 'templates/spinner.js';
|
import tpl_spinner from 'templates/spinner.js';
|
||||||
import { ElementView } from '@converse/skeletor/src/element.js';
|
import { ElementView } from '@converse/skeletor/src/element.js';
|
||||||
import { _converse, api, converse } from '@converse/headless/core';
|
import { _converse, api, converse } from '@converse/headless/core';
|
||||||
import { html, render } from 'lit-html';
|
|
||||||
|
|
||||||
const u = converse.env.utils;
|
const u = converse.env.utils;
|
||||||
|
|
||||||
@ -14,21 +13,6 @@ export default class BaseChatView extends ElementView {
|
|||||||
this.debouncedScrollDown = debounce(this.scrollDown, 100);
|
this.debouncedScrollDown = debounce(this.scrollDown, 100);
|
||||||
}
|
}
|
||||||
|
|
||||||
renderHelpMessages () {
|
|
||||||
render(
|
|
||||||
html`
|
|
||||||
<converse-chat-help
|
|
||||||
.model=${this.model}
|
|
||||||
.messages=${this.getHelpMessages()}
|
|
||||||
?hidden=${!this.model.get('show_help_messages')}
|
|
||||||
type="info"
|
|
||||||
chat_type="${this.model.get('type')}"
|
|
||||||
></converse-chat-help>
|
|
||||||
`,
|
|
||||||
this.help_container
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
hideNewMessagesIndicator () {
|
hideNewMessagesIndicator () {
|
||||||
const new_msgs_indicator = this.querySelector('.new-msgs-indicator');
|
const new_msgs_indicator = this.querySelector('.new-msgs-indicator');
|
||||||
if (new_msgs_indicator !== null) {
|
if (new_msgs_indicator !== null) {
|
||||||
@ -103,19 +87,20 @@ export default class BaseChatView extends ElementView {
|
|||||||
}
|
}
|
||||||
|
|
||||||
addSpinner (append = false) {
|
addSpinner (append = false) {
|
||||||
|
const content = this.querySelector('.chat-content');
|
||||||
if (this.querySelector('.spinner') === null) {
|
if (this.querySelector('.spinner') === null) {
|
||||||
const el = u.getElementFromTemplateResult(tpl_spinner());
|
const el = u.getElementFromTemplateResult(tpl_spinner());
|
||||||
if (append) {
|
if (append) {
|
||||||
this.content.insertAdjacentElement('beforeend', el);
|
content.insertAdjacentElement('beforeend', el);
|
||||||
this.scrollDown();
|
this.scrollDown();
|
||||||
} else {
|
} else {
|
||||||
this.content.insertAdjacentElement('afterbegin', el);
|
content.insertAdjacentElement('afterbegin', el);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
clearSpinner () {
|
clearSpinner () {
|
||||||
this.content.querySelectorAll('.spinner').forEach(u.removeElement);
|
this.querySelectorAll('.chat-content .spinner').forEach(u.removeElement);
|
||||||
}
|
}
|
||||||
|
|
||||||
onStatusMessageChanged (item) {
|
onStatusMessageChanged (item) {
|
||||||
|
Loading…
Reference in New Issue
Block a user