Implement an extensive emoji picker, Closes #92

webapp/titanembeds/static/css/embedstyle.css

@@ -782,49 +782,34 @@ p.mentioned span.chatmessage {
   max-height: none;
 }
 
-#emoji-picker {
+.wdt-emoji-popup {
-  color: black;
   position: fixed;
-  bottom: 12%;
+  bottom: 5%;
   right: 1%;
   z-index: 500;
-  width: 350px;
+  top: auto !important;
-  height: 110px;
+  left: auto;
-  max-width: 80%;
+}
-  max-height: 80%;
+
-  background-color: #eceff1;
+.wdt-emoji-picker {
-  border-radius: 5px;
+  bottom: 13px;
+  right: 10px;
+}
+
+#wdt-emoji-search, #wdt-emoji-search:focus {
+  padding: 2px;
+}
+
+@media only screen and (max-device-width: 320px) {
+  .wdt-emoji-picker {
       display: none;
+  }
 }
 
-#emoji-picker-content {
+@media only screen and (min-device-width: 321px) {
-  overflow: auto;
+  .wdt-emoji-picker {
-  height: 100%;
+      display: block;
-  padding: 5px;
+  }
-  padding-top: 0;
-}
-
-#emoji-picker h6 {
-  font-weight: bold;
-}
-
-#emoji-tray-toggle {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  top: 14px;
-  right: 30px;
-}
-
-#emoji-tray-toggle > .btn-floating {
-  width: 30px;
-  height: 30px;
-}
-
-#emoji-tray-toggle > .btn-floating > i {
-  line-height: 0;
-  position: relative;
-  top: -5px;
 }
 
 #usercard .avatar {

webapp/titanembeds/static/js/embed.js

@@ -17,6 +17,8 @@
 /* global unauth_captcha_enabled */
 /* global soundManager */
 /* global disabled */
+/* global wdtEmojiBundle */
+/* global EmojiConvertor */
 
 (function () {
     const theme_options = ["DiscordDark", "MetroEdge", "BetterTitan"]; // All the avaliable theming names
@@ -204,40 +206,6 @@
             $("#loginmodal").modal("open");
         });
         
