From f9aa75b69e2a46d47c989069c249f489343ec50c Mon Sep 17 00:00:00 2001 From: JC Brand Date: Tue, 1 May 2018 11:46:30 +0200 Subject: [PATCH] Refactored message attributes and rendering. - set `username` on the message object, instead of always using `fullname` with fallback to `jid`. - Distinguish better between `groupchat` messages and normal messages in `getMessageAttributesFromStanza` --- spec/chatroom.js | 2 +- src/converse-chatboxes.js | 72 ++++++++++++++++++------------------ src/converse-chatview.js | 16 ++++---- src/converse-message-view.js | 37 ++++++------------ src/converse-muc.js | 1 + src/templates/csn.html | 2 +- 6 files changed, 57 insertions(+), 73 deletions(-) diff --git a/spec/chatroom.js b/spec/chatroom.js index 1012b7d47..942a934fa 100644 --- a/spec/chatroom.js +++ b/spec/chatroom.js @@ -864,7 +864,7 @@ message = '/me is as well'; msg = $msg({ - from: 'lounge@localhost/dummy', + from: 'lounge@localhost/Max Mustermann', id: (new Date()).getTime(), to: 'dummy@localhost', type: 'groupchat' diff --git a/src/converse-chatboxes.js b/src/converse-chatboxes.js index 628316cc5..fcd961fcb 100644 --- a/src/converse-chatboxes.js +++ b/src/converse-chatboxes.js @@ -275,7 +275,8 @@ is_spoiler = this.get('composing_spoiler'); return { - 'fullname': _.isEmpty(fullname) ? _converse.bare_jid : fullname, + 'fullname': fullname, + 'username': _.isEmpty(fullname) ? _converse.bare_jid : fullname, 'sender': 'me', 'time': moment().format(), 'message': text ? u.httpToGeoUri(emojione.shortnameToUnicode(text), _converse) : undefined, @@ -362,50 +363,47 @@ * that contains the message stanza, if it was * contained, otherwise it's the message stanza itself. */ - const { _converse } = this.__super__, - { __ } = _converse; - delay = delay || message.querySelector('delay'); - const type = message.getAttribute('type'), - body = this.getMessageBody(message); - const delayed = !_.isNull(delay), - is_groupchat = type === 'groupchat', - chat_state = message.getElementsByTagName(_converse.COMPOSING).length && _converse.COMPOSING || - message.getElementsByTagName(_converse.PAUSED).length && _converse.PAUSED || - message.getElementsByTagName(_converse.INACTIVE).length && _converse.INACTIVE || - message.getElementsByTagName(_converse.ACTIVE).length && _converse.ACTIVE || - message.getElementsByTagName(_converse.GONE).length && _converse.GONE; + const { _converse } = this.__super__, + { __ } = _converse, + spoiler = message.querySelector(`spoiler[xmlns="${Strophe.NS.SPOILER}"]`), + chat_state = message.getElementsByTagName(_converse.COMPOSING).length && _converse.COMPOSING || + message.getElementsByTagName(_converse.PAUSED).length && _converse.PAUSED || + message.getElementsByTagName(_converse.INACTIVE).length && _converse.INACTIVE || + message.getElementsByTagName(_converse.ACTIVE).length && _converse.ACTIVE || + message.getElementsByTagName(_converse.GONE).length && _converse.GONE; - let from; - if (is_groupchat) { - from = Strophe.unescapeNode(Strophe.getResourceFromJid(message.getAttribute('from'))); - } else { - from = Strophe.getBareJidFromJid(message.getAttribute('from')); - } - const time = delayed ? delay.getAttribute('stamp') : moment().format(); - let sender, fullname; - if ((is_groupchat && from === this.get('nick')) || (!is_groupchat && from === _converse.bare_jid)) { - sender = 'me'; - fullname = _converse.xmppstatus.get('fullname'); - } else { - sender = 'them'; - fullname = this.get('fullname'); - } - - const spoiler = message.querySelector(`spoiler[xmlns="${Strophe.NS.SPOILER}"]`); const attrs = { - 'type': type, - 'from': from, + 'type': message.getAttribute('type'), 'chat_state': chat_state, - 'delayed': delayed, - 'fullname': fullname, - 'message': body || undefined, + 'delayed': !_.isNull(delay), + 'message': this.getMessageBody(message) || undefined, 'msgid': message.getAttribute('id'), - 'sender': sender, - 'time': time, + 'time': delay ? delay.getAttribute('stamp') : moment().format(), 'is_spoiler': !_.isNull(spoiler) }; + if (attrs.type === 'groupchat') { + attrs.from = message.getAttribute('from'); + attrs.nick = Strophe.unescapeNode(Strophe.getResourceFromJid(attrs.from)); + attrs.username = attrs.nick; + if (attrs.from === this.get('nick')) { + attrs.sender = 'me'; + } else { + attrs.sender = 'them'; + } + } else { + attrs.from = Strophe.getBareJidFromJid(message.getAttribute('from')); + if (attrs.from === _converse.bare_jid) { + attrs.sender = 'me'; + attrs.fullname = _converse.xmppstatus.get('fullname'); + attrs.username = attrs.fullname || attrs.from; + } else { + attrs.sender = 'them'; + attrs.fullname = this.get('fullname'); + attrs.username = attrs.fullname || attrs.from; + } + } _.each(sizzle(`x[xmlns="${Strophe.NS.OUTOFBAND}"]`, message), (xform) => { attrs['oob_url'] = xform.querySelector('url').textContent; attrs['oob_desc'] = xform.querySelector('url').textContent; diff --git a/src/converse-chatview.js b/src/converse-chatview.js index 6bd9f9222..a058046b5 100644 --- a/src/converse-chatview.js +++ b/src/converse-chatview.js @@ -579,14 +579,14 @@ return this.scrollDown(); }, - clearChatStateNotification (from, isodate) { + clearChatStateNotification (username, isodate) { if (isodate) { _.each( - sizzle(`.chat-state-notification[data-csn="${from}"][data-isodate="${isodate}"]`, this.content), + sizzle(`.chat-state-notification[data-csn="${username}"][data-isodate="${isodate}"]`, this.content), u.removeElement ); } else { - _.each(sizzle(`.chat-state-notification[data-csn="${from}"]`, this.content), u.removeElement); + _.each(sizzle(`.chat-state-notification[data-csn="${username}"]`, this.content), u.removeElement); } }, @@ -594,9 +594,8 @@ /* Support for XEP-0085, Chat State Notifications */ let text; const from = message.get('from'), - username = message.get('fullname') || from, - data = `data-csn=${from}`; - this.clearChatStateNotification(from); + username = message.get('username'); + this.clearChatStateNotification(username); if (message.get('chat_state') === _converse.COMPOSING) { if (message.get('sender') === 'me') { @@ -619,6 +618,7 @@ this.content.insertAdjacentHTML( 'beforeend', tpl_csn({ + 'username': username, 'message': text, 'from': from, 'isodate': isodate @@ -626,7 +626,7 @@ this.scrollDown(); this.clear_status_timeout = window.setTimeout( - this.clearChatStateNotification.bind(this, from, isodate), + this.clearChatStateNotification.bind(this, username, isodate), 30000 ); return message; @@ -717,7 +717,7 @@ const view = new _converse.MessageView({'model': message}); this.insertMessage(view); this.insertDayIndicator(view.el); - this.clearChatStateNotification(message.get('from')); + this.clearChatStateNotification(message.get('username')); this.setScrollPosition(view.el); if (u.isNewMessage(message)) { diff --git a/src/converse-message-view.js b/src/converse-message-view.js index 99f7271eb..7d53e2ada 100644 --- a/src/converse-message-view.js +++ b/src/converse-message-view.js @@ -45,8 +45,14 @@ initialize () { this.chatbox = this.model.collection.chatbox; - this.chatbox.on('change:fullname', (chatbox) => this.model.save('fullname', chatbox.get('fullname'))); - + this.chatbox.on('change:fullname', (chatbox) => { + if (chatbox.get('type') !== 'chatroom') { + this.model.save({ + 'fullname': chatbox.get('fullname'), + 'username': chatbox.get('fullname') + }) + } + }); this.model.on('change:fullname', this.render, this); this.model.on('change:progress', this.renderFileUploadProgresBar, this); this.model.on('change:type', this.render, this); @@ -60,18 +66,13 @@ } else if (this.model.get('type') === 'error') { return this.renderErrorMessage(); } - - let template, username, image, image_type, + let template, image, image_type, text = this.model.get('message'); - // TODO: store proper username on the message itself if (this.isMeCommand()) { - const arr = this.getValuesForMeCommand(); - template = arr[0]; - username = arr[1]; - text = arr[2]; + template = tpl_action; + text = this.model.get('message').replace(/^\/me/, ''); } else { - username = this.model.get('fullname') || this.model.get('from'); template = this.model.get('is_spoiler') ? tpl_spoiler_message : tpl_message; if (this.model.get('type') !== 'headline') { if (this.model.get('sender') === 'me') { @@ -88,7 +89,6 @@ _.extend(this.model.toJSON(), { 'pretty_time': moment_time.format(_converse.time_format), 'time': moment_time.format(), - 'username': username, 'extra_classes': this.getExtraMessageClasses(), 'label_show': __('Show more'), 'image_type': image_type, @@ -168,21 +168,6 @@ return match && match[1] === 'me'; }, - getValuesForMeCommand() { - let username, text; - const match = this.model.get('message').match(/^\/(.*?)(?: (.*))?$/); - if (match && match[1] === 'me') { - text = this.model.get('message').replace(/^\/me/, ''); - } - if (this.model.get('sender') === 'me') { - const fullname = _converse.xmppstatus.get('fullname') || this.model.get('fullname'); - username = _.isNil(fullname) ? _converse.bare_jid : fullname; - } else { - username = this.model.get('fullname') || this.model.get('from'); - } - return [tpl_action, username, text] - }, - processMessageText () { var text = this.get('message'); text = u.geoUriToHttp(text, _converse.geouri_replacement); diff --git a/src/converse-muc.js b/src/converse-muc.js index 28cc59de0..5ea8c0238 100644 --- a/src/converse-muc.js +++ b/src/converse-muc.js @@ -305,6 +305,7 @@ const is_spoiler = this.get('composing_spoiler'); return { 'fullname': this.get('nick'), + 'username': this.get('nick'), 'is_spoiler': is_spoiler, 'message': text ? u.httpToGeoUri(emojione.shortnameToUnicode(text), _converse) : undefined, 'sender': 'me', diff --git a/src/templates/csn.html b/src/templates/csn.html index 08608c494..4fcff8a3a 100644 --- a/src/templates/csn.html +++ b/src/templates/csn.html @@ -1,3 +1,3 @@
{{{o.message}}}
+ data-csn="{{{o.username}}}">{{{o.message}}}