Skip to content

C
converse.js
Commit 1d38d8af authored by JC Brand's avatar JC Brand
Browse files
Options

Use twemoji for rendering emojis

parent 6b157eed
Hide whitespace changes
Inline Side-by-side
Showing with 218 additions and 194 deletions
css/converse.css
View file @ 1d38d8af
......@@ -7709,6 +7709,11 @@ body.reset {
#conversejs .chatbox {
text-align: left;
margin: 0 0.5em; }
#conversejs .chatbox img.emoji {
height: 1.2em;
width: 1.2em;
margin: 0 .05em 0 .1em;
vertical-align: -0.1em; }
@media screen and (max-height: 450px) {
#conversejs .chatbox {
margin: 0;
......@@ -7885,8 +7890,9 @@ body.reset {
background-color: #fff;
bottom: 2rem;
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
height: auto;
margin-bottom: 0;
min-width: 20rem;
min-width: 21rem;
position: absolute;
right: 0;
top: auto;
......@@ -7899,8 +7905,11 @@ body.reset {
flex-direction: column; }
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
color: #578EA9; }
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu .emoji-picker-container {
background: white; }
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
overflow: scroll;
overflow-y: scroll;
overflow-x: hidden;
padding: 0.5em; }
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
margin-left: 0;
......@@ -7929,7 +7938,7 @@ body.reset {
justify-content: space-between; }
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li {
padding: 0.2em;
padding: 0.25em;
font-size: 20px; }
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
......@@ -8053,7 +8062,7 @@ body.reset {
#conversejs.converse-fullscreen .chat-textarea {
max-height: 15em; }
#conversejs.converse-fullscreen .emoji-picker {
height: 150px; }
height: 200px; }
#conversejs.converse-fullscreen .chatbox {
width: 100%;
height: 100%;
......@@ -9270,6 +9279,11 @@ body.reset {
#conversejs .message.chat-msg .chat-msg__text a {
word-wrap: break-word;
word-break: break-all; }
#conversejs .message.chat-msg .chat-msg__text img.emoji {
height: 1.5em;
width: 1.5em;
margin: 0 .05em 0 .1em;
vertical-align: -0.1em; }
#conversejs .message.chat-msg .chat-msg__text .emojione {
margin-bottom: -6px; }
#conversejs .message.chat-msg .chat-msg__media {
......
dist/converse.js
View file @ 1d38d8af
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/source/configuration.rst
View file @ 1d38d8af
......@@ -608,14 +608,17 @@ domain_placeholder
The placeholder text shown in the domain input on the registration form.
emojione_image_path
-------------------
emoji_image_path
----------------
* Default: ``'https://cdn.jsdelivr.net/emojione/assets/' + emojioneVersion + '/png/'``
* Default: ``'https://twemoji.maxcdn.com/2/'``
When `use_emojione`_ is set to ``true``, then this is the URL from where PNG image files for
When `use_system_emojis`_ is set to ``false``, then this is the URL from where image files for
displaying emojis will be fetched.
If you've run ``make dev``, then these files are also available in ``./node_modules/twemoji/2/``,
which means you can avoid the CDN and host them yourself if you wish.
expose_rid_and_sid
------------------
......@@ -1219,15 +1222,16 @@ Notification will be shown in the following cases:
Requires the `src/converse-notification.js` plugin.
use_emojione
------------
use_system_emojis
-----------------
* Default: ``true``
Determines whether `Emojione <https://www.emojione.com/>`_ should be used to
render emojis. If set to ``false``, then rendering support will fall back to
the operating system or browser (which might not support emoji).
Determines whether emojis should be rendered by the user's system.
Not all operating systems support (all) emojis. So alternatively you can let
Converse render the emojis with [Twemoji](https://twemoji.twitter.com/).
See also `emojione_image_path`_.
See also `emoji_image_path`_.
show_only_online_users
----------------------
......
package-lock.json
View file @ 1d38d8af
......@@ -3531,9 +3531,9 @@
}
},
"emojione": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/emojione/-/emojione-3.1.2.tgz",
"integrity": "sha1-mR4wyA20sc8V6ssldiCn7c6cbvQ=",
"version": "3.1.7",
"resolved": "https://registry.npmjs.org/emojione/-/emojione-3.1.7.tgz",
"integrity": "sha1-LTxyXGlvF5yd3jrLZVxiHulCmx4=",
"dev": true
},
"emojis-list": {
......@@ -14321,6 +14321,12 @@
"integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=",
"dev": true
},
"twemoji": {
"version": "11.0.1",
"resolved": "https://registry.npmjs.org/twemoji/-/twemoji-11.0.1.tgz",
"integrity": "sha512-Z0bRyZ1yO7cqa69oRhLZWmaLM0e9eeTugUXbnNQY3XPgRHJcSF8PKfp/dx3vHWtz9Y6o8fi3Ryjfpq4vBCeXjA==",
"dev": true
},
"type-check": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
......
sass/_chatbox.scss
View file @ 1d38d8af
......@@ -110,6 +110,15 @@
text-align: left;
margin: 0 $chat-gutter;
img {
&.emoji {
height: 1.2em;
width: 1.2em;
margin: 0 .05em 0 .1em;
vertical-align: -0.1em;
}
}
@media screen and (max-height: $mobile-landscape-height) {
margin: 0;
width: $mobile-chat-width;
......@@ -321,8 +330,9 @@
background-color: #fff;
bottom: 2rem;
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
height: auto;
margin-bottom: 0;
min-width: 20rem;
min-width: 21rem;
position: absolute;
right: 0;
top: auto;
......@@ -341,9 +351,13 @@
a {
color: $link-color;
}
.emoji-picker-container {
background: white;
}
ul {
&.emoji-picker {
overflow: scroll;
overflow-y: scroll;
overflow-x: hidden;
padding: 0.5em;
}
li {
......@@ -351,8 +365,6 @@
cursor: pointer;
list-style: none;
position: relative;
&.emoji-skintone {
}
&.insert-emoji {
padding: 0.2em;
&.picked {
......@@ -377,7 +389,6 @@
}
.emoji-toolbar {
box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.4);
.emoji-category-picker {
padding-top: 0.5em;
ul {
......@@ -390,7 +401,7 @@
.emoji-category-picker,
.emoji-skintone-picker {
li {
padding: 0.2em;
padding: 0.25em;
font-size: $font-size-huge;
&:hover {
background-color: $highlight-color;
......
sass/_messages.scss
View file @ 1d38d8af
......@@ -155,6 +155,14 @@
word-wrap: break-word;
word-break: break-all;
}
img {
&.emoji {
height: 1.5em;
width: 1.5em;
margin: 0 .05em 0 .1em;
vertical-align: -0.1em;
}
}
.emojione {
margin-bottom: -6px;
}
......
sass/_variables.scss
View file @ 1d38d8af
......@@ -148,7 +148,7 @@ $occupants-padding: 1em;
$fullpage-chat-head-height: 62px !default;
$fullpage-chat-height: 100vh;
$fullpage-chat-width: 100%;
$fullpage-emoji-picker-height: 150px !default;
$fullpage-emoji-picker-height: 200px !default;
$fullpage-max-chat-textarea-height: 15em!default;
$overlayed-chat-head-height: 55px !default;
......
src/converse-chatview.js
View file @ 1d38d8af
......@@ -5,9 +5,11 @@
// Licensed under the Mozilla Public License (MPLv2)
(function (root, factory) {
define(["converse-core",
define([
"utils/emoji",
"converse-core",
"bootstrap",
"emojione",
"twemoji",
"xss",
"templates/chatbox.html",
"templates/chatbox_head.html",
......@@ -28,9 +30,10 @@
"converse-message-view"
], factory);
}(this, function (
u,
converse,
bootstrap,
emojione,
twemoji,
xss,
tpl_chatbox,
tpl_chatbox_head,
......@@ -49,7 +52,6 @@
) {
"use strict";
const { $msg, Backbone, Promise, Strophe, _, b64_sha1, f, sizzle, moment } = converse.env;
const u = converse.env.utils;
converse.plugins.add('converse-chatview', {
/* Plugin dependencies are other plugins which might be
......@@ -73,11 +75,11 @@
{ __ } = _converse;
_converse.api.settings.update({
'emojione_image_path': emojione.imagePathPNG,
'emoji_image_path': twemoji.default.base,
'show_send_button': false,
'show_toolbar': true,
'time_format': 'HH:mm',
'use_emojione': false,
'use_system_emojis': true,
'visible_toolbar_buttons': {
'call': false,
'clear': true,
......@@ -85,8 +87,7 @@
'spoiler': true
},
});
emojione.imagePathPNG = _converse.emojione_image_path;
emojione.ascii = true;
twemoji.default.base = _converse.emoji_image_path;
function onWindowStateChanged (data) {
if (_converse.chatboxviews) {
......@@ -122,8 +123,8 @@
_.extend(
this.model.toJSON(), {
'_': _,
'transform': _converse.use_emojione ? emojione.shortnameToImage : emojione.shortnameToUnicode,
'emojis_by_category': u.getEmojisByCategory(_converse, emojione),
'transform': u.getEmojiRenderer(_converse),
'emojis_by_category': u.getEmojisByCategory(_converse),
'toned_emojis': u.getTonedEmojis(_converse),
'skintones': ['tone1', 'tone2', 'tone3', 'tone4', 'tone5'],
'shouldBeHidden': this.shouldBeHidden
......
src/converse-message-view.js
View file @ 1d38d8af
......@@ -6,9 +6,9 @@
(function (root, factory) {
define([
"utils/emoji",
"converse-core",
"xss",
"emojione",
"filesize",
"templates/csn.html",
"templates/file_progress.html",
......@@ -17,9 +17,9 @@
"templates/message_versions_modal.html",
], factory);
}(this, function (
u,
converse,
xss,
emojione,
filesize,
tpl_csn,
tpl_file_progress,
......@@ -29,7 +29,6 @@
) {
"use strict";
const { Backbone, _, moment } = converse.env;
const u = converse.env.utils;
converse.plugins.add('converse-message-view', {
......@@ -171,7 +170,7 @@
_.partial(u.addMentionsMarkup, _, this.model.get('references'), this.model.collection.chatbox),
u.addHyperlinks,
u.renderNewLines,
_.partial(u.addEmoji, _converse, emojione, _)
_.partial(u.addEmoji, _converse, _)
)(text);
}
u.renderImageURLs(_converse, msg_content).then(() => {
......
src/utils/core.js
View file @ 1d38d8af
......@@ -730,72 +730,6 @@
return frag
};
u.addEmoji = function (_converse, emojione, text) {
if (_converse.use_emojione) {
return emojione.toImage(text);
} else {
return emojione.shortnameToUnicode(text);
}
}
u.getEmojisByCategory = function (_converse, emojione) {
/* Return a dict of emojis with the categories as keys and
* lists of emojis in that category as values.
*/
if (_.isUndefined(_converse.emojis_by_category)) {
const emojis = _.values(_.mapValues(emojione.emojioneList, function (value, key, o) {
value._shortname = key;
return value
}));
const tones = [':tone1:', ':tone2:', ':tone3:', ':tone4:', ':tone5:'];
const excluded = [':kiss_ww:', ':kiss_mm:', ':kiss_woman_man:'];
const excluded_substrings = [
':woman', ':man', ':women_', ':men_', '_man_', '_woman_', '_woman:', '_man:'
];
const excluded_categories = ['modifier', 'regional'];
const categories = _.difference(
_.uniq(_.map(emojis, _.partial(_.get, _, 'category'))),
excluded_categories
);
const emojis_by_category = {};
_.forEach(categories, (cat) => {
let list = _.sortBy(_.filter(emojis, ['category', cat]), ['uc_base']);
list = _.filter(
list,
(item) => !_.includes(_.concat(tones, excluded), item._shortname) &&
!_.some(excluded_substrings, _.partial(_.includes, item._shortname))
);
if (cat === 'people') {
const idx = _.findIndex(list, ['uc_base', '1f600']);
list = _.union(_.slice(list, idx), _.slice(list, 0, idx+1));
} else if (cat === 'activity') {
list = _.union(_.slice(list, 27-1), _.slice(list, 0, 27));
} else if (cat === 'objects') {
list = _.union(_.slice(list, 24-1), _.slice(list, 0, 24));
} else if (cat === 'travel') {
list = _.union(_.slice(list, 17-1), _.slice(list, 0, 17));
} else if (cat === 'symbols') {
list = _.union(_.slice(list, 60-1), _.slice(list, 0, 60));
}
emojis_by_category[cat] = list;
});
_converse.emojis_by_category = emojis_by_category;
}
return _converse.emojis_by_category;
};
u.getTonedEmojis = function (_converse) {
_converse.toned_emojis = _.uniq(
_.map(
_.filter(
u.getEmojisByCategory(_converse).people,
(person) => _.includes(person._shortname, '_tone')
),
(person) => person._shortname.replace(/_tone[1-5]/, '')
));
return _converse.toned_emojis;
};
u.isPersistableModel = function (model) {
return model.collection && model.collection.browserStorage;
};
......
webpack.config.js
View file @ 1d38d8af
......@@ -91,12 +91,10 @@ const config = {
"emojione": path.resolve(__dirname, "node_modules/emojione/lib/js/emojione"),
"es6-promise": path.resolve(__dirname, "node_modules/es6-promise/dist/es6-promise.auto"),
"filesize": path.resolve(__dirname, "node_modules/filesize/lib/filesize"),
"utils/form": path.resolve(__dirname, "src/utils/form"),
"jed": path.resolve(__dirname, "node_modules/jed/jed"),
"jquery": path.resolve(__dirname, "src/jquery-stub"),
"lodash": path.resolve(__dirname, "node_modules/lodash/lodash"),
"lodash.converter": path.resolve(__dirname, "3rdparty/lodash.fp"),
"utils/muc": path.resolve(__dirname, "src/utils/muc"),
"pluggable": path.resolve(__dirname, "node_modules/pluggable.js/dist/pluggable"),
"punycode": path.resolve(__dirname, "node_modules/urijs/src/punycode"),
"sizzle": path.resolve(__dirname, "node_modules/sizzle/dist/sizzle"),
......@@ -109,6 +107,9 @@ const config = {
"snabbdom-style": path.resolve(__dirname, "node_modules/snabbdom/dist/snabbdom-style"),
"strophe": path.resolve(__dirname, "node_modules/strophe.js/strophe"),
"strophe.ping": path.resolve(__dirname, "node_modules/strophejs-plugin-ping/strophe.ping"),
"utils/emoji": path.resolve(__dirname, "src/utils/emoji"),
"utils/form": path.resolve(__dirname, "src/utils/form"),
"utils/muc": path.resolve(__dirname, "src/utils/muc"),
"strophe.rsm": path.resolve(__dirname, "node_modules/strophejs-plugin-rsm/strophe.rsm"),
"tovnode": path.resolve(__dirname, "node_modules/snabbdom/dist/tovnode"),
"underscore": path.resolve(__dirname, "src/underscore-shim"),
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7