emoji: Replace the old compose emoji picker with the reactions picker.

This removes the old compose emoji picker in its entirety, changing
the few callbacks needed to launch the reactions-style emoji picker
instead and hook it up properly.

Callbacks for reactions and composing messages are distinguished by
selecting for, respectively, the .reaction and .composition classes.

Fixes #4122.

frontend_tests/node_tests/templates.js

@@ -522,34 +522,6 @@ function render(template_name, args) {
     assert.equal(li.text(), 'The email will be forwarded to this stream');
 }());
 
-(function emoji_popover_content() {
-    var args = (function () {
-        var map = {};
-        for (var x in global.emoji.emojis_name_to_css_class) {
-            if (!global.emoji.realm_emojis[x]) {
-                map[x] = {
-                    name: x,
-                    css_name: global.emoji.emojis_name_to_css_class[x],
-                    url: global.emoji.emojis_by_name[x],
-                };
-            }
-        }
-
-        return {
-            emoji_list: map,
-            realm_emoji: global.emoji.realm_emojis,
-        };
-    }());
-
-    var html = '<div style="height: 250px">';
-    html += render('emoji_popover_content', args);
-    html += "</div>";
-    // test to make sure the first emoji is present in the popover
-    var emoji_key = $(html).find(".emoji-100").attr('title');
-    assert.equal(emoji_key, ':100:');
-    global.write_handlebars_output("emoji_popover_content", html);
-}());
-
 (function group_pms() {
     var args = {
         group_pms: [

static/js/click_handlers.js

@@ -386,7 +386,7 @@ $(function () {
 
     function handle_compose_click(e) {
         // Emoji clicks should be handled by their own click handler in emoji_picker.js
-        if ($(e.target).is("#emoji_map, .emoji_popover, .emoji_popover.inner, img.emoji, .drag")) {
+        if ($(e.target).is("#emoji_map, img.emoji, .drag")) {
             return;
         }
         // Don't let clicks in the compose area count as
@@ -580,7 +580,7 @@ $(function () {
         if (compose_state.composing() && !$(e.target).is("a") &&
             ($(e.target).closest(".modal").length === 0) &&
             window.getSelection().toString() === "" &&
-            ($(e.target).closest('#emoji_map').length === 0)) {
+            ($(e.target).closest('.popover-content').length === 0)) {
             compose_actions.cancel();
         }
     });

static/js/emoji_picker.js

@@ -6,30 +6,6 @@ var exports = {};
 // compose emoji picker with the emoji picker widget
 // implemented in this module.
 var current_message_reactions_popover_elem;
-var emoji_map_is_open = false;
-var emoji_map_is_rendered = false;
-
-function render_emoji_popover() {
-    var content = (function () {
-        var map = {};
-        for (var x in emoji.emojis_name_to_css_class) {
-            if (!emoji.realm_emojis[x]) {
-                map[x] = {
-                    name: x,
-                    css_name: emoji.emojis_name_to_css_class[x],
-                    url: emoji.emojis_by_name[x],
-                };
-            }
-        }
-
-        return templates.render('emoji_popover_content', {
-            emoji_list: map,
-            realm_emoji: emoji.realm_emojis,
-        });
-    }());
-    $('.emoji_popover').empty();
-    $('.emoji_popover').append(content);
-}
 
 function promote_popular(a, b) {
     function rank(name) {
@@ -171,55 +147,21 @@ exports.hide_reactions_popover = function () {
     }
 };
 
-exports.reset_emoji_popover = function () {
-    emoji_map_is_rendered = false;
-};
-
-exports.hide_emoji_map_popover = function () {
-    if (emoji_map_is_open) {
-        $('.emoji_popover').css('display', 'none');
-        $('.drag').css('display', 'none');
-        $("#new_message_content").focus();
-        emoji_map_is_open = false;
-    }
-};
-exports.show_emoji_map_popover = function () {
-    if (!emoji_map_is_open) {
-        $('.emoji_popover').css('display', 'inline-block');
-        $('.emoji_popover').scrollTop(0);
-        $('.drag').show();
-        $("#new_message_content").focus();
-        emoji_map_is_open = true;
-    }
-};
-
 exports.register_click_handlers = function () {
-    $("body").on("click", ".emoji_popover", function (e) {
+    $(document).on('click', '.reaction-popover-reaction.composition', function (e) {
-        e.stopPropagation();
+        var emoji_text = ':' + this.title + ':';
-    });
-
-    $(".emoji_popover").on("click", ".emoji", function (e) {
-        var emoji_choice = $(e.target).attr("title");
         var textarea = $("#new_message_content");
-        textarea.caret(emoji_choice);
+        textarea.caret(emoji_text);
         textarea.focus();
         e.stopPropagation();
+
+        emoji_picker.hide_reactions_popover();
     });
 
     $("#compose").on("click", "#emoji_map", function (e) {
         e.preventDefault();
         e.stopPropagation();
-        if (emoji_map_is_open) {
+        emoji_picker.toggle_reactions_popover(this);
-            // If the popover is already shown, clicking again should toggle it.
-            emoji_picker.hide_emoji_map_popover();
-        } else {
-            // If the emoji_map is not rendered before then, a call to render_emoji_popover is made.
-            if (!emoji_map_is_rendered) {
-                render_emoji_popover();
-                emoji_map_is_rendered = true;
-            }
-            emoji_picker.show_emoji_map_popover();
-        }
     });
 
     $("#main_div").on("click", ".reactions_hover, .reaction_button", function (e) {

static/js/hotkey.js

@@ -209,12 +209,6 @@ exports.process_escape_key = function (e) {
         return true;
     }
 
-    // emoji window should trap escape before it is able to close the compose box
-    if ($('.emoji_popover').css('display') === 'inline-block') {
-        emoji_picker.hide_emoji_map_popover();
-        return true;
-    }
-
     if (exports.processing_text()) {
         if ($(".message_edit_content").filter(":focus").length > 0) {
             row = $(".message_edit_content").filter(":focus").closest(".message_row");

static/js/popovers.js

@@ -284,44 +284,6 @@ exports.register_click_handlers = function () {
         show_message_info_popover(this, rows.id(row));
     });
 
-    (function () {
-        // create locally scoped variables for drag tracking.
-        var meta = {
-          drag: false,
-          c: {
-            y: null,
-          },
-          $popover: $(".emoji_popover"),
-          MIN_HEIGHT: 25,
-          MAX_HEIGHT: 300,
-        };
-
-        // drag must start within the .drag zone.
-        $(".drag").on("mousedown", function (e) {
-            meta.drag = true;
-            meta.c.y = e.screenY;
-        });
-
-        // mouse move that originated in .drag zone can go anywhere.
-        $("body").on("mousemove", function (e) {
-            if (meta.drag) {
-                var diff = e.screenY - meta.c.y;
-                var resolved_height = meta.$popover.height() - diff;
-
-                if (resolved_height > meta.MIN_HEIGHT && resolved_height < meta.MAX_HEIGHT) {
-                  meta.$popover.height(resolved_height);
-                }
-                meta.c.y = e.screenY;
-            }
-        });
-
-        // drag ends on mouseup. This cancels all drag events without interfering
-        // with any other events.
-        $("body").on("mouseup", function () {
-            meta.drag = false;
-        });
-    }());
-
     $('body').on('click', '.user_popover .narrow_to_private_messages', function (e) {
         var user_id = $(e.target).parents('ul').attr('data-user-id');
         var email = people.get_person_from_user_id(user_id).email;
@@ -562,8 +524,7 @@ exports.any_active = function () {
     // True if any popover (that this module manages) is currently shown.
     return popovers.actions_popped() || user_sidebar_popped() ||
         stream_popover.stream_popped() || stream_popover.topic_popped() ||
-        message_info_popped() || emoji_picker.emoji_map_is_open ||
+        message_info_popped() || emoji_picker.reactions_popped();
-        emoji_picker.reactions_popped();
 };
 
 exports.hide_all = function () {
@@ -576,7 +537,6 @@ exports.hide_all = function () {
     popovers.hide_user_sidebar_popover();
     popovers.hide_userlist_sidebar();
     stream_popover.restore_stream_list_size();
-    emoji_picker.hide_emoji_map_popover();
 
     // look through all the popovers that have been added and removed.
     list_of_popovers.forEach(function ($o) {

static/js/reactions.js

@@ -121,7 +121,7 @@ function maybe_select_emoji(e) {
     }
 }
 
-$(document).on('click', '.reaction-popover-reaction', function () {
+$(document).on('click', '.reaction-popover-reaction.reaction', function () {
     // When an emoji is clicked in the popover,
     // if the user has reacted to this message with this emoji
     // the reaction is removed

static/js/server_events.js

@@ -129,7 +129,6 @@ function dispatch_normal_event(event) {
     case 'realm_emoji':
         emoji.update_emojis(event.realm_emoji);
         settings_emoji.populate_emoji(event.realm_emoji);
-        emoji_picker.reset_emoji_popover();
         break;
 
     case 'realm_filters':

static/js/ui_init.js

@@ -98,11 +98,6 @@ $(function () {
         }
     });
 
-    // Override the #compose mousewheel prevention below just for the emoji box
-    $('.emoji_popover').mousewheel(function (e) {
-        e.stopPropagation();
-    });
-
     // Ignore wheel events in the compose area which weren't already handled above.
     $('#compose').mousewheel(function (e) {
         e.stopPropagation();

static/styles/compose.css

@@ -421,37 +421,6 @@ input.recipient_box {
     cursor: ns-resize;
 }
 
-.emoji_popover {
-    display: none;
-    position: relative;
-    margin-top: 10px;
-    bottom: 0px;
-    z-index: 1010;
-    /* take away 2px of borders and 2px of padding. */
-    width: calc(100% - 2px - 2px);
-    height: 140px;
-    padding: 1px;
-    text-align: center;
-    background-color: #ffffff;
-    border: 1px solid #ddd;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    border-radius: 4px;
-    overflow: hidden;
-    overflow-y: scroll;
-}
-
-.emoji_popover .emoji {
-    margin: 2px;
-    box-sizing: border-box;
-    cursor: pointer;
-    display: inline-block;
-}
-
-.emoji_popover .emoji:active {
-    border-radius: 5px;
-    border: 2px white solid;
-}
-
 #enter_sends {
     margin-top: 0px;
     margin-right: 5px;

static/templates/emoji_popover_content.handlebars

@@ -1,11 +0,0 @@
-{{! Contents of the "emoji map" popup }}
-{{#each emoji_list}}
-    {{#with this}}
-    <div class="emoji emoji-{{css_name}}" title=":{{name}}:" />
-    {{/with}}
-{{/each}}
-{{#each realm_emoji}}
-    {{#with this}}
-    <div class="emoji realm-emoji emoji-{{emoji_name}}" title=":{{emoji_name}}:" style="background-image: url('{{emoji_url}}')"></div>
-    {{/with}}
-{{/each}}

static/templates/reaction_popover_content.handlebars

@@ -7,7 +7,7 @@
     {{#if message_id}} {{! message_id -> message reaction, no message_id -> compose }}
     <div class="reaction-popover-emoji-map" data-message-id="{{message_id}}">
         {{#each emojis}}
-        <div class="reaction-popover-reaction {{#if has_reacted}} reacted {{/if}}" title={{name}} tabindex="0">
+        <div class="reaction-popover-reaction {{#if has_reacted}} reacted {{/if}} reaction" title={{name}} tabindex="0">
             {{#if is_realm_emoji}}
             <img src="{{url}}" class="emoji" title= ":{{name}}:" />
             {{else}}
@@ -19,7 +19,7 @@
     {{else}}
     <div class="reaction-popover-emoji-map">
         {{#each emojis}}
-        <div class="reaction-popover-reaction" title={{name}} tabindex="0">
+        <div class="reaction-popover-reaction composition" title={{name}} tabindex="0">
             {{#if is_realm_emoji}}
             <img src="{{url}}" class="emoji" title= ":{{name}}:" />
             {{else}}

templates/zerver/compose.html

@@ -84,7 +84,6 @@
                   <div id="preview_content"></div>
                 </div>
                 <div class="drag"></div>
-                <div class="emoji_popover"></div>
                 <div id="below-compose-content">
                   <input type="file" id="file_input" class="notvisible pull-left" multiple />
                   <a class="message-control-button icon-vector-smile"