Implemented Server Emoji Picker (#40)

webapp/titanembeds/static/css/embedstyle.css

@@ -385,6 +385,10 @@ a {
 }
 
 .message_emoji:hover {
+  cursor: pointer;
+}
+
+#chatcontent .message_emoji:hover {
   height: 30px;
 }
 
@@ -418,4 +422,49 @@ p.mentioned span.chatmessage {
   white-space: pre-wrap;
   line-height: 15px;
   padding: 5px;
+}
+
+#emoji-picker {
+  color: black;
+  position: fixed;
+  bottom: 12%;
+  right: 1%;
+  z-index: 500;
+  width: 350px;
+  height: 110px;
+  max-width: 80%;
+  max-height: 80%;
+  background-color: #eceff1;
+  border-radius: 5px;
+  display: none;
+}
+
+#emoji-picker-content {
+  overflow: auto;
+  height: 100%;
+  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;
 }

webapp/titanembeds/static/js/embed.js

@@ -161,6 +161,40 @@
             $("#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}).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();
+            }
+        });
+        
         $( "#theme-selector" ).change(function () {
             var theme = $("#theme-selector option:selected").val();
             var keep_custom_css = $("#overwrite_theme_custom_css_checkbox").is(':checked');
@@ -252,9 +286,11 @@
         if (visitor_mode) {
             $("#visitor_mode_message").show();
             $("#messagebox").hide();
+            $("#emoji-tray-toggle").hide();
         } else {
             $("#visitor_mode_message").hide();
             $("#messagebox").show();
+            $("#emoji-tray-toggle").show();
         }
     }
 
@@ -384,6 +420,17 @@
         $("#messagebox").focus();
       }
     }
+    
+    function place_emoji(emoji_name) {
+        if (!$('#messagebox').prop('disabled')) {
+            $('#messagebox').val( $('#messagebox').val() + emoji_name + " " );
+            $("#messagebox").focus();
+        }
+        var emojipck_display = $('#emoji-picker').css('display');
+        if (emojipck_display != "none") {
+            $("#emoji-picker").fadeToggle();
+        }
+    }
 
     function fill_discord_members(discordmembers) {
         var template = $('#mustache_authedusers').html();

webapp/titanembeds/templates/embed.html.j2

@@ -152,6 +152,15 @@
         </div>
       </div>
     </div>
+    
+    <div id="emoji-picker">
+      <div id="emoji-picker-content">
+        <div class="row">
+          <h6>Server Emoji</h6>
+          <div id="emoji-picker-emojis"></div>
+        </div>
+      </div>
+    </div>
 
     <footer id="footer" class="footer">
       <div id="fetching-indicator" class="preloader-wrapper small active" style="display: none;">
@@ -165,6 +174,9 @@
           </div>
         </div>
       </div>
+      <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 left" id="nameplate">
           <div class="left"><img id="currentuserimage" src="" class="circle left currentuserimage" style="display: none;"></div>