emoji: Show only one skin-tone at a time (including the "neutral" one)

This commit is contained in:
JC Brand 2017-07-16 12:14:56 +02:00
parent 3ebe41384d
commit f8c6467feb
3 changed files with 44 additions and 11 deletions

View File

@ -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) {

View File

@ -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>

View File

@ -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;