emoji_picker: Add emoji showcase.

Emoji showcase refers to the space at the bottom of the emoji
picker we use for showing name as well as aliases of the currently
focused emoji.

Fixes: #6110.

frontend_tests/node_tests/templates.js

@@ -639,6 +639,26 @@ function render(template_name, args) {
     assert(used_emoji.hasClass("reacted"));
 }());
 
+(function emoji_showcase() {
+    var args = {
+        emoji_dict: {
+            name: "thumbs_up",
+            is_realm_emoji: false,
+            css_class: "1f44d",
+            has_reacted: false,
+        },
+    };
+    var html = render("emoji_showcase", args);
+    var emoji_div = $(html).find(".emoji");
+    var canonical_name = $(html).find(".emoji-canonical-name");
+
+    assert.equal(emoji_div.length, 1);
+    assert(emoji_div.hasClass("emoji-1f44d"));
+    assert.equal(canonical_name.text(), "thumbs_up");
+    assert.equal(canonical_name.attr("title"), "thumbs_up");
+    global.write_handlebars_output("emoji_showcase", html);
+}());
+
 (function group_pms() {
     var args = {
         group_pms: [

static/js/emoji_picker.js

@@ -4,7 +4,7 @@ var exports = {};
 
 // Emoji picker is of fixed width and height. Update these
 // whenever these values are changed in `reactions.css`.
-var APPROX_HEIGHT = 330;
+var APPROX_HEIGHT = 375;
 var APPROX_WIDTH = 255;
 
 // The functionalities for reacting to a message with an emoji
@@ -322,12 +322,36 @@ function round_off_to_previous_multiple(number_to_round, multiple) {
     return (number_to_round - (number_to_round % multiple));
 }
 
+function reset_emoji_showcase() {
+    $(".emoji-showcase-container").html("");
+}
+
+function update_emoji_showcase($focused_emoji) {
+    // Don't use jQuery's data() function here. It has the side-effect
+    // of converting emoji names like :100:, :1234: etc to number.
+    var focused_emoji_name = $focused_emoji.attr("data-emoji-name");
+    var focused_emoji_dict = exports.emoji_collection[focused_emoji_name];
+    if (search_is_active) {
+        focused_emoji_dict = search_results[current_index];
+    }
+
+    var emoji_dict = _.extend({}, focused_emoji_dict, {
+        name: focused_emoji_name.replace(/_/g, ' '),
+    });
+    var rendered_showcase = templates.render("emoji_showcase", {
+        emoji_dict: emoji_dict,
+    });
+
+    $(".emoji-showcase-container").html(rendered_showcase);
+}
+
 function may_be_change_focused_emoji(next_section, next_index) {
     var next_emoji = get_rendered_emoji(next_section, next_index);
     if (next_emoji) {
         current_section = next_section;
         current_index = next_index;
         next_emoji.focus();
+        update_emoji_showcase(next_emoji);
         return true;
     }
     return false;
@@ -387,6 +411,7 @@ function change_focus_to_filter() {
         current_section = 0;
         current_index = 0;
     }
+    reset_emoji_showcase();
 }
 
 exports.navigate = function (event_name) {
@@ -409,10 +434,12 @@ exports.navigate = function (event_name) {
             if (current_section === 0 && current_index < 6) {
                 $(".emoji-popover-emoji-map").scrollTop(0);
             }
+            update_emoji_showcase(selected_emoji);
             return true;
         }
         if (event_name === "tab") {
             selected_emoji.focus();
+            update_emoji_showcase(selected_emoji);
             return true;
         }
         return false;
@@ -431,6 +458,7 @@ exports.navigate = function (event_name) {
             $(".emoji-search-results-container").scrollTop(0);
             current_section = 0;
             current_index = 0;
+            reset_emoji_showcase();
             return true;
         }
     } else if (event_name === 'tab') {
@@ -605,6 +633,7 @@ exports.toggle_emoji_popover = function (element, id) {
         elt.addClass("reaction_button_visible");
         emoji_picker.render_emoji_popover(elt, id);
     }
+    reset_emoji_showcase();
 };
 
 exports.register_click_handlers = function () {
@@ -665,6 +694,10 @@ exports.register_click_handlers = function () {
             $(".emoji-popover-emoji-map").scrollTop(offset.position_y);
         }
     });
+
+    $("body").on("click", ".emoji-popover-filter", function () {
+        reset_emoji_showcase();
+    });
 };
 
 exports.is_composition = function (emoji) {

static/styles/reactions.css

@@ -132,7 +132,7 @@
 
 .emoji-info-popover {
     padding: 0;
-    height: 326px;
+    height: 370px;
 }
 
 .emoji-info-popover .popover-content {
@@ -263,3 +263,30 @@
 .typeahead .emoji {
     top: 2px;
 }
+
+.emoji-showcase-container {
+    position: relative;
+    background-color: #eee;
+    min-height: 44px;
+    width: 250px;
+}
+
+.emoji-preview {
+    position: absolute;
+    width: 32px;
+    height: 32px;
+    left: 5px;
+    top: 6px;
+    margin-top: 0px;
+}
+
+.emoji-canonical-name {
+    position: relative;
+    top: 12px;
+    margin-left: 50px;
+    font-size: 16px;
+    font-weight: 600;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}

static/templates/emoji_popover.handlebars

@@ -3,4 +3,5 @@
     <div class="popover-content">
         <div></div>
     </div>
+    <div class="emoji-showcase-container"></div>
 </div>

static/templates/emoji_showcase.handlebars

@@ -0,0 +1,10 @@
+{{#with emoji_dict}}
+<div class="emoji-showcase">
+    {{#if is_realm_emoji}}
+    <img src="{{url}}" class="emoji emoji-preview"/>
+    {{else}}
+    <div class="emoji emoji-preview emoji-{{css_class}}"></div>
+    {{/if}}
+    <div class="emoji-canonical-name" title="{{name}}">{{name}}</div>
+</div>
+{{/with}}