Improve emojis integration, add helpers for typing the shortcuts

app/helpers/StringHelper.php

@@ -326,6 +326,20 @@ function stripTags($string): string
     return strip_tags(preg_replace('/(<\/[^>]+?>)(<[^>\/][^>]*?>)/', '$1 $2', $string));
 }
 
+/**
+ * To emoji shortcut
+ */
+function emojiShortcut($string): string
+{
+    return \strtolower(
+        \str_replace(
+            ['-', ' ', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+            ['_', '_', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
+            $string
+        )
+    );
+}
+
 /**
  * Purify a string
  */

app/widgets/Chat/Chat.php

@@ -816,7 +816,8 @@ class Chat extends \Movim\Widget\Base
             && in_array($message->type,  ['chat', 'groupchat'])) {
             $message->sticker = [
                 'url' => $emoji->getLastSingleEmojiURL(),
-                'height' => 60
+                'title' => ':'.$emoji->getLastSingleEmojiTitle().':',
+                'height' => 60,
             ];
         }
 

app/widgets/Chat/_chat.tpl

@@ -218,6 +218,7 @@
             <h1>{$c->__('chat.new_title')}</h1>
             <h4>{$c->___('chat.new_text')}</h4>
             <h4>{$c->___('message.edit_help')}</h4>
+            <h4>{$c->___('message.emoji_help')}</h4>
         </div>
     </section>
 </div>
@@ -265,8 +266,11 @@
                         id="chat_textarea"
                         data-jid="{$jid}"
                         data-muc="{if="$muc"}true{/if}"
-                        {if="rand(0, 4) == 4 && !$muc"}
+                        {$rand = rand(0, 4)};
+                        {if="$rand == 4 && !$muc"}
                             placeholder="{$c->__('message.edit_help')}"
+                        {elseif="$rand == 3"}
+                            placeholder="{$c->__('message.emoji_help')}"
                         {else}
                             placeholder="{$c->__('chat.placeholder')}"
                         {/if}

app/widgets/Chat/chat.js

@@ -253,6 +253,7 @@ var Chat = {
     {
         var emojisList = document.querySelector('.chat_box .emojis ul');
         emojisList.innerHTML = '';
+
         if (textarea.value.lastIndexOf(':') > -1 && textarea.value.length > textarea.value.lastIndexOf(':') + 2) {
             Object.keys(emojis).filter(key => key.indexOf(
                     textarea.value.substr(textarea.value.lastIndexOf(':') + 1)
@@ -260,10 +261,10 @@ var Chat = {
             .slice(0, 20)
             .forEach(found => {
                 var img = document.createElement('img');
-                img.setAttribute('src','theme/img/emojis/svg/' + emojis[found].codepoint + '.svg');
+                img.setAttribute('src','theme/img/emojis/svg/' + emojis[found].c + '.svg');
                 img.classList.add('emoji');
                 img.title = ':' + found + ':';
-                img.dataset.emoji = emojis[found].emoji;
+                img.dataset.emoji = emojis[found].e;
                 img.addEventListener('click', e => {
                     textarea.value = textarea.value.substr(0, textarea.value.lastIndexOf(':'));
                     emojisList.innerHTML = '';
@@ -681,6 +682,10 @@ var Chat = {
             }
         }
 
+        if (sticker.title) {
+            img.title = sticker.title;
+        }
+
         if (sticker.picture) {
             img.classList.add('active');
             img.setAttribute('onclick', 'Preview_ajaxShow("' + sticker.url + '")');

app/widgets/Chat/locales.ini

@@ -6,7 +6,8 @@ composing       = Composing…
 paused          = Paused…
 gone            = Contact gone
 history         = %s messages retrieved
-edit_help       = You can use the up arrow ↑ to edit your previous message
+edit_help       = ↑ to edit your previous message
+emoji_help      = :shortcut: to insert an emoji
 
 [chat]
 attention       = %s needs your attention

src/Movim/Console/EmojisToJsonCommand.php

@@ -31,13 +31,7 @@ class EmojisToJsonCommand extends Command
         $json = [];
         foreach ($filtered as $key => $value) {
             sscanf('U+'.$key, 'U+%x', $codepoint);
-            $json[\strtolower(
-                \str_replace(
-                    ['-', ' ', 0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
-                    ['_', '_', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
-                    $value
-                )
-            )] = ['emoji' => \IntlChar::chr($codepoint), 'codepoint' => $key];
+            $json[emojiShortcut($value)] = ['e' => \IntlChar::chr($codepoint), 'c' => $key];
         }
 
         \file_put_contents(PUBLIC_PATH.'scripts/movim_emojis_list.js', 'var emojis = '.\json_encode($json));

src/Movim/Emoji.php

@@ -28,6 +28,7 @@ class Emoji
     private $_string;
     private $_lastEmoji = null;
     private $_lastEmojiURL = null;
+    private $_lastEmojiTitle = null;
     private $_regex = [
         // Some easy cases first
         '/[#*0-9]\x{20E3}
@@ -94,7 +95,8 @@ class Emoji
             $img->setAttribute('class', 'emoji');
             $img->setAttribute('alt', $this->_emoji[$astext]);
             if (!$noTitle) {
-                $img->setAttribute('title', \strtolower($this->_emoji[$astext]));
+                $this->_lastEmojiTitle = emojiShortcut($this->_emoji[$astext]);
+                $img->setAttribute('title', ':'.$this->_lastEmojiTitle.':');
             }
             $img->setAttribute('src', $this->_lastEmojiURL);
 
@@ -112,6 +114,11 @@ class Emoji
         return $this->_lastEmojiURL;
     }
 
+    public function getLastSingleEmojiTitle()
+    {
+        return $this->_lastEmojiTitle;
+    }
+
     public static function getInstance()
     {
         if (!isset(static::$instance)) {