-        $("#emoji-tray-toggle").click(function () {
-            $("#emoji-picker").fadeToggle();
-            var offset = $("#emoji-tray-toggle").offset().top;
-            $("#emoji-picker").offset({"top": offset-120});
-            $("#emoji-picker-emojis").html("");
-            var template = $('#mustache_message_emoji').html();
-            Mustache.parse(template);
-            for (var i = 0; i < emoji_store.length; i++) {
-                var emoji = emoji_store[i];
-                var rendered = Mustache.render(template, {"id": emoji.id, "name": emoji.name, "animated": emoji.animated}).trim();
-                var jqueryed = $(rendered);
-                jqueryed.click(function () {
-                    var emote_name = $(this).attr("data-tooltip");
-                    place_emoji(emote_name);
-                });
-                $("#emoji-picker-emojis").append(jqueryed);
-            }
-            $('.tooltipped').tooltip();
-        });
-        
-        $("#chatcontent").click(function () {
-            var emojipck_display = $('#emoji-picker').css('display');
-            if (emojipck_display != "none") {
-                $("#emoji-picker").fadeToggle();
-            }
-        });
-
-        $("#messagebox").click(function () {
-            var emojipck_display = $('#emoji-picker').css('display');
-            if (emojipck_display != "none") {
-                $("#emoji-picker").fadeToggle();
-            }
-        });
-        
         $("#proceed_nsfw_btn").click(function () {
             var channel_id = $("#proceed_nsfw_btn").attr("channel_id");
             var should_animate = parseInt($("#proceed_nsfw_btn").attr("should_animate"));
@@ -263,6 +231,16 @@
         hljs.configure({useBR: true});
         linkify.options.defaults.ignoreTags = ["code"];
         
+        wdtEmojiBundle.defaults.emojiSheets = {
+            'apple': 'https://cdnjs.cloudflare.com/ajax/libs/wdt-emoji-bundle/0.2.1/sheets/sheet_apple_64_indexed_128.png',
+            'google': 'https://cdnjs.cloudflare.com/ajax/libs/wdt-emoji-bundle/0.2.1/sheets/sheet_google_64_indexed_128.png',
+            'twitter': 'https://cdnjs.cloudflare.com/ajax/libs/wdt-emoji-bundle/0.2.1/sheets/sheet_twitter_64_indexed_128.png',
+            'emojione': 'https://cdnjs.cloudflare.com/ajax/libs/wdt-emoji-bundle/0.2.1/sheets/sheet_emojione_64_indexed_128.png'
+        };
+        wdtEmojiBundle.defaults.pickerColors = ['gray'];
+        wdtEmojiBundle.defaults.emojiType = 'twitter';
+        wdtEmojiBundle.init('#messagebox');
+        
         var themeparam = getParameterByName('theme');
         var localstore_theme = localStorage.getItem("theme");
         if ((themeparam && $.inArray(themeparam, theme_options) != -1) || (localstore_theme)) {
@@ -520,6 +498,7 @@
     function prepare_guild(guildobj) {
         global_guest_icon = guildobj.guest_icon;
         emoji_store = guildobj.emojis;
+        update_emoji_picker();
         guild_roles_list = guildobj.roles;
         fill_channels(guildobj.channels);
         fill_discord_members(guildobj.discordmembers);
@@ -627,14 +606,24 @@
       }
     }
     
-    function place_emoji(emoji_name) {
+    function update_emoji_picker() {
-        if (!$('#messagebox').prop('disabled')) {
+        var emojis = wdtEmojiBundle.listCustomEmojis();
-            $('#messagebox').val( $('#messagebox').val() + emoji_name + " " );
+        var short_names = [];
-            $("#messagebox").focus();
+        for (var i = 0; i < emojis.length; i++) {
+            short_names.push(emojis.short_name);
         }
-        var emojipck_display = $('#emoji-picker').css('display');
+        for (var i = 0; i < short_names.length; i++) {
-        if (emojipck_display != "none") {
+            wdtEmojiBundle.removeCustomEmoji(short_names[i]);
-            $("#emoji-picker").fadeToggle();
+        }
+        for (var i = 0; i < emoji_store.length; i++) {
+            var emote = emoji_store[i];
+            var img_url = "https://cdn.discordapp.com/emojis/" + emote.id;
+            if (emote.animated) {
+                img_url += ".gif";
+            } else {
+                img_url += ".png";
+            }
+            wdtEmojiBundle.addCustomEmoji(emote.name, emote.name, img_url);
         }
     }
 
@@ -1475,7 +1464,12 @@
             $(this).val($.trim($(this).val()));
             $(this).blur();
             $("#messagebox").attr('readonly', true);
-            var funct = post(selected_channel, $(this).val());
+            var emojiConvertor = new EmojiConvertor();
+            emojiConvertor.init_env();
+            emojiConvertor.replace_mode = "unified";
+            emojiConvertor.allow_native = true;
+            var messageInput = emojiConvertor.replace_colons($(this).val());
+            var funct = post(selected_channel, messageInput);
             funct.done(function(data) {
                 $("#messagebox").val("");
             });
@@ -1654,6 +1648,7 @@
 
         socket.on("GUILD_EMOJIS_UPDATE", function (emo) {
             emoji_store = emo;
+            update_emoji_picker();
         });
         
         socket.on("GUILD_UPDATE", function (guil) {

webapp/titanembeds/templates/embed.html.j2

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" integrity="sha256-e22BQKCF7bb/h/4MFJ1a4lTRR2OuAe8Hxa/3tgU5Taw=" crossorigin="anonymous" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css" integrity="sha256-90Y+fvi28WF+3jKH4tHEkoQ9WLeFKJjpvCPNOtU9ZvU=" crossorigin="anonymous" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spinkit/1.2.5/spinners/2-double-bounce.min.css" integrity="sha256-EUobIj2z8wTjkWEwkjqubfq0NEqgOoNScgHP1oUSU7M=" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/wdt-emoji-bundle/0.2.1/wdt-emoji-bundle.min.css" integrity="sha256-5+pPkh0iWNYFrqNU7G36rsHynAmXNpL4rq6/NI29mmk=" crossorigin="anonymous" />
     <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/embedstyle.css') }}">
     <link id="css-theme" type="text/css" rel="stylesheet" href="">
     
@@ -247,26 +248,52 @@
       </div>
     </div>
     
-    <div id="emoji-picker">
+    <div class="wdt-emoji-popup">
-      <div id="emoji-picker-content">
+      <a href="#" class="wdt-emoji-popup-mobile-closer"> × </a>
-        <div class="row">
+      <div class="wdt-emoji-menu-content">
-          <h6>{{ _("Server Emoji") }}</h6>
+        <div id="wdt-emoji-menu-header">
-          <div id="emoji-picker-emojis"></div>
+          <a class="wdt-emoji-tab active" data-group-name="Recent"></a>
+          <a class="wdt-emoji-tab" data-group-name="Custom"></a>
+          <a class="wdt-emoji-tab" data-group-name="People"></a>
+          <a class="wdt-emoji-tab" data-group-name="Nature"></a>
+          <a class="wdt-emoji-tab" data-group-name="Foods"></a>
+          <a class="wdt-emoji-tab" data-group-name="Activity"></a>
+          <a class="wdt-emoji-tab" data-group-name="Places"></a>
+          <a class="wdt-emoji-tab" data-group-name="Objects"></a>
+          <a class="wdt-emoji-tab" data-group-name="Symbols"></a>
+          <a class="wdt-emoji-tab" data-group-name="Flags"></a>
+        </div>
+        <div class="wdt-emoji-scroll-wrapper">
+          <div id="wdt-emoji-menu-items">
+            <input id="wdt-emoji-search" type="text" placeholder="Search">
+            <h3 id="wdt-emoji-search-result-title">Search Results</h3>
+            <div class="wdt-emoji-sections"></div>
+            <div id="wdt-emoji-no-result">No emoji found</div>
+          </div>
+        </div>
+        <div id="wdt-emoji-footer">
+          <div id="wdt-emoji-preview">
+            <span id="wdt-emoji-preview-img"></span>
+            <div id="wdt-emoji-preview-text">
+              <span id="wdt-emoji-preview-name"></span><br>
+              <span id="wdt-emoji-preview-aliases"></span>
+            </div>
+          </div>
+          <div id="wdt-emoji-preview-bundle">
+            <span>Pick-a-moji</span>
+          </div>
         </div>
       </div>
     </div>
 
     <footer id="footer" class="footer">
-      <div id="emoji-tray-toggle">
-        <a class="btn-floating btn-large waves-effect waves-light"><i class="material-icons">tag_faces</i></a>
-      </div>
       <div id="footercontainer" class="footercontainer">
         <div class="currentuserchip" id="nameplate">
           <div id="currentuserimage_parent"><img id="currentuserimage" src="" class="circle currentuserimage" style="display: none;"></div>
           <div id="currentusername" class="currentusername"><span id="curuser_name">Titan</span><span id="curuser_discrim">#0001</span></div>
         </div>
         <div id="messageboxouter" class="input-field inline">
-          <textarea placeholder="Enter message" id="messagebox" type="text" class="materialize-textarea" rows="1"></textarea>
+          <textarea placeholder="Enter message" id="messagebox" type="text" class="materialize-textarea wdt-emoji-open-on-colon" rows="1"></textarea>
           <span id="visitor_mode_message" style="display:none;"><span id="visitor_mode_message_note">{{ _("Please login to post a message.") }}</span> <a id="visitor_login_btn" class="waves-effect waves-light btn">{{ _("Login") }}</a></span>
         </div>
       </div>
@@ -295,6 +322,8 @@
 
     <script src="{{ url_for("static", filename="js/vendor/highlight.pack.js") }}"></script>
     <script src="{{ url_for("static", filename="js/vendor/jquery.balloon.min.js") }}"></script>
+    <script src="{{ url_for('static', filename='js/vendor/emoji.min.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/vendor/wdt-emoji-bundle.min.js') }}"></script>
 
     {% raw %}
     <script id="mustache_channellistings" type="text/template">