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

src/converse-chatview.js

@@ -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();
+                    if (this.model.get('current_skintone') === skintone) {
+                        this.model.set({'current_skintone': ''});
+                    } else {
                         this.model.set({'current_skintone': skintone});
+                    }
                 },
 
                 chooseCategory (ev) {

src/templates/emojis.html

 {[ _.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>

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;
-        }
-        return this.emojis_by_category;
+            _converse.emojis_by_category = 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;