emoji: Show only one skin-tone at a time (including the "neutral" one)
This commit is contained in:
parent
3ebe41384d
commit
f8c6467feb
|
@ -134,14 +134,15 @@
|
|||
this.setScrollPosition = _.debounce(this.setScrollPosition, 50);
|
||||
},
|
||||
|
||||
render: function () {
|
||||
var emojis_by_category = utils.marshallEmojis(emojione);
|
||||
render () {
|
||||
var emojis_html = tpl_emojis(
|
||||
_.extend(
|
||||
this.model.toJSON(), {
|
||||
'transform': _converse.use_emojione ? emojione.shortnameToImage : emojione.shortnameToUnicode,
|
||||
'emojis_by_category': emojis_by_category,
|
||||
'emojis_by_category': utils.getEmojisByCategory(_converse, emojione),
|
||||
'toned_emojis': utils.getTonedEmojis(_converse),
|
||||
'skintones': ['tone1', 'tone2', 'tone3', 'tone4', 'tone5'],
|
||||
'shouldBeHidden': this.shouldBeHidden
|
||||
}
|
||||
));
|
||||
this.el.innerHTML = emojis_html;
|
||||
|
@ -155,6 +156,23 @@
|
|||
return this;
|
||||
},
|
||||
|
||||
shouldBeHidden (shortname, current_skintone, toned_emojis) {
|
||||
/* Helper method for the template which decides whether an
|
||||
* emoji should be hidden, based on which skin tone is
|
||||
* currently being applied.
|
||||
*/
|
||||
if (_.includes(shortname, '_tone')) {
|
||||
if (!current_skintone || !_.includes(shortname, current_skintone)) {
|
||||
return true;
|
||||
}
|
||||
} else {
|
||||
if (current_skintone && _.includes(toned_emojis, shortname)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
restoreScrollPosition () {
|
||||
const current_picker = _.difference(
|
||||
this.el.querySelectorAll('.emoji-picker'),
|
||||
|
@ -173,7 +191,11 @@
|
|||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
const skintone = ev.target.parentElement.getAttribute("data-skintone").trim();
|
||||
this.model.set({'current_skintone': skintone});
|
||||
if (this.model.get('current_skintone') === skintone) {
|
||||
this.model.set({'current_skintone': ''});
|
||||
} else {
|
||||
this.model.set({'current_skintone': skintone});
|
||||
}
|
||||
},
|
||||
|
||||
chooseCategory (ev) {
|
||||
|
|
|
@ -1,8 +1,7 @@
|
|||
{[ _.forEach(emojis_by_category, function (obj, category) { ]}
|
||||
<ul class="emoji-picker emoji-picker-{{{category}}} {[ if (current_category !== category) { ]} hidden {[ } ]}">
|
||||
{[ _.forEach(emojis_by_category[category], function (emoji) { ]}
|
||||
<li class="emoji insert-emoji
|
||||
{[ if (emoji._shortname.indexOf('_tone') !== -1 && (!current_skintone || emoji._shortname.indexOf(current_skintone) === -1)) { ]} hidden {[ }; ]}"
|
||||
<li class="emoji insert-emoji {[ if (shouldBeHidden(emoji._shortname, current_skintone, toned_emojis)) { ]} hidden {[ }; ]}"
|
||||
data-emoji="{{{emoji._shortname}}}">
|
||||
<a href="#" data-emoji="{{{emoji._shortname}}}"> {{ transform(emoji._shortname) }} </a>
|
||||
</li>
|
||||
|
|
22
src/utils.js
22
src/utils.js
|
@ -616,11 +616,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
utils.marshallEmojis = function (emojione) {
|
||||
utils.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(this.emojis_by_category)) {
|
||||
if (_.isUndefined(_converse.emojis_by_category)) {
|
||||
const emojis = _.values(_.mapValues(emojione.emojioneList, function (value, key, o) {
|
||||
value._shortname = key;
|
||||
return value
|
||||
|
@ -657,10 +657,22 @@
|
|||
}
|
||||
emojis_by_category[cat] = list;
|
||||
});
|
||||
this.emojis_by_category = emojis_by_category;
|
||||
_converse.emojis_by_category = emojis_by_category;
|
||||
}
|
||||
return this.emojis_by_category;
|
||||
}
|
||||
return _converse.emojis_by_category;
|
||||
};
|
||||
|
||||
utils.getTonedEmojis = function (_converse) {
|
||||
_converse.toned_emojis = _.uniq(
|
||||
_.map(
|
||||
_.filter(
|
||||
utils.getEmojisByCategory(_converse).people,
|
||||
(person) => _.includes(person._shortname, '_tone')
|
||||
),
|
||||
(person) => person._shortname.replace(/_tone[1-5]/, '')
|
||||
));
|
||||
return _converse.toned_emojis;
|
||||
};
|
||||
|
||||
utils.isPersistableModel = function (model) {
|
||||
return model.collection && model.collection.browserStorage;
|
||||
|
|
Loading…
Reference in New Issue
Block a user