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

Fixes #1400. When chat message is only an emoji, enlarge it

Browse Source
This commit is contained in:
JC Brand 2019-02-27 10:34:47 +01:00
parent 519bd54acb
commit 49da581d14
8 changed files with 84 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGES.md
View File

@ -4,6 +4,7 @@
- New config setting [locked_muc_domain](https://conversejs.org/docs/html/configuration.html#locked-muc-domain)
- #1373: Re-add support for the [muc_domain](https://conversejs.org/docs/html/configuration.html#muc-domain) setting
- #1400: When a chat message is just an emoji, enlarge the emoji
- #1437: List of groupchats in modal doesn't scroll
- #1457: Wrong tooltip shown for "unbookmark" icon

3
css/converse.css
View File

@ -11948,6 +11948,9 @@ body.converse-fullscreen {
vertical-align: -0.1em; }
#conversejs .message.chat-msg .chat-msg__text .emojione {
margin-bottom: -6px; }
#conversejs .message.chat-msg .chat-msg__text--larger {
font-size: 2em;
padding-top: 0.25em; }
#conversejs .message.chat-msg .chat-msg__media {
margin-top: 0.25rem;
word-break: break-all; }

30
dist/converse.js vendored
View File

@ -48252,8 +48252,8 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_0__["default"].plugins
const _converse = this.__super__._converse,
__ = _converse.__;
const bookmark_button = templates_chatroom_bookmark_toggle_html__WEBPACK_IMPORTED_MODULE_5___default()(_.assignIn(this.model.toJSON(), {
info_toggle_bookmark: __('Bookmark this groupchat'),
bookmarked: this.model.get('bookmarked')
'info_toggle_bookmark': this.model.get('bookmarked') ? __('Unbookmark this groupchat') : __('Bookmark this groupchat'),
'bookmarked': this.model.get('bookmarked')
}));
const close_button = this.el.querySelector('.close-chatbox-button');
close_button.insertAdjacentHTML('afterend', bookmark_button);
@ -62137,6 +62137,7 @@ _converse_core__WEBPACK_IMPORTED_MODULE_2__["default"].plugins.add('converse-cha
const archive = sizzle(`result[xmlns="${Strophe.NS.MAM}"]`, original_stanza).pop(),
spoiler = sizzle(`spoiler[xmlns="${Strophe.NS.SPOILER}"]`, original_stanza).pop(),
delay = sizzle(`delay[xmlns="${Strophe.NS.DELAY}"]`, original_stanza).pop(),
text = _converse.chatboxes.getMessageBody(stanza) || undefined,
chat_state = stanza.getElementsByTagName(_converse.COMPOSING).length && _converse.COMPOSING || stanza.getElementsByTagName(_converse.PAUSED).length && _converse.PAUSED || stanza.getElementsByTagName(_converse.INACTIVE).length && _converse.INACTIVE || stanza.getElementsByTagName(_converse.ACTIVE).length && _converse.ACTIVE || stanza.getElementsByTagName(_converse.GONE).length && _converse.GONE;
const attrs = _.extend({
@ -62144,7 +62145,8 @@ _converse_core__WEBPACK_IMPORTED_MODULE_2__["default"].plugins.add('converse-cha
'is_archived': !_.isNil(archive),
'is_delayed': !_.isNil(delay),
'is_spoiler': !_.isNil(spoiler),
'message': _converse.chatboxes.getMessageBody(stanza) || undefined,
'is_single_emoji': text ? u.isSingleEmoji(text) : false,
'message': text,
'msgid': stanza.getAttribute('id'),
'references': this.getReferencesFromStanza(stanza),
'subject': _.propertyOf(stanza.querySelector('subject'))('textContent'),
@ -91745,6 +91747,16 @@ function convert(unicode) {
return twemoji__WEBPACK_IMPORTED_MODULE_0__["default"].convert.fromCodePoint(unicode);
}
_core__WEBPACK_IMPORTED_MODULE_2__["default"].isSingleEmoji = function (str) {
if (!str || str.length > 2) {
return;
}
const result = _lodash_noconflict__WEBPACK_IMPORTED_MODULE_1___default.a.flow(_core__WEBPACK_IMPORTED_MODULE_2__["default"].shortnameToUnicode, twemoji__WEBPACK_IMPORTED_MODULE_0__["default"].parse)(str);
return result.match(/<img class="emoji" draggable="false" alt=".*?" src=".*?\.png"\/>/);
};
_core__WEBPACK_IMPORTED_MODULE_2__["default"].shortnameToUnicode = function (str) {
/* will output unicode from shortname
* useful for sending emojis back to mobile devices
@ -91774,11 +91786,7 @@ _core__WEBPACK_IMPORTED_MODULE_2__["default"].shortnameToUnicode = function (str
};
_core__WEBPACK_IMPORTED_MODULE_2__["default"].addEmoji = function (_converse, text) {
if (_converse.use_system_emojis) {
return _core__WEBPACK_IMPORTED_MODULE_2__["default"].shortnameToUnicode(text);
} else {
return twemoji__WEBPACK_IMPORTED_MODULE_0__["default"].parse(text);
}
return _core__WEBPACK_IMPORTED_MODULE_2__["default"].getEmojiRenderer(_converse)(text);
};
_core__WEBPACK_IMPORTED_MODULE_2__["default"].getEmojisByCategory = function (_converse) {
@ -93905,7 +93913,11 @@ __p += '\n <div class="chat-msg__subject">' +
__e( o.subject ) +
'</div>\n ';
} ;
__p += '\n <div class="chat-msg__text';
__p += '\n <div class="chat-msg__text\n ';
if (o.is_single_emoji) { ;
__p += ' chat-msg__text--larger';
} ;
__p += '\n ';
if (o.is_spoiler) { ;
__p += ' spoiler collapsed';
} ;

5
sass/_messages.scss
View File

@ -177,6 +177,11 @@
}
}
.chat-msg__text--larger {
font-size: 2em;
padding-top: 0.25em;
}
.chat-msg__media {
margin-top: 0.25rem;
word-break: break-all;

47
spec/messages.js
View File

@ -907,6 +907,30 @@
done();
}));
it("will display larger if it's a single emoji",
mock.initConverse(
null, ['rosterGroupsFetched', 'chatBoxesFetched'], {},
async function (done, _converse) {
await test_utils.waitForRoster(_converse, 'current');
const sender_jid = mock.cur_names[1].replace(/ /g,'.').toLowerCase() + '@localhost';
_converse.chatboxes.onMessage($msg({
'from': sender_jid,
'to': _converse.connection.jid,
'type': 'chat',
'id': (new Date()).getTime()
}).c('body').t('😇').up()
.c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree());
await new Promise(resolve => _converse.on('chatBoxOpened', resolve));
const view = _converse.api.chatviews.get(sender_jid);
await new Promise((resolve, reject) => view.once('messageInserted', resolve));
const chat_content = view.el.querySelector('.chat-content');
const message = chat_content.querySelector('.chat-msg__text');
expect(u.hasClass('chat-msg__text--larger', message)).toBe(true);
done();
}));
it("will render newlines",
mock.initConverse(
null, ['rosterGroupsFetched', 'chatBoxesFetched'], {},
@ -1870,7 +1894,9 @@
await new Promise((resolve, reject) => view.once('messageInserted', resolve));
await test_utils.waitUntil(() => view.el.querySelectorAll('.chat-content .chat-msg audio').length, 1000);
let msg = view.el.querySelector('.chat-msg .chat-msg__text');
expect(msg.outerHTML).toEqual('<div class="chat-msg__text">Have you heard this funny audio?</div>');
expect(msg.classList.length).toEqual(1);
expect(u.hasClass('chat-msg__text', msg)).toBe(true);
expect(msg.textContent).toEqual('Have you heard this funny audio?');
let media = view.el.querySelector('.chat-msg .chat-msg__media');
expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual(
'<!-- src/templates/audio.html -->'+
@ -1919,7 +1945,8 @@
_converse.connection._dataRecv(test_utils.createRequest(stanza));
await test_utils.waitUntil(() => view.el.querySelectorAll('.chat-content .chat-msg video').length, 2000)
let msg = view.el.querySelector('.chat-msg .chat-msg__text');
expect(msg.outerHTML).toEqual('<div class="chat-msg__text">Have you seen this funny video?</div>');
expect(msg.classList.length).toBe(1);
expect(msg.textContent).toEqual('Have you seen this funny video?');
let media = view.el.querySelector('.chat-msg .chat-msg__media');
expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual(
'<!-- src/templates/video.html -->'+
@ -1967,7 +1994,8 @@
await new Promise((resolve, reject) => view.once('messageInserted', resolve));
await test_utils.waitUntil(() => view.el.querySelectorAll('.chat-content .chat-msg a').length, 1000);
const msg = view.el.querySelector('.chat-msg .chat-msg__text');
expect(msg.outerHTML).toEqual('<div class="chat-msg__text">Have you downloaded this funny file?</div>');
expect(u.hasClass('chat-msg__text', msg)).toBe(true);
expect(msg.textContent).toEqual('Have you downloaded this funny file?');
const media = view.el.querySelector('.chat-msg .chat-msg__media');
expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual(
'<!-- src/templates/file.html -->'+
@ -1999,7 +2027,8 @@
await test_utils.waitUntil(() => view.el.querySelectorAll('.chat-content .chat-msg img').length, 2000);
const msg = view.el.querySelector('.chat-msg .chat-msg__text');
expect(msg.outerHTML).toEqual('<div class="chat-msg__text">Have you seen this funny image?</div>');
expect(u.hasClass('chat-msg__text', msg)).toBe(true);
expect(msg.textContent).toEqual('Have you seen this funny image?');
const media = view.el.querySelector('.chat-msg .chat-msg__media');
expect(media.innerHTML.replace(/(\r\n|\n|\r)/gm, "")).toEqual(
`<!-- src/templates/image.html -->`+
@ -2633,11 +2662,13 @@
.c('reference', {'xmlns':'urn:xmpp:reference:0', 'begin':'15', 'end':'23', 'type':'mention', 'uri':'xmpp:mr.robot@localhost'}).nodeTree;
await view.model.onMessage(msg);
await new Promise((resolve, reject) => view.once('messageInserted', resolve));
expect(view.el.querySelectorAll('.chat-msg__text').length).toBe(1);
expect(view.el.querySelector('.chat-msg__text').outerHTML).toBe(
'<div class="chat-msg__text">hello <span class="mention">z3r0</span> '+
const messages = view.el.querySelectorAll('.chat-msg__text');
expect(messages.length).toBe(1);
expect(messages[0].classList.length).toEqual(1);
expect(messages[0].innerHTML).toBe(
'hello <span class="mention">z3r0</span> '+
'<span class="mention mention--self badge badge-info">tom</span> '+
'<span class="mention">mr.robot</span>, how are you?</div>');
'<span class="mention">mr.robot</span>, how are you?');
done();
}));
});

4
src/headless/converse-chatboxes.js
View File

@ -656,6 +656,7 @@ converse.plugins.add('converse-chatboxes', {
const archive = sizzle(`result[xmlns="${Strophe.NS.MAM}"]`, original_stanza).pop(),
spoiler = sizzle(`spoiler[xmlns="${Strophe.NS.SPOILER}"]`, original_stanza).pop(),
delay = sizzle(`delay[xmlns="${Strophe.NS.DELAY}"]`, original_stanza).pop(),
text = _converse.chatboxes.getMessageBody(stanza) || undefined,
chat_state = stanza.getElementsByTagName(_converse.COMPOSING).length && _converse.COMPOSING ||
stanza.getElementsByTagName(_converse.PAUSED).length && _converse.PAUSED ||
stanza.getElementsByTagName(_converse.INACTIVE).length && _converse.INACTIVE ||
@ -667,7 +668,8 @@ converse.plugins.add('converse-chatboxes', {
'is_archived': !_.isNil(archive),
'is_delayed': !_.isNil(delay),
'is_spoiler': !_.isNil(spoiler),
'message': _converse.chatboxes.getMessageBody(stanza) || undefined,
'is_single_emoji': text ? u.isSingleEmoji(text) : false,
'message': text,
'msgid': stanza.getAttribute('id'),
'references': this.getReferencesFromStanza(stanza),
'subject': _.propertyOf(stanza.querySelector('subject'))('textContent'),

15
src/headless/utils/emoji.js
View File

@ -160,6 +160,14 @@ function convert (unicode) {
return twemoji.default.convert.fromCodePoint(unicode);
}
u.isSingleEmoji = function (str) {
if (!str || str.length > 2) {
return;
}
const result = _.flow(u.shortnameToUnicode, twemoji.default.parse)(str)
return result.match(/<img class="emoji" draggable="false" alt=".*?" src=".*?\.png"\/>/);
}
u.shortnameToUnicode = function (str) {
/* will output unicode from shortname
* useful for sending emojis back to mobile devices
@ -186,13 +194,8 @@ u.shortnameToUnicode = function (str) {
return str;
}
u.addEmoji = function (_converse, text) {
if (_converse.use_system_emojis) {
return u.shortnameToUnicode(text);
} else {
return twemoji.default.parse(text);
}
return u.getEmojiRenderer(_converse)(text);
}
u.getEmojisByCategory = function (_converse) {

4
src/templates/message.html
View File

@ -26,7 +26,9 @@
{[ if (o.subject) { ]}
<div class="chat-msg__subject">{{{ o.subject }}}</div>
{[ } ]}
<div class="chat-msg__text{[ if (o.is_spoiler) { ]} spoiler collapsed{[ } ]}"><!-- message gets added here via renderMessage --></div>
<div class="chat-msg__text
{[ if (o.is_single_emoji) { ]} chat-msg__text--larger{[ } ]}
{[ if (o.is_spoiler) { ]} spoiler collapsed{[ } ]}"><!-- message gets added here via renderMessage --></div>
<div class="chat-msg__media"></div>
{[ if (!o.is_me_message) { ]}</div>{[ } ]}
{[ if (o.type !== 'headline' && !o.is_me_message && o.sender === 'me') { ]}