Re-initialize chat components when jid attribute changes
This commit is contained in:
parent
9e4a4ba2ff
commit
90dff612c7
@ -4,6 +4,7 @@ import { _converse } from '@converse/headless/core';
|
|||||||
export default (o) => html`
|
export default (o) => html`
|
||||||
<div class="flyout box-flyout">
|
<div class="flyout box-flyout">
|
||||||
<converse-dragresize></converse-dragresize>
|
<converse-dragresize></converse-dragresize>
|
||||||
|
${ o.model ? html`
|
||||||
<converse-chat-heading jid="${o.jid}" class="chat-head chat-head-chatbox row no-gutters"></converse-chat-heading>
|
<converse-chat-heading jid="${o.jid}" class="chat-head chat-head-chatbox row no-gutters"></converse-chat-heading>
|
||||||
<div class="chat-body">
|
<div class="chat-body">
|
||||||
<div class="chat-content ${ o.show_send_button ? 'chat-content-sendbutton' : '' }" aria-live="polite">
|
<div class="chat-content ${ o.show_send_button ? 'chat-content-sendbutton' : '' }" aria-live="polite">
|
||||||
@ -22,5 +23,6 @@ export default (o) => html`
|
|||||||
</div>
|
</div>
|
||||||
<converse-chat-bottom-panel jid="${o.jid}" class="bottom-panel"> </converse-chat-bottom-panel>
|
<converse-chat-bottom-panel jid="${o.jid}" class="bottom-panel"> </converse-chat-bottom-panel>
|
||||||
</div>
|
</div>
|
||||||
|
` : '' }
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
@ -14,8 +14,12 @@ import { _converse, api } from '@converse/headless/core';
|
|||||||
export default class ChatView extends BaseChatView {
|
export default class ChatView extends BaseChatView {
|
||||||
length = 200
|
length = 200
|
||||||
|
|
||||||
async connectedCallback () {
|
connectedCallback () {
|
||||||
super.connectedCallback();
|
super.connectedCallback();
|
||||||
|
this.initialize();
|
||||||
|
}
|
||||||
|
|
||||||
|
async initialize() {
|
||||||
_converse.chatboxviews.add(this.jid, this);
|
_converse.chatboxviews.add(this.jid, this);
|
||||||
this.model = _converse.chatboxes.get(this.jid);
|
this.model = _converse.chatboxes.get(this.jid);
|
||||||
this.listenTo(_converse, 'windowStateChanged', this.onWindowStateChanged);
|
this.listenTo(_converse, 'windowStateChanged', this.onWindowStateChanged);
|
||||||
|
@ -1,18 +1,18 @@
|
|||||||
import '../heading.js';
|
import '../heading.js';
|
||||||
import { html } from "lit";
|
import { html } from "lit";
|
||||||
|
|
||||||
export default (o) => html`
|
export default (model) => html`
|
||||||
<div class="flyout box-flyout">
|
<div class="flyout box-flyout">
|
||||||
<converse-dragresize></converse-dragresize>
|
<converse-dragresize></converse-dragresize>
|
||||||
<converse-headlines-heading jid="${o.jid}" class="chat-head chat-head-chatbox row no-gutters"></converse-headlines-heading>
|
${ model ? html`
|
||||||
|
<converse-headlines-heading jid="${model.get('jid')}" class="chat-head chat-head-chatbox row no-gutters">
|
||||||
|
</converse-headlines-heading>
|
||||||
<div class="chat-body">
|
<div class="chat-body">
|
||||||
<div class="chat-content ${ o.show_send_button ? 'chat-content-sendbutton' : '' }" aria-live="polite">
|
<div class="chat-content" aria-live="polite">
|
||||||
<converse-chat-content
|
<converse-chat-content
|
||||||
class="chat-content__messages"
|
class="chat-content__messages"
|
||||||
jid="${o.jid}"></converse-chat-content>
|
jid="${model.get('jid')}"></converse-chat-content>
|
||||||
|
|
||||||
<div class="chat-content__help"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>` : '' }
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
@ -5,8 +5,12 @@ import { _converse, api } from '@converse/headless/core';
|
|||||||
|
|
||||||
class HeadlinesView extends BaseChatView {
|
class HeadlinesView extends BaseChatView {
|
||||||
|
|
||||||
async connectedCallback () {
|
connectedCallback () {
|
||||||
super.connectedCallback();
|
super.connectedCallback();
|
||||||
|
this.initialize();
|
||||||
|
}
|
||||||
|
|
||||||
|
async initialize() {
|
||||||
_converse.chatboxviews.add(this.jid, this);
|
_converse.chatboxviews.add(this.jid, this);
|
||||||
|
|
||||||
this.model = _converse.chatboxes.get(this.jid);
|
this.model = _converse.chatboxes.get(this.jid);
|
||||||
@ -32,12 +36,7 @@ class HeadlinesView extends BaseChatView {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
return tpl_headlines(
|
return tpl_headlines(this.model);
|
||||||
Object.assign(this.model.toJSON(), {
|
|
||||||
show_send_button: false,
|
|
||||||
show_toolbar: false,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async close (ev) {
|
async close (ev) {
|
||||||
|
@ -9,8 +9,12 @@ export default class MUCView extends BaseChatView {
|
|||||||
length = 300
|
length = 300
|
||||||
is_chatroom = true
|
is_chatroom = true
|
||||||
|
|
||||||
async connectedCallback () {
|
connectedCallback () {
|
||||||
super.connectedCallback();
|
super.connectedCallback();
|
||||||
|
this.initialize();
|
||||||
|
}
|
||||||
|
|
||||||
|
async initialize () {
|
||||||
this.model = await api.rooms.get(this.jid);
|
this.model = await api.rooms.get(this.jid);
|
||||||
_converse.chatboxviews.add(this.jid, this);
|
_converse.chatboxviews.add(this.jid, this);
|
||||||
this.setAttribute('id', this.model.get('box_id'));
|
this.setAttribute('id', this.model.get('box_id'));
|
||||||
@ -36,7 +40,7 @@ export default class MUCView extends BaseChatView {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
return this.model ? tpl_muc({ 'model': this.model }) : '';
|
return tpl_muc({ 'model': this.model });
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -13,8 +13,10 @@ export default (o) => {
|
|||||||
return html`
|
return html`
|
||||||
<div class="flyout box-flyout">
|
<div class="flyout box-flyout">
|
||||||
<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>
|
${ o.model ? html`
|
||||||
|
<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">${getChatRoomBodyTemplate(o)}</div>
|
<div class="chat-body chatroom-body row no-gutters">${getChatRoomBodyTemplate(o)}</div>
|
||||||
</div>
|
` : '' }
|
||||||
`;
|
</div>`;
|
||||||
}
|
}
|
||||||
|
@ -35,4 +35,60 @@ describe("The <converse-muc> component", function () {
|
|||||||
expect(true).toBe(true);
|
expect(true).toBe(true);
|
||||||
done();
|
done();
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
it("will update correctly when the jid property changes",
|
||||||
|
mock.initConverse([], {'auto_insert': false}, async function (done, _converse) {
|
||||||
|
|
||||||
|
const { api } = _converse;
|
||||||
|
const muc_jid = 'lounge@montague.lit';
|
||||||
|
const nick = 'romeo';
|
||||||
|
|
||||||
|
const muc_creation_promise = await api.rooms.open(muc_jid, {nick, 'hidden': true}, false);
|
||||||
|
await mock.getRoomFeatures(_converse, muc_jid, []);
|
||||||
|
await mock.receiveOwnMUCPresence(_converse, muc_jid, nick);
|
||||||
|
await muc_creation_promise;
|
||||||
|
const model = _converse.chatboxes.get(muc_jid);
|
||||||
|
await u.waitUntil(() => (model.session.get('connection_status') === converse.ROOMSTATUS.ENTERED));
|
||||||
|
const affs = _converse.muc_fetch_members;
|
||||||
|
const all_affiliations = Array.isArray(affs) ? affs : (affs ? ['member', 'admin', 'owner'] : []);
|
||||||
|
await mock.returnMemberLists(_converse, muc_jid, [], all_affiliations);
|
||||||
|
await model.messages.fetched;
|
||||||
|
|
||||||
|
model.sendMessage('hello from the lounge!');
|
||||||
|
|
||||||
|
const span_el = document.createElement('span');
|
||||||
|
span_el.classList.add('conversejs');
|
||||||
|
span_el.classList.add('converse-embedded');
|
||||||
|
|
||||||
|
const muc_el = document.createElement('converse-muc');
|
||||||
|
muc_el.classList.add('chatbox');
|
||||||
|
muc_el.classList.add('chatroom');
|
||||||
|
muc_el.setAttribute('jid', muc_jid);
|
||||||
|
span_el.appendChild(muc_el);
|
||||||
|
|
||||||
|
const body = document.querySelector('body');
|
||||||
|
body.appendChild(span_el);
|
||||||
|
await u.waitUntil(() => muc_el.querySelector('converse-muc-bottom-panel'));
|
||||||
|
muc_el.querySelector('.box-flyout').setAttribute('style', 'height: 80vh');
|
||||||
|
|
||||||
|
const message = await u.waitUntil(() => muc_el.querySelector('converse-chat-message'));
|
||||||
|
expect(message.model.get('body')).toBe('hello from the lounge!');
|
||||||
|
|
||||||
|
const muc2_jid = 'bar@montague.lit';
|
||||||
|
const muc2_creation_promise = await api.rooms.open(muc2_jid, {nick, 'hidden': true}, false);
|
||||||
|
await mock.getRoomFeatures(_converse, muc2_jid, []);
|
||||||
|
await mock.receiveOwnMUCPresence(_converse, muc2_jid, nick);
|
||||||
|
await muc2_creation_promise;
|
||||||
|
const model2 = _converse.chatboxes.get(muc2_jid);
|
||||||
|
await u.waitUntil(() => (model.session.get('connection_status') === converse.ROOMSTATUS.ENTERED));
|
||||||
|
await mock.returnMemberLists(_converse, muc2_jid, [], all_affiliations);
|
||||||
|
await model.messages.fetched;
|
||||||
|
|
||||||
|
model2.sendMessage('hello from the bar!');
|
||||||
|
muc_el.setAttribute('jid', muc2_jid);
|
||||||
|
|
||||||
|
await u.waitUntil(() => muc_el.querySelector('converse-chat-message-body').textContent.trim() === 'hello from the bar!');
|
||||||
|
body.removeChild(span_el);
|
||||||
|
done();
|
||||||
|
}));
|
||||||
});
|
});
|
||||||
|
@ -17,6 +17,15 @@ export default class BaseChatView extends CustomElement {
|
|||||||
_converse.chatboxviews.remove(this.jid, this);
|
_converse.chatboxviews.remove(this.jid, this);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
updated () {
|
||||||
|
if (this.model && this.jid !== this.model.get('jid')) {
|
||||||
|
this.stopListening();
|
||||||
|
delete this.model;
|
||||||
|
this.requestUpdate();
|
||||||
|
this.initialize();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
maybeFocus () {
|
maybeFocus () {
|
||||||
api.settings.get('auto_focus') && this.focus();
|
api.settings.get('auto_focus') && this.focus();
|
||||||
}
|
}
|
||||||
@ -28,6 +37,7 @@ export default class BaseChatView extends CustomElement {
|
|||||||
}
|
}
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
emitBlurred (ev) {
|
emitBlurred (ev) {
|
||||||
if (this.contains(document.activeElement) || this.contains(ev.relatedTarget)) {
|
if (this.contains(document.activeElement) || this.contains(ev.relatedTarget)) {
|
||||||
// Something else in this chatbox is still focused
|
// Something else in this chatbox is still focused
|
||||||
|
Loading…
Reference in New Issue
Block a user