From 5d99076f627c934360f88d1ba9c75cd5abfbaf88 Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Sat, 24 Jun 2017 12:28:20 +0200
Subject: [PATCH] Filter out some emojis which don't have native support yet

---
 css/converse.css              |  3 +++
 css/inverse.css               |  3 +++
 sass/_chatbox.scss            |  5 +++++
 sass/converse/_variables.scss |  1 +
 src/templates/emojis.html     | 16 ++++++++++++++++
 src/utils.js                  |  7 ++++---
 6 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 src/templates/emojis.html

diff --git a/css/converse.css b/css/converse.css
index d26219239..f4d05e5ca 100644
--- a/css/converse.css
+++ b/css/converse.css
@@ -1786,6 +1786,9 @@
             font-size: 14px;
             padding: 5px;
             z-index: 98; }
+            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li.emoji a,
+            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li.emoji a {
+              font-size: 20px; }
           #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover,
           #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover {
             background-color: #DCF9F6; }
diff --git a/css/inverse.css b/css/inverse.css
index a6d848c9c..3b7238c2c 100644
--- a/css/inverse.css
+++ b/css/inverse.css
@@ -1832,6 +1832,9 @@ body {
             font-size: 16px;
             padding: 5px;
             z-index: 98; }
+            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li.emoji a,
+            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li.emoji a {
+              font-size: 26px; }
           #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover,
           #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover {
             background-color: #DCF9F6; }
diff --git a/sass/_chatbox.scss b/sass/_chatbox.scss
index 858c57bd4..8d2945c6c 100644
--- a/sass/_chatbox.scss
+++ b/sass/_chatbox.scss
@@ -355,6 +355,11 @@
                             font-size: $font-size;
                             padding: 5px;
                             z-index: 98;
+                            &.emoji {
+                                a {
+                                    font-size: $font-size-huge;
+                                }
+                            }
                         }
                         li:hover {
                             background-color: $highlight-color;
diff --git a/sass/converse/_variables.scss b/sass/converse/_variables.scss
index e652d07e9..539538675 100644
--- a/sass/converse/_variables.scss
+++ b/sass/converse/_variables.scss
@@ -94,6 +94,7 @@ $font-size-tiny: 10px !default;
 $font-size-small: 12px !default;
 $font-size: 14px !default;
 $font-size-large: 16px !default;
+$font-size-huge: 20px !default;
 $legend-font-size: 16px !default;
 
 $toolbar-height: 25px !default;
diff --git a/src/templates/emojis.html b/src/templates/emojis.html
new file mode 100644
index 000000000..0da308e25
--- /dev/null
+++ b/src/templates/emojis.html
@@ -0,0 +1,16 @@
+<ul class="emoji-category-picker">
+    {[ _.forEach(emojis_by_category, function (obj, category) { ]}
+        <li data-category="{{{category}}}" class="emoji-category {[ if (current_category === category) { ]} picked {[ } ]}">
+            <a href="#" data-category="{{{category}}}"> {{ emojione.shortnameToUnicode(emojis_by_category[category][0]._shortname) }} </a>
+        </li>
+    {[ }); ]}
+</ul>
+{[ _.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" data-emoticon="{{{emoji._shortname}}}">
+                <a href="#" data-emoticon="{{{emoji._shortname}}}"> {{ emojione.shortnameToUnicode(emoji._shortname) }}  </a>
+        </li>
+        {[ }); ]}
+    </ul>
+{[ }); ]}
diff --git a/src/utils.js b/src/utils.js
index 2c02e0d7d..fa92d84ae 100755
--- a/src/utils.js
+++ b/src/utils.js
@@ -517,14 +517,15 @@
                 return value
             }));
             var tones = [':tone1:', ':tone2:', ':tone3:', ':tone4:', ':tone5:'];
+            var excluded = [':kiss_ww:', ':kiss_mm:', ':kiss_woman_man:'];
+            var excluded_substrings = [':woman', ':man', ':women_', ':men_', '_man_', '_woman_', '_woman:', '_man:'];
             var categories = _.uniq(_.map(emojis, _.partial(_.get, _, 'category')));
             var emojis_by_category = {};
             _.forEach(categories, function (cat) {
                 var list = _.sortBy(_.filter(emojis, ['category', cat]), ['uc_base']);
                 list = _.filter(list, function (item) {
-                    return !_.includes(tones, item._shortname) &&
-                        !item._shortname.startsWith(':woman_') &&
-                            !item._shortname.startsWith(':man_');
+                    return !_.includes(_.concat(tones, excluded), item._shortname) &&
+                        !_.some(excluded_substrings, _.partial(_.includes, item._shortname));
                 });
                 if (cat === 'people') {
                     var idx = _.findIndex(list, ['uc_base', '1f600']);