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

Move insertIntoTextarea methods from view to bottom panel component

Browse Source 
That way we further decouple the various components and make it easier
to use them indepenent of one another.
This commit is contained in:
JC Brand 2021-03-04 15:53:04 +01:00
parent 3e5bd34141
commit 698ad90c43
7 changed files with 26 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
spec/chatbox.js
View File

@ -264,7 +264,7 @@ describe("Chatboxes", function () {
const toolbar = view.querySelector('.chat-toolbar');
const counter = toolbar.querySelector('.message-limit');
expect(counter.textContent).toBe('200');
view.insertIntoTextArea('hello world');
view.getBottomPanel().insertIntoTextArea('hello world');
expect(counter.textContent).toBe('188');
toolbar.querySelector('.toggle-emojis').click();

18
src/plugins/chatview/bottom_panel.js
View File

@ -15,10 +15,13 @@ export default class ChatBottomPanel extends ElementView {
'click .toggle-clear': 'clearMessages',
}
connectedCallback () {
async connectedCallback () {
super.connectedCallback();
this.model = _converse.chatboxes.get(this.getAttribute('jid'));
this.listenTo(this.model, 'change:composing_spoiler', this.renderMessageForm);
await this.model.initialized;
this.listenTo(this.model.messages, 'change:correcting', this.onMessageCorrecting);
this.render();
}
@ -76,6 +79,19 @@ export default class ChatBottomPanel extends ElementView {
this.renderToolbar();
}
onMessageCorrecting (message) {
if (message.get('correcting')) {
this.insertIntoTextArea(u.prefixMentions(message), true, true);
} else {
const currently_correcting = this.model.messages.findWhere('correcting');
if (currently_correcting && currently_correcting !== message) {
this.insertIntoTextArea(u.prefixMentions(message), true, true);
} else {
this.insertIntoTextArea('', true, false);
}
}
}
emitFocused (ev) {
_converse.chatboxviews.get(this.getAttribute('jid'))?.emitFocused(ev);
}

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

@ -35,7 +35,6 @@ export default class ChatView extends BaseChatView {
this.listenTo(_converse, 'windowStateChanged', this.onWindowStateChanged);
this.listenTo(this.model, 'change:hidden', () => !this.model.get('hidden') && this.afterShown());
this.listenTo(this.model, 'change:status', this.onStatusMessageChanged);
this.listenTo(this.model.messages, 'change:correcting', this.onMessageCorrecting);
this.listenTo(this.model.presence, 'change:show', this.onPresenceChanged);
this.render();

6
src/plugins/muc-views/bottom_panel.js
View File

@ -15,12 +15,10 @@ export default class MUCBottomPanel extends BottomPanel {
}
async connectedCallback () {
super.connectedCallback();
// this.model gets set in the super method and we also wait there for this.model.initialized
await super.connectedCallback();
this.debouncedRender = debounce(this.render, 100);
this.model = _converse.chatboxes.get(this.getAttribute('jid'));
this.listenTo(this.model, 'change:composing_spoiler', this.renderMessageForm);
await this.model.initialized;
this.listenTo(this.model, 'change:hidden_occupants', this.debouncedRender);
this.listenTo(this.model.features, 'change:moderated', this.debouncedRender);
this.listenTo(this.model.occupants, 'add', this.renderIfOwnOccupant)

1
src/plugins/muc-views/muc.js
View File

@ -54,7 +54,6 @@ export default class MUCView extends BaseChatView {
this.listenTo(this.model, 'change:minimized', () => this.afterShown());
this.listenTo(this.model, 'configurationNeeded', this.getAndRenderConfigurationForm);
this.listenTo(this.model, 'show', this.show);
this.listenTo(this.model.messages, 'change:correcting', this.onMessageCorrecting);
this.listenTo(this.model.session, 'change:connection_status', this.renderAfterTransition);
// Bind so that we can pass it to addEventListener and removeEventListener

40
src/shared/chat/baseview.js
View File

@ -152,46 +152,12 @@ export default class BaseChatView extends ElementView {
}
}
onEmojiReceivedFromPicker (emoji) {
const model = this.querySelector('converse-emoji-picker').model;
const autocompleting = model.get('autocompleting');
const ac_position = model.get('ac_position');
this.insertIntoTextArea(emoji, autocompleting, false, ac_position);
}
onMessageCorrecting (message) {
if (message.get('correcting')) {
this.insertIntoTextArea(u.prefixMentions(message), true, true);
} else {
const currently_correcting = this.model.messages.findWhere('correcting');
if (currently_correcting && currently_correcting !== message) {
this.insertIntoTextArea(u.prefixMentions(message), true, true);
} else {
this.insertIntoTextArea('', true, false);
}
}
}
/**
* Insert a particular string value into the textarea of this chat box.
* @private
* @method _converse.ChatBoxView#insertIntoTextArea
* @param {string} value - The value to be inserted.
* @param {(boolean|string)} [replace] - Whether an existing value
* should be replaced. If set to `true`, the entire textarea will
* be replaced with the new value. If set to a string, then only
* that string will be replaced *if* a position is also specified.
* @param {integer} [position] - The end index of the string to be
* replaced with the new value.
*/
insertIntoTextArea (value, replace = false, correcting = false, position) {
let bottom_panel;
getBottomPanel () {
if (this.model.get('type') === _converse.CHATROOMS_TYPE) {
bottom_panel = this.querySelector('converse-muc-bottom-panel');
return this.querySelector('converse-muc-bottom-panel');
} else {
bottom_panel = this.querySelector('converse-chat-bottom-panel');
return this.querySelector('converse-chat-bottom-panel');
}
bottom_panel.insertIntoTextArea(value, replace, correcting, position);
}
/**

4
src/shared/chat/emoji-picker.js
View File

@ -148,7 +148,9 @@ export default class EmojiPicker extends CustomElement {
}
insertIntoTextArea (value) {
this.chatview.onEmojiReceivedFromPicker(value);
const autocompleting = this.model.get('autocompleting');
const ac_position = this.model.get('ac_position');
this.chatview.getBottomPanel().insertIntoTextArea(value, autocompleting, false, ac_position);
this.model.set({'autocompleting': null, 'query': '', 'ac_position': null});
}