add emoji selector for reactions

app/widgets/Chat/chat.css

@@ -267,15 +267,23 @@ main:not(.enabled) #chat_widget {
     animation: fadein 1s;
 }
 
-table.emojis td {
-    width: 10%;
+#emojisearchbar + .emojis {
+    max-width: 80%;
+    padding: 0 2rem;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;    
+}
+
+#emojisearchbar + .emojis img {
     text-align: center;
-    padding: 1rem 0;
+    padding: 1rem 1.5rem;
     font-size: 0;
 }
 
 #chat_widget .primary_action:hover,
-table.emojis td:hover {
+#emojisearchbar + .emojis img:hover {
     cursor: pointer;
     background-color: rgba(var(--movim-font), 0.05);
     border-radius: 0.5rem;

app/widgets/Chat/chat.js

@@ -276,7 +276,7 @@ var Chat = {
 
         textarea.oninput = function() {
             MovimUtils.textareaAutoheight(this);
-            Chat.checkEmojis(this);
+            Chat.checkEmojis(this.value);
             Chat.scrollRestore();
         }
 
@@ -290,16 +290,22 @@ var Chat = {
 
         Chat.autocompleteList = null;
     },
-    checkEmojis: function(textarea)
+    searchEmoji(value) {
+        this.checkEmojis(value, '#emojisearchbar + .emojis');
+    },
+    checkEmojis: function(value, listSelector)
     {
-        var emojisList = document.querySelector('.chat_box .emojis');
+        if(typeof(listSelector) === 'undefined') {
+            listSelector = '.chat_box .emojis';
+        }
+        var emojisList = document.querySelector(listSelector);
         emojisList.innerHTML = '';
 
-        if (textarea.value.lastIndexOf(':') > -1 && textarea.value.length > textarea.value.lastIndexOf(':') + 2) {
+        if (value.lastIndexOf(':') > -1 && value.length > value.lastIndexOf(':') + 2) {
             var first = true;
 
             Object.keys(emojis).filter(key => key.indexOf(
-                    textarea.value.substr(textarea.value.lastIndexOf(':') + 1)
+                    value.substr(value.lastIndexOf(':') + 1)
                 ) > -1)
             .slice(0, 40)
             .forEach(found => {

app/widgets/Stickers/_stickers_emojis.tpl

@@ -1,180 +1,173 @@
-<table class="emojis">
-    <tbody>
-        <tr>
-            <td data-emoji="😀"><img class="emoji large" src="{$c->getSmileyPath('1f600')}"></td>
-            <td data-emoji="😁"><img class="emoji large" src="{$c->getSmileyPath('1f601')}"></td>
-            <td data-emoji="😂"><img class="emoji large" src="{$c->getSmileyPath('1f602')}"></td>
-            <td data-emoji="😃"><img class="emoji large" src="{$c->getSmileyPath('1f603')}"></td>
-            <td data-emoji="😄"><img class="emoji large" src="{$c->getSmileyPath('1f604')}"></td>
-            <td data-emoji="😅"><img class="emoji large" src="{$c->getSmileyPath('1f605')}"></td>
-        </tr>
-        <tr>
-            <td data-emoji="🤭"><img class="emoji large" src="{$c->getSmileyPath('1f92d')}"></td>
-            <td data-emoji="🧐"><img class="emoji large" src="{$c->getSmileyPath('1f9d0')}"></td>
-            <td data-emoji="🤯"><img class="emoji large" src="{$c->getSmileyPath('1f92f')}"></td>
-            <td data-emoji="🤑"><img class="emoji large" src="{$c->getSmileyPath('1f911')}"></td>
-            <td data-emoji="🤤"><img class="emoji large" src="{$c->getSmileyPath('1f924')}"></td>
-            <td data-emoji="🙄"><img class="emoji large" src="{$c->getSmileyPath('1f644')}"></td>
-        </tr>
-        <tr>
-            <td data-emoji="🤔"><img class="emoji large" src="{$c->getSmileyPath('1f914')}"></td>
-            <td data-emoji="🤗"><img class="emoji large" src="{$c->getSmileyPath('1f917')}"></td>
-            <td data-emoji="🤩"><img class="emoji large" src="{$c->getSmileyPath('1f929')}"></td>
-            <td data-emoji="🤨"><img class="emoji large" src="{$c->getSmileyPath('1f928')}"></td>
-            <td data-emoji="🤪"><img class="emoji large" src="{$c->getSmileyPath('1f92a')}"></td>
-            <td data-emoji="🤢"><img class="emoji large" src="{$c->getSmileyPath('1f922')}"></td>
-        </tr>
-        <tr>
-            <td data-emoji="😆"><img class="emoji large" src="{$c->getSmileyPath('1f606')}"></td>
-            <td data-emoji="😇"><img class="emoji large" src="{$c->getSmileyPath('1f607')}"></td>
-            <td data-emoji="😈"><img class="emoji large" src="{$c->getSmileyPath('1f608')}"></td>
-            <td data-emoji="😉"><img class="emoji large" src="{$c->getSmileyPath('1f609')}"></td>
-            <td data-emoji="😊"><img class="emoji large" src="{$c->getSmileyPath('1f60a')}"></td>
-            <td data-emoji="😋"><img class="emoji large" src="{$c->getSmileyPath('1f60b')}"></td>
-        </tr>
-        <tr>
-            <td data-emoji="😌"><img class="emoji large" src="{$c->getSmileyPath('1f60c')}"></td>
-            <td data-emoji="😍"><img class="emoji large" src="{$c->getSmileyPath('1f60d')}"></td>
-            <td data-emoji="😎"><img class="emoji large" src="{$c->getSmileyPath('1f60e')}"></td>
-            <td data-emoji="😏"><img class="emoji large" src="{$c->getSmileyPath('1f60f')}"></td>
-            <td data-emoji="😐"><img class="emoji large" src="{$c->getSmileyPath('1f610')}"></td>
-            <td data-emoji="😑"><img class="emoji large" src="{$c->getSmileyPath('1f611')}"></td>
-        </tr>
-        <tr>
-            <td data-emoji="😒"><img class="emoji large" src="{$c->getSmileyPath('1f612')}"></td>
-            <td data-emoji="😓"><img class="emoji large" src="{$c->getSmileyPath('1f613')}"></td>
-            <td data-emoji="😔"><img class="emoji large" src="{$c->getSmileyPath('1f614')}"></td>
-            <td data-emoji="😕"><img class="emoji large" src="{$c->getSmileyPath('1f615')}"></td>
-            <td data-emoji="😖"><img class="emoji large" src="{$c->getSmileyPath('1f616')}"></td>
-            <td data-emoji="😗"><img class="emoji large" src="{$c->getSmileyPath('1f617')}"></td>
-        </tr>
-        <tr>
-            <td data-emoji="😘"><img class="emoji large" src="{$c->getSmileyPath('1f618')}"></td>
-            <td data-emoji="😙"><img class="emoji large" src="{$c->getSmileyPath('1f619')}"></td>
-            <td data-emoji="😚"><img class="emoji large" src="{$c->getSmileyPath('1f61a')}"></td>
-            <td data-emoji="😛"><img class="emoji large" src="{$c->getSmileyPath('1f61b')}"></td>
-            <td data-emoji="😜"><img class="emoji large" src="{$c->getSmileyPath('1f61c')}"></td>
-            <td data-emoji="😝"><img class="emoji large" src="{$c->getSmileyPath('1f61d')}"></td>
-        </tr>
-        <tr>
-            <td data-emoji="😞"><img class="emoji large" src="{$c->getSmileyPath('1f61e')}"></td>
-            <td data-emoji="😟"><img class="emoji large" src="{$c->getSmileyPath('1f61f')}"></td>
-            <td data-emoji="😠"><img class="emoji large" src="{$c->getSmileyPath('1f620')}"></td>
-            <td data-emoji="😡"><img class="emoji large" src="{$c->getSmileyPath('1f621')}"></td>
-            <td data-emoji="😢"><img class="emoji large" src="{$c->getSmileyPath('1f622')}"></td>
-            <td data-emoji="😣"><img class="emoji large" src="{$c->getSmileyPath('1f623')}"></td>
-        </tr>
-        <tr>
-            <td data-emoji="😤"><img class="emoji large" src="{$c->getSmileyPath('1f624')}"></td>
-            <td data-emoji="😥"><img class="emoji large" src="{$c->getSmileyPath('1f625')}"></td>
-            <td data-emoji="😦"><img class="emoji large" src="{$c->getSmileyPath('1f626')}"></td>
-            <td data-emoji="😧"><img class="emoji large" src="{$c->getSmileyPath('1f627')}"></td>
-            <td data-emoji="😨"><img class="emoji large" src="{$c->getSmileyPath('1f628')}"></td>
-            <td data-emoji="😩"><img class="emoji large" src="{$c->getSmileyPath('1f629')}"></td>
-        </tr>
-        <tr>
-            <td data-emoji="😪"><img class="emoji large" src="{$c->getSmileyPath('1f62a')}"></td>
-            <td data-emoji="😫"><img class="emoji large" src="{$c->getSmileyPath('1f62b')}"></td>
-            <td data-emoji="😬"><img class="emoji large" src="{$c->getSmileyPath('1f62c')}"></td>
-            <td data-emoji="😭"><img class="emoji large" src="{$c->getSmileyPath('1f62d')}"></td>
-            <td data-emoji="😮"><img class="emoji large" src="{$c->getSmileyPath('1f62e')}"></td>
-            <td data-emoji="😯"><img class="emoji large" src="{$c->getSmileyPath('1f62f')}"></td>
-        </tr>
-        <tr>
-            <td data-emoji="😰"><img class="emoji large" src="{$c->getSmileyPath('1f630')}"></td>
-            <td data-emoji="😱"><img class="emoji large" src="{$c->getSmileyPath('1f631')}"></td>
-            <td data-emoji="😲"><img class="emoji large" src="{$c->getSmileyPath('1f632')}"></td>
-            <td data-emoji="😳"><img class="emoji large" src="{$c->getSmileyPath('1f633')}"></td>
-            <td data-emoji="😴"><img class="emoji large" src="{$c->getSmileyPath('1f634')}"></td>
-            <td data-emoji="😵"><img class="emoji large" src="{$c->getSmileyPath('1f635')}"></td>
-        </tr>
-        <tr>
-            <td data-emoji="👊"><img class="emoji large" src="{$c->getSmileyPath('1f44a')}"></td>
-            <td data-emoji="👋"><img class="emoji large" src="{$c->getSmileyPath('1f44b')}"></td>
-            <td data-emoji="👌"><img class="emoji large" src="{$c->getSmileyPath('1f44c')}"></td>
-            <td data-emoji="👍"><img class="emoji large" src="{$c->getSmileyPath('1f44d')}"></td>
-            <td data-emoji="👎"><img class="emoji large" src="{$c->getSmileyPath('1f44e')}"></td>
-            <td data-emoji="👏"><img class="emoji large" src="{$c->getSmileyPath('1f44f')}"></td>
-        </tr>
-        <tr>
-            <td data-emoji="🎉"><img class="emoji large" src="{$c->getSmileyPath('1f389')}"></td>
-            <td data-emoji="🎁"><img class="emoji large" src="{$c->getSmileyPath('1f381')}"></td>
-            <td data-emoji="📦"><img class="emoji large" src="{$c->getSmileyPath('1f4e6')}"></td>
-            <td data-emoji="📅"><img class="emoji large" src="{$c->getSmileyPath('1f4c5')}"></td>
-            <td data-emoji="🔒"><img class="emoji large" src="{$c->getSmileyPath('1f512')}"></td>
-            <td data-emoji="🏠"><img class="emoji large" src="{$c->getSmileyPath('1f3e0')}"></td>
-        </tr>
-        <tr>
-            <td data-emoji="🍌"><img alt=":banana:" class="emoji large" src="{$c->getSmileyPath('1f34c')}"></td>
-            <td data-emoji="🍎"><img alt=":apple:" class="emoji large" src="{$c->getSmileyPath('1f34e')}"></td>
-            <td data-emoji="🌼"><img alt=":blossom:" class="emoji large" src="{$c->getSmileyPath('1f33c')}"></td>
-            <td data-emoji="🌵"><img alt=":cactus:" class="emoji large" src="{$c->getSmileyPath('1f335')}"></td>
-            <td data-emoji="🌹"><img alt=":rose:" class="emoji large" src="{$c->getSmileyPath('1f339')}"></td>
-            <td data-emoji="🍄"><img alt=":mushroom:" class="emoji large" src="{$c->getSmileyPath('1f344')}"></td>
-        </tr>
-        <tr>
-            <td data-emoji="🍦"><img class="emoji large" src="{$c->getSmileyPath('1f366')}"></td>
-            <td data-emoji="🍩"><img class="emoji large" src="{$c->getSmileyPath('1f369')}"></td>
-            <td data-emoji="🍪"><img class="emoji large" src="{$c->getSmileyPath('1f36a')}"></td>
-            <td data-emoji="🍫"><img class="emoji large" src="{$c->getSmileyPath('1f36b')}"></td>
-            <td data-emoji="🍰"><img class="emoji large" src="{$c->getSmileyPath('1f370')}"></td>
-            <td data-emoji="🍺"><img class="emoji large" src="{$c->getSmileyPath('1f37a')}"></td>
-        </tr>
-        <tr>
-            <td data-emoji="🍔"><img alt=":hamburger:" class="emoji large" src="{$c->getSmileyPath('1f354')}"></td>
-            <td data-emoji="🍕"><img alt=":pizza:" class="emoji large" src="{$c->getSmileyPath('1f355')}"></td>
-            <td data-emoji="🍗"><img alt=":poultry_leg:" class="emoji large" src="{$c->getSmileyPath('1f357')}"></td>
-            <td data-emoji="🍚"><img alt=":rice:" class="emoji large" src="{$c->getSmileyPath('1f35a')}"></td>
-            <td data-emoji="🍜"><img alt=":ramen:" class="emoji large" src="{$c->getSmileyPath('1f35c')}"></td>
-            <td data-emoji="🍣"><img alt=":sushi:" class="emoji large" src="{$c->getSmileyPath('1f363')}"></td>
-        </tr>
-        <tr>
-            <td data-emoji="🛀"><img alt=":bath:" class="emoji large" src="{$c->getSmileyPath('1f6c0')}"></td>
-            <td data-emoji="🎧"><img alt=":headphones:" class="emoji large" src="{$c->getSmileyPath('1f3a7')}"></td>
-            <td data-emoji="🎮"><img alt=":video_game:" class="emoji large" src="{$c->getSmileyPath('1f3ae')}"></td>
-            <td data-emoji="🎫"><img alt=":ticket:" class="emoji large" src="{$c->getSmileyPath('1f3ab')}"></td>
-            <td data-emoji="💼"><img alt=":briefcase:" class="emoji large" src="{$c->getSmileyPath('1f4bc')}"></td>
-            <td data-emoji="🎒"><img alt=":school_satchel:" class="emoji large" src="{$c->getSmileyPath('1f392')}"></td>
-        </tr>
-        <tr>
-            <td data-emoji="💡"><img alt=":bulb:" class="emoji large" src="{$c->getSmileyPath('1f4a1')}"></td>
-            <td data-emoji="📞"><img alt=":telephone_receiver:" class="emoji large" src="{$c->getSmileyPath('1f4de')}"></td>
-            <td data-emoji="🔥"><img alt=":fire:" class="emoji large" src="{$c->getSmileyPath('1f525')}"></td>
-            <td data-emoji="🕐"><img alt=":clock1:" class="emoji large" src="{$c->getSmileyPath('1f550')}"></td>
-            <td data-emoji="✉"><img alt=":email:" class="emoji large" src="{$c->getSmileyPath('2709')}"></td>
-            <td data-emoji="✏"><img alt=":pencil2:" class="emoji large" src="{$c->getSmileyPath('270f')}"></td>
-        </tr>
-        <tr>
-            <td data-emoji="💋"><img alt=":kiss:" class="emoji large" src="{$c->getSmileyPath('1f48b')}"></td>
-            <td data-emoji="♥"><img alt=":hearts:" class="emoji large" src="{$c->getSmileyPath('2665')}"></td>
-            <td data-emoji="💊"><img alt=":pill:" class="emoji large" src="{$c->getSmileyPath('1f48a')}"></td>
-            <td data-emoji="💩"><img alt=":hankey:" class="emoji large" src="{$c->getSmileyPath('1f4a9')}"></td>
-            <td data-emoji="☕"><img alt=":coffee:" class="emoji large" src="{$c->getSmileyPath('2615')}"></td>
-            <td data-emoji="⏰"><img alt=":alarm_clock:" class="emoji large" src="{$c->getSmileyPath('23f0')}"></td>
-        </tr>
-        <tr>
-            <td data-emoji="🚈"><img class="emoji large" src="{$c->getSmileyPath('1f688')}"></td>
-            <td data-emoji="🚋"><img class="emoji large" src="{$c->getSmileyPath('1f68b')}"></td>
-            <td data-emoji="🚌"><img class="emoji large" src="{$c->getSmileyPath('1f68c')}"></td>
-            <td data-emoji="🚐"><img class="emoji large" src="{$c->getSmileyPath('1f690')}"></td>
-            <td data-emoji="🚕"><img class="emoji large" src="{$c->getSmileyPath('1f695')}"></td>
-            <td data-emoji="🚗"><img class="emoji large" src="{$c->getSmileyPath('1f697')}"></td>
-        </tr>
-        <tr>
-            <td data-emoji="🐰"><img alt=":rabbit:" class="emoji large" src="{$c->getSmileyPath('1f430')}"></td>
-            <td data-emoji="🐨"><img alt=":koala:" class="emoji large" src="{$c->getSmileyPath('1f428')}"></td>
-            <td data-emoji="🐮"><img alt=":cow:" class="emoji large" src="{$c->getSmileyPath('1f42e')}"></td>
-            <td data-emoji="🦊"><img alt=":fox:" class="emoji large" src="{$c->getSmileyPath('1f98a')}"></td>
-            <td data-emoji="🐺"><img alt=":wolf:" class="emoji large" src="{$c->getSmileyPath('1f43a')}"></td>
-            <td data-emoji="🦁"><img alt=":lion:" class="emoji large" src="{$c->getSmileyPath('1f981')}"></td>
-        </tr>
-        <tr>
-            <td data-emoji="🐷"><img alt=":pig:" class="emoji large" src="{$c->getSmileyPath('1f437')}"></td>
-            <td data-emoji="🐵"><img alt=":monkey_face:" class="emoji large" src="{$c->getSmileyPath('1f435')}"></td>
-            <td data-emoji="🐶"><img alt=":dog:" class="emoji large" src="{$c->getSmileyPath('1f436')}"></td>
-            <td data-emoji="🐸"><img alt=":frog:" class="emoji large" src="{$c->getSmileyPath('1f438')}"></td>
-            <td data-emoji="🐹"><img alt=":hamster:" class="emoji large" src="{$c->getSmileyPath('1f439')}"></td>
-            <td data-emoji="🐻"><img alt=":bear:" class="emoji large" src="{$c->getSmileyPath('1f43b')}"></td>
-        </tr>
-    </tbody>
-</table>
+<div id="emojisearchbar">
+    <ul class="list fill">
+        <li>
+            <span class="primary icon gray">
+                <i class="material-icons">search</i>
+            </span>
+            <form name="search" onsubmit="return false;">
+                <div>
+                    <input name="keyword" autocomplete="off"
+                        title="{$c->__('message.emoji_help')}"
+                        placeholder="{$c->__('message.emoji_help')}"
+                        oninput="Chat.searchEmoji(this.value)"
+                        type="text">
+                </div>
+            </form>
+        </li>
+    </ul>
+</div>
+<div class="emojis">
+    <img data-emoji="😀" class="emoji large" src="{$c->getSmileyPath('1f600')}">
+    <img data-emoji="😁" class="emoji large" src="{$c->getSmileyPath('1f601')}">
+    <img data-emoji="😂" class="emoji large" src="{$c->getSmileyPath('1f602')}">
+    <img data-emoji="😃" class="emoji large" src="{$c->getSmileyPath('1f603')}">
+    <img data-emoji="😄" class="emoji large" src="{$c->getSmileyPath('1f604')}">
+    <img data-emoji="😅" class="emoji large" src="{$c->getSmileyPath('1f605')}">
+
+    <img data-emoji="🤭" class="emoji large" src="{$c->getSmileyPath('1f92d')}">
+    <img data-emoji="🧐" class="emoji large" src="{$c->getSmileyPath('1f9d0')}">
+    <img data-emoji="🤯" class="emoji large" src="{$c->getSmileyPath('1f92f')}">
+    <img data-emoji="🤑" class="emoji large" src="{$c->getSmileyPath('1f911')}">
+    <img data-emoji="🤤" class="emoji large" src="{$c->getSmileyPath('1f924')}">
+    <img data-emoji="🙄" class="emoji large" src="{$c->getSmileyPath('1f644')}">
+
+    <img data-emoji="🤔" class="emoji large" src="{$c->getSmileyPath('1f914')}">
+    <img data-emoji="🤗" class="emoji large" src="{$c->getSmileyPath('1f917')}">
+    <img data-emoji="🤩" class="emoji large" src="{$c->getSmileyPath('1f929')}">
+    <img data-emoji="🤨" class="emoji large" src="{$c->getSmileyPath('1f928')}">
+    <img data-emoji="🤪" class="emoji large" src="{$c->getSmileyPath('1f92a')}">
+    <img data-emoji="🤢" class="emoji large" src="{$c->getSmileyPath('1f922')}">
+
+    <img data-emoji="😆" class="emoji large" src="{$c->getSmileyPath('1f606')}">
+    <img data-emoji="😇" class="emoji large" src="{$c->getSmileyPath('1f607')}">
+    <img data-emoji="😈" class="emoji large" src="{$c->getSmileyPath('1f608')}">
+    <img data-emoji="😉" class="emoji large" src="{$c->getSmileyPath('1f609')}">
+    <img data-emoji="😊" class="emoji large" src="{$c->getSmileyPath('1f60a')}">
+    <img data-emoji="😋" class="emoji large" src="{$c->getSmileyPath('1f60b')}">
+
+    <img data-emoji="😌" class="emoji large" src="{$c->getSmileyPath('1f60c')}">
+    <img data-emoji="😍" class="emoji large" src="{$c->getSmileyPath('1f60d')}">
+    <img data-emoji="😎" class="emoji large" src="{$c->getSmileyPath('1f60e')}">
+    <img data-emoji="😏" class="emoji large" src="{$c->getSmileyPath('1f60f')}">
+    <img data-emoji="😐" class="emoji large" src="{$c->getSmileyPath('1f610')}">
+    <img data-emoji="😑" class="emoji large" src="{$c->getSmileyPath('1f611')}">
+
+    <img data-emoji="😒" class="emoji large" src="{$c->getSmileyPath('1f612')}">
+    <img data-emoji="😓" class="emoji large" src="{$c->getSmileyPath('1f613')}">
+    <img data-emoji="😔" class="emoji large" src="{$c->getSmileyPath('1f614')}">
+    <img data-emoji="😕" class="emoji large" src="{$c->getSmileyPath('1f615')}">
+    <img data-emoji="😖" class="emoji large" src="{$c->getSmileyPath('1f616')}">
+    <img data-emoji="😗" class="emoji large" src="{$c->getSmileyPath('1f617')}">
+
+    <img data-emoji="😘" class="emoji large" src="{$c->getSmileyPath('1f618')}">
+    <img data-emoji="😙" class="emoji large" src="{$c->getSmileyPath('1f619')}">
+    <img data-emoji="😚" class="emoji large" src="{$c->getSmileyPath('1f61a')}">
+    <img data-emoji="😛" class="emoji large" src="{$c->getSmileyPath('1f61b')}">
+    <img data-emoji="😜" class="emoji large" src="{$c->getSmileyPath('1f61c')}">
+    <img data-emoji="😝" class="emoji large" src="{$c->getSmileyPath('1f61d')}">
+
+    <img data-emoji="😞" class="emoji large" src="{$c->getSmileyPath('1f61e')}">
+    <img data-emoji="😟" class="emoji large" src="{$c->getSmileyPath('1f61f')}">
+    <img data-emoji="😠" class="emoji large" src="{$c->getSmileyPath('1f620')}">
+    <img data-emoji="😡" class="emoji large" src="{$c->getSmileyPath('1f621')}">
+    <img data-emoji="😢" class="emoji large" src="{$c->getSmileyPath('1f622')}">
+    <img data-emoji="😣" class="emoji large" src="{$c->getSmileyPath('1f623')}">
+
+    <img data-emoji="😤" class="emoji large" src="{$c->getSmileyPath('1f624')}">
+    <img data-emoji="😥" class="emoji large" src="{$c->getSmileyPath('1f625')}">
+    <img data-emoji="😦" class="emoji large" src="{$c->getSmileyPath('1f626')}">
+    <img data-emoji="😧" class="emoji large" src="{$c->getSmileyPath('1f627')}">
+    <img data-emoji="😨" class="emoji large" src="{$c->getSmileyPath('1f628')}">
+    <img data-emoji="😩" class="emoji large" src="{$c->getSmileyPath('1f629')}">
+
+    <img data-emoji="😪" class="emoji large" src="{$c->getSmileyPath('1f62a')}">
+    <img data-emoji="😫" class="emoji large" src="{$c->getSmileyPath('1f62b')}">
+    <img data-emoji="😬" class="emoji large" src="{$c->getSmileyPath('1f62c')}">
+    <img data-emoji="😭" class="emoji large" src="{$c->getSmileyPath('1f62d')}">
+    <img data-emoji="😮" class="emoji large" src="{$c->getSmileyPath('1f62e')}">
+    <img data-emoji="😯" class="emoji large" src="{$c->getSmileyPath('1f62f')}">
+
+    <img data-emoji="😰" class="emoji large" src="{$c->getSmileyPath('1f630')}">
+    <img data-emoji="😱" class="emoji large" src="{$c->getSmileyPath('1f631')}">
+    <img data-emoji="😲" class="emoji large" src="{$c->getSmileyPath('1f632')}">
+    <img data-emoji="😳" class="emoji large" src="{$c->getSmileyPath('1f633')}">
+    <img data-emoji="😴" class="emoji large" src="{$c->getSmileyPath('1f634')}">
+    <img data-emoji="😵" class="emoji large" src="{$c->getSmileyPath('1f635')}">
+
+    <img data-emoji="👊" class="emoji large" src="{$c->getSmileyPath('1f44a')}">
+    <img data-emoji="👋" class="emoji large" src="{$c->getSmileyPath('1f44b')}">
+    <img data-emoji="👌" class="emoji large" src="{$c->getSmileyPath('1f44c')}">
+    <img data-emoji="👍" class="emoji large" src="{$c->getSmileyPath('1f44d')}">
+    <img data-emoji="👎" class="emoji large" src="{$c->getSmileyPath('1f44e')}">
+    <img data-emoji="👏" class="emoji large" src="{$c->getSmileyPath('1f44f')}">
+
+    <img data-emoji="🎉" class="emoji large" src="{$c->getSmileyPath('1f389')}">
+    <img data-emoji="🎁" class="emoji large" src="{$c->getSmileyPath('1f381')}">
+    <img data-emoji="📦" class="emoji large" src="{$c->getSmileyPath('1f4e6')}">
+    <img data-emoji="📅" class="emoji large" src="{$c->getSmileyPath('1f4c5')}">
+    <img data-emoji="🔒" class="emoji large" src="{$c->getSmileyPath('1f512')}">
+    <img data-emoji="🏠" class="emoji large" src="{$c->getSmileyPath('1f3e0')}">
+
+    <img data-emoji="🍌" alt=":banana:" class="emoji large" src="{$c->getSmileyPath('1f34c')}">
+    <img data-emoji="🍎" alt=":apple:" class="emoji large" src="{$c->getSmileyPath('1f34e')}">
+    <img data-emoji="🌼" alt=":blossom:" class="emoji large" src="{$c->getSmileyPath('1f33c')}">
+    <img data-emoji="🌵" alt=":cactus:" class="emoji large" src="{$c->getSmileyPath('1f335')}">
+    <img data-emoji="🌹" alt=":rose:" class="emoji large" src="{$c->getSmileyPath('1f339')}">
+    <img data-emoji="🍄" alt=":mushroom:" class="emoji large" src="{$c->getSmileyPath('1f344')}">
+
+    <img data-emoji="🍦" class="emoji large" src="{$c->getSmileyPath('1f366')}">
+    <img data-emoji="🍩" class="emoji large" src="{$c->getSmileyPath('1f369')}">
+    <img data-emoji="🍪" class="emoji large" src="{$c->getSmileyPath('1f36a')}">
+    <img data-emoji="🍫" class="emoji large" src="{$c->getSmileyPath('1f36b')}">
+    <img data-emoji="🍰" class="emoji large" src="{$c->getSmileyPath('1f370')}">
+    <img data-emoji="🍺" class="emoji large" src="{$c->getSmileyPath('1f37a')}">
+
+    <img data-emoji="🍔" alt=":hamburger:" class="emoji large" src="{$c->getSmileyPath('1f354')}">
+    <img data-emoji="🍕" alt=":pizza:" class="emoji large" src="{$c->getSmileyPath('1f355')}">
+    <img data-emoji="🍗" alt=":poultry_leg:" class="emoji large" src="{$c->getSmileyPath('1f357')}">
+    <img data-emoji="🍚" alt=":rice:" class="emoji large" src="{$c->getSmileyPath('1f35a')}">
+    <img data-emoji="🍜" alt=":ramen:" class="emoji large" src="{$c->getSmileyPath('1f35c')}">
+    <img data-emoji="🍣" alt=":sushi:" class="emoji large" src="{$c->getSmileyPath('1f363')}">
+
+    <img data-emoji="🛀" alt=":bath:" class="emoji large" src="{$c->getSmileyPath('1f6c0')}">
+    <img data-emoji="🎧" alt=":headphones:" class="emoji large" src="{$c->getSmileyPath('1f3a7')}">
+    <img data-emoji="🎮" alt=":video_game:" class="emoji large" src="{$c->getSmileyPath('1f3ae')}">
+    <img data-emoji="🎫" alt=":ticket:" class="emoji large" src="{$c->getSmileyPath('1f3ab')}">
+    <img data-emoji="💼" alt=":briefcase:" class="emoji large" src="{$c->getSmileyPath('1f4bc')}">
+    <img data-emoji="🎒" alt=":school_satchel:" class="emoji large" src="{$c->getSmileyPath('1f392')}">
+
+    <img data-emoji="💡" alt=":bulb:" class="emoji large" src="{$c->getSmileyPath('1f4a1')}">
+    <img data-emoji="📞" alt=":telephone_receiver:" class="emoji large" src="{$c->getSmileyPath('1f4de')}">
+    <img data-emoji="🔥" alt=":fire:" class="emoji large" src="{$c->getSmileyPath('1f525')}">
+    <img data-emoji="🕐" alt=":clock1:" class="emoji large" src="{$c->getSmileyPath('1f550')}">
+    <img data-emoji="✉" alt=":email:" class="emoji large" src="{$c->getSmileyPath('2709')}">
+    <img data-emoji="✏" alt=":pencil2:" class="emoji large" src="{$c->getSmileyPath('270f')}">
+
+    <img data-emoji="💋" alt=":kiss:" class="emoji large" src="{$c->getSmileyPath('1f48b')}">
+    <img data-emoji="♥" alt=":hearts:" class="emoji large" src="{$c->getSmileyPath('2665')}">
+    <img data-emoji="💊" alt=":pill:" class="emoji large" src="{$c->getSmileyPath('1f48a')}">
+    <img data-emoji="💩" alt=":hankey:" class="emoji large" src="{$c->getSmileyPath('1f4a9')}">
+    <img data-emoji="☕" alt=":coffee:" class="emoji large" src="{$c->getSmileyPath('2615')}">
+    <img data-emoji="⏰" alt=":alarm_clock:" class="emoji large" src="{$c->getSmileyPath('23f0')}">
+
+    <img data-emoji="🚈" class="emoji large" src="{$c->getSmileyPath('1f688')}">
+    <img data-emoji="🚋" class="emoji large" src="{$c->getSmileyPath('1f68b')}">
+    <img data-emoji="🚌" class="emoji large" src="{$c->getSmileyPath('1f68c')}">
+    <img data-emoji="🚐" class="emoji large" src="{$c->getSmileyPath('1f690')}">
+    <img data-emoji="🚕" class="emoji large" src="{$c->getSmileyPath('1f695')}">
+    <img data-emoji="🚗" class="emoji large" src="{$c->getSmileyPath('1f697')}">
+
+    <img data-emoji="🐰" alt=":rabbit:" class="emoji large" src="{$c->getSmileyPath('1f430')}">
+    <img data-emoji="🐨" alt=":koala:" class="emoji large" src="{$c->getSmileyPath('1f428')}">
+    <img data-emoji="🐮" alt=":cow:" class="emoji large" src="{$c->getSmileyPath('1f42e')}">
+    <img data-emoji="🦊" alt=":fox:" class="emoji large" src="{$c->getSmileyPath('1f98a')}">
+    <img data-emoji="🐺" alt=":wolf:" class="emoji large" src="{$c->getSmileyPath('1f43a')}">
+    <img data-emoji="🦁" alt=":lion:" class="emoji large" src="{$c->getSmileyPath('1f981')}">
+
+    <img data-emoji="🐷" alt=":pig:" class="emoji large" src="{$c->getSmileyPath('1f437')}">
+    <img data-emoji="🐵" alt=":monkey_face:" class="emoji large" src="{$c->getSmileyPath('1f435')}">
+    <img data-emoji="🐶" alt=":dog:" class="emoji large" src="{$c->getSmileyPath('1f436')}">
+    <img data-emoji="🐸" alt=":frog:" class="emoji large" src="{$c->getSmileyPath('1f438')}">
+    <img data-emoji="🐹" alt=":hamster:" class="emoji large" src="{$c->getSmileyPath('1f439')}">
+    <img data-emoji="🐻" alt=":bear:" class="emoji large" src="{$c->getSmileyPath('1f43b')}">
+</div>

app/widgets/Stickers/stickers.js

@@ -22,11 +22,11 @@ var Stickers = {
         element.classList.add('zoomed');
     },
     setEmojisEvent(mid) {
-        let tds = document.querySelectorAll('table.emojis td');
+        const emojis = document.querySelectorAll('#emojisearchbar + .emojis img');
         let i = 0;
 
-        while (i < tds.length) {
-            tds[i].onclick = function() {
+        while (i < emojis.length) {
+            emojis[i].onclick = function() {
                 if (mid) {
                     Chat_ajaxHttpDaemonSendReaction(mid, this.dataset.emoji);
                     Dialog_ajaxClear();