emoji: Move all emoji picker logic/events into emoji_picker module.

Added emoji_picker.js to static asset pipeline.

.eslintrc.json

@@ -143,6 +143,7 @@
         "drafts": false,
         "katex": false,
         "Clipboard": false,
+        "emoji_picker": false,
         "hotspots": false
     },
     "rules": {

frontend_tests/node_tests/dispatch.js

@@ -36,6 +36,7 @@ set_global('echo', {
 });
 
 // To support popovers object referenced in server_events.js
+add_dependencies({emoji_picker: 'js/emoji_picker.js'});
 add_dependencies({popovers: 'js/popovers.js'});
 
 // page_params is highly coupled to dispatching now

frontend_tests/node_tests/hotkey.js

@@ -159,9 +159,12 @@ function stubbing(func_name_to_stub, test_function) {
 
     set_global('popovers', {
         actions_popped: return_false,
+    });
+    set_global('emoji_picker', {
         reactions_popped: return_false,
     });
 
+
     // All letters should return false if we are composing text.
     hotkey.processing_text = return_true;
 
@@ -235,7 +238,7 @@ function stubbing(func_name_to_stub, test_function) {
     assert_mapping('S', 'narrow.by_subject');
     assert_mapping('v', 'lightbox.show_from_selected_message');
     assert_mapping('i', 'popovers.open_message_menu');
-    assert_mapping(':', 'popovers.toggle_reactions_popover', true);
+    assert_mapping(':', 'emoji_picker.toggle_reactions_popover', true);
     assert_mapping('G', 'navigate.to_end');
     assert_mapping('M', 'muting_ui.toggle_mute');
 }());

static/js/click_handlers.js

@@ -333,6 +333,7 @@ $(function () {
     }());
 
     popovers.register_click_handlers();
+    emoji_picker.register_click_handlers();
     stream_popover.register_click_handlers();
     notifications.register_click_handlers();
 
@@ -384,7 +385,7 @@ $(function () {
     });
 
     function handle_compose_click(e) {
-        // Emoji clicks should be handled by their own click handler in popover.js
+        // 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")) {
             return;
         }

static/js/emoji_picker.js

@@ -0,0 +1,238 @@
+var emoji_picker = (function () {
+
+var exports = {};
+
+// We handle both the reactions emoji popover and the
+// 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) {
+        switch (name) {
+            case '+1': return 1;
+            case 'tada': return 2;
+            case 'simple_smile': return 3;
+            case 'laughing': return 4;
+            case '100': return 5;
+            default: return 999;
+        }
+    }
+
+    var diff = rank(a.name) - rank(b.name);
+
+    if (diff !== 0) {
+        return diff;
+    }
+
+    return util.strcmp(a.name, b.name);
+}
+
+exports.toggle_reactions_popover = function (element, id) {
+    var last_popover_elem = current_message_reactions_popover_elem;
+    popovers.hide_all();
+    $(element).closest('.message_row').toggleClass('has_popover has_reactions_popover');
+    if (last_popover_elem !== undefined
+        && last_popover_elem.get()[0] === element) {
+        // We want it to be the case that a user can dismiss a popover
+        // by clicking on the same element that caused the popover.
+        return;
+    }
+
+    current_msg_list.select_id(id);
+    var elt = $(element);
+    if (elt.data('popover') === undefined) {
+        var emojis = _.clone(emoji.emojis_name_to_css_class);
+        var emojis_used = reactions.get_emojis_used_by_user_for_message_id(id);
+        var realm_emojis = emoji.realm_emojis;
+        _.each(realm_emojis, function (realm_emoji, realm_emoji_name) {
+            emojis[realm_emoji_name] = {
+                name: realm_emoji_name,
+                is_realm_emoji: true,
+                url: realm_emoji.emoji_url,
+            };
+        });
+        _.each(emojis_used, function (emoji_name) {
+            var is_realm_emoji = emojis[emoji_name].is_realm_emoji;
+            var url = emojis[emoji_name].url;
+            emojis[emoji_name] = {
+                name: emoji_name,
+                has_reacted: true,
+                css_class: emoji.emoji_name_to_css_class(emoji_name),
+                is_realm_emoji: is_realm_emoji,
+                url: url,
+            };
+        });
+
+        var emoji_recs = _.map(emojis, function (val, emoji_name) {
+            if (val.name) {
+                return val;
+            }
+
+            return {
+                name: emoji_name,
+                css_class: emoji.emoji_name_to_css_class(emoji_name),
+                has_reacted: false,
+                is_realm_emoji: false,
+            };
+        });
+
+        emoji_recs.sort(promote_popular);
+
+        var args = {
+            message_id: id,
+            emojis: emoji_recs,
+        };
+
+        var approx_popover_height = 400;
+        var approx_popover_width = 400;
+        var distance_from_bottom = message_viewport.height() - elt.offset().top;
+        var distance_from_right = message_viewport.width() - elt.offset().left;
+        var will_extend_beyond_bottom_of_viewport = distance_from_bottom < approx_popover_height;
+        var will_extend_beyond_top_of_viewport = elt.offset().top < approx_popover_height;
+        var will_extend_beyond_left_of_viewport = elt.offset().left < (approx_popover_width / 2);
+        var will_extend_beyond_right_of_viewport = distance_from_right < (approx_popover_width / 2);
+        var placement = 'bottom';
+        if (will_extend_beyond_bottom_of_viewport && !will_extend_beyond_top_of_viewport) {
+            placement = 'top';
+        }
+        if (will_extend_beyond_right_of_viewport && !will_extend_beyond_left_of_viewport) {
+            placement = 'left';
+        }
+        if (will_extend_beyond_left_of_viewport && !will_extend_beyond_right_of_viewport) {
+            placement = 'right';
+        }
+        elt.prop('title', '');
+        elt.popover({
+            placement: placement,
+            title:     "",
+            content:   templates.render('reaction_popover_content', args),
+            trigger:   "manual",
+        });
+        elt.popover("show");
+        elt.prop('title', 'Add reaction...');
+        $('.reaction-popover-filter').focus();
+        $(".reaction-popover-emoji-map").perfectScrollbar({
+            suppressScrollX: true,
+            useKeyboard: false,
+            wheelSpeed: 25,
+        });
+        current_message_reactions_popover_elem = elt;
+        reactions.render_reaction_show_list();
+    }
+};
+
+exports.reactions_popped = function () {
+    return current_message_reactions_popover_elem !== undefined;
+};
+
+exports.hide_reactions_popover = function () {
+    $('.has_popover').removeClass('has_popover has_reactions_popover');
+    if (exports.reactions_popped()) {
+        $(".reaction-popover-emoji-map").perfectScrollbar("destroy");
+        current_message_reactions_popover_elem.popover("destroy");
+        current_message_reactions_popover_elem = undefined;
+    }
+};
+
+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) {
+        e.stopPropagation();
+    });
+
+    $(".emoji_popover").on("click", ".emoji", function (e) {
+        var emoji_choice = $(e.target).attr("title");
+        var textarea = $("#new_message_content");
+        textarea.caret(emoji_choice);
+        textarea.focus();
+        e.stopPropagation();
+    });
+
+    $("#compose").on("click", "#emoji_map", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (emoji_map_is_open) {
+            // 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) {
+        var row = $(this).closest(".message_row");
+        e.stopPropagation();
+        emoji_picker.toggle_reactions_popover(this, rows.id(row));
+    });
+
+    $("body").on("click", ".actions_popover .reaction_button", function (e) {
+        var msgid = $(e.currentTarget).data('message-id');
+        e.preventDefault();
+        e.stopPropagation();
+        // HACK: Because we need the popover to be based off an
+        // element that definitely exists in the page even if the
+        // message wasn't sent by us and thus the .reaction_hover
+        // element is not present, we use the message's
+        // .icon-vector-chevron-down element as the base for the popover.
+        emoji_picker.toggle_reactions_popover($(".selected_message .icon-vector-chevron-down")[0], msgid);
+    });
+};
+
+return exports;
+
+}());
+
+if (typeof module !== 'undefined') {
+    module.exports = emoji_picker;
+}

static/js/hotkey.js

@@ -21,7 +21,7 @@ function open_reactions() {
     if (!message.sent_by_me) {
         target = $(current_msg_list.selected_row()).find(".icon-vector-smile")[0];
     }
-    popovers.toggle_reactions_popover(target, current_msg_list.selected_id());
+    emoji_picker.toggle_reactions_popover(target, current_msg_list.selected_id());
     return true;
 }
 
@@ -211,7 +211,7 @@ exports.process_escape_key = function (e) {
 
     // emoji window should trap escape before it is able to close the compose box
     if ($('.emoji_popover').css('display') === 'inline-block') {
-        popovers.hide_emoji_map_popover();
+        emoji_picker.hide_emoji_map_popover();
         return true;
     }
 
@@ -246,8 +246,8 @@ exports.process_escape_key = function (e) {
             return true;
         }
 
-        if (popovers.reactions_popped()) {
-            popovers.hide_reactions_popover();
+        if (emoji_picker.reactions_popped()) {
+            emoji_picker.hide_reactions_popover();
             return true;
         }
 
@@ -282,7 +282,7 @@ exports.process_enter_key = function (e) {
         return true;
     }
 
-    if (popovers.reactions_popped()) {
+    if (emoji_picker.reactions_popped()) {
         reactions.toggle_reaction(current_msg_list.selected_id());
         return true;
     }
@@ -453,7 +453,7 @@ exports.process_hotkey = function (e, hotkey) {
         return false;
     }
 
-    if (popovers.reactions_popped()) {
+    if (emoji_picker.reactions_popped()) {
         return reactions.reaction_navigate(e, event_name);
     }
 

static/js/popovers.js

@@ -4,9 +4,6 @@ var exports = {};
 
 var current_actions_popover_elem;
 var current_message_info_popover_elem;
-var current_message_reactions_popover_elem;
-var emoji_map_is_open = false;
-var emoji_map_is_rendered = false;
 var userlist_placement = "right";
 
 var list_of_popovers = [];
@@ -110,121 +107,6 @@ function show_message_info_popover(element, id) {
     }
 }
 
-function promote_popular(a, b) {
-    function rank(name) {
-        switch (name) {
-            case '+1': return 1;
-            case 'tada': return 2;
-            case 'simple_smile': return 3;
-            case 'laughing': return 4;
-            case '100': return 5;
-            default: return 999;
-        }
-    }
-
-    var diff = rank(a.name) - rank(b.name);
-
-    if (diff !== 0) {
-        return diff;
-    }
-
-    return util.strcmp(a.name, b.name);
-}
-
-exports.toggle_reactions_popover = function (element, id) {
-    var last_popover_elem = current_message_reactions_popover_elem;
-    popovers.hide_all();
-    $(element).closest('.message_row').toggleClass('has_popover has_reactions_popover');
-    if (last_popover_elem !== undefined
-        && last_popover_elem.get()[0] === element) {
-        // We want it to be the case that a user can dismiss a popover
-        // by clicking on the same element that caused the popover.
-        return;
-    }
-
-    current_msg_list.select_id(id);
-    var elt = $(element);
-    if (elt.data('popover') === undefined) {
-        var emojis = _.clone(emoji.emojis_name_to_css_class);
-        var emojis_used = reactions.get_emojis_used_by_user_for_message_id(id);
-        var realm_emojis = emoji.realm_emojis;
-        _.each(realm_emojis, function (realm_emoji, realm_emoji_name) {
-            emojis[realm_emoji_name] = {
-                name: realm_emoji_name,
-                is_realm_emoji: true,
-                url: realm_emoji.emoji_url,
-            };
-        });
-        _.each(emojis_used, function (emoji_name) {
-            var is_realm_emoji = emojis[emoji_name].is_realm_emoji;
-            var url = emojis[emoji_name].url;
-            emojis[emoji_name] = {
-                name: emoji_name,
-                has_reacted: true,
-                css_class: emoji.emoji_name_to_css_class(emoji_name),
-                is_realm_emoji: is_realm_emoji,
-                url: url,
-            };
-        });
-
-        var emoji_recs = _.map(emojis, function (val, emoji_name) {
-            if (val.name) {
-                return val;
-            }
-
-            return {
-                name: emoji_name,
-                css_class: emoji.emoji_name_to_css_class(emoji_name),
-                has_reacted: false,
-                is_realm_emoji: false,
-            };
-        });
-
-        emoji_recs.sort(promote_popular);
-
-        var args = {
-            message_id: id,
-            emojis: emoji_recs,
-        };
-
-        var approx_popover_height = 400;
-        var approx_popover_width = 400;
-        var distance_from_bottom = message_viewport.height() - elt.offset().top;
-        var distance_from_right = message_viewport.width() - elt.offset().left;
-        var will_extend_beyond_bottom_of_viewport = distance_from_bottom < approx_popover_height;
-        var will_extend_beyond_top_of_viewport = elt.offset().top < approx_popover_height;
-        var will_extend_beyond_left_of_viewport = elt.offset().left < (approx_popover_width / 2);
-        var will_extend_beyond_right_of_viewport = distance_from_right < (approx_popover_width / 2);
-        var placement = 'bottom';
-        if (will_extend_beyond_bottom_of_viewport && !will_extend_beyond_top_of_viewport) {
-            placement = 'top';
-        }
-        if (will_extend_beyond_right_of_viewport && !will_extend_beyond_left_of_viewport) {
-            placement = 'left';
-        }
-        if (will_extend_beyond_left_of_viewport && !will_extend_beyond_right_of_viewport) {
-            placement = 'right';
-        }
-        elt.prop('title', '');
-        elt.popover({
-            placement: placement,
-            title:     "",
-            content:   templates.render('reaction_popover_content', args),
-            trigger:   "manual",
-        });
-        elt.popover("show");
-        elt.prop('title', 'Add reaction...');
-        $('.reaction-popover-filter').focus();
-        $(".reaction-popover-emoji-map").perfectScrollbar({
-            suppressScrollX: true,
-            useKeyboard: false,
-            wheelSpeed: 25,
-        });
-        current_message_reactions_popover_elem = elt;
-        reactions.render_reaction_show_list();
-    }
-};
-
 exports.toggle_actions_popover = function (element, id) {
     var last_popover_elem = current_actions_popover_elem;
     popovers.hide_all();
@@ -343,10 +225,6 @@ function message_info_popped() {
     return current_message_info_popover_elem !== undefined;
 }
 
-exports.reactions_popped = function () {
-    return current_message_reactions_popover_elem !== undefined;
-};
-
 exports.hide_message_info_popover = function () {
     if (message_info_popped()) {
         current_message_info_popover_elem.popover("destroy");
@@ -354,15 +232,6 @@ exports.hide_message_info_popover = function () {
     }
 };
 
-exports.hide_reactions_popover = function () {
-    $('.has_popover').removeClass('has_popover has_reactions_popover');
-    if (exports.reactions_popped()) {
-        $(".reaction-popover-emoji-map").perfectScrollbar("destroy");
-        current_message_reactions_popover_elem.popover("destroy");
-        current_message_reactions_popover_elem = undefined;
-    }
-};
-
 exports.hide_userlist_sidebar = function () {
     $(".app-main .column-right").removeClass("expanded");
 };
@@ -388,28 +257,6 @@ function user_sidebar_popped() {
     return current_user_sidebar_popover !== undefined;
 }
 
-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.hide_user_sidebar_popover = function () {
     if (user_sidebar_popped()) {
         // this hide_* method looks different from all the others since
@@ -424,28 +271,6 @@ exports.hide_user_sidebar_popover = function () {
     }
 };
 
-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);
-}
-
 exports.register_click_handlers = function () {
     $("#main_div").on("click", ".actions_hover", function (e) {
         var row = $(this).closest(".message_row");
@@ -453,25 +278,6 @@ exports.register_click_handlers = function () {
         popovers.toggle_actions_popover(this, rows.id(row));
     });
 
-    $("#main_div").on("click", ".reactions_hover, .reaction_button", function (e) {
-        var row = $(this).closest(".message_row");
-        e.stopPropagation();
-        popovers.toggle_reactions_popover(this, rows.id(row));
-    });
-
-
-    $("body").on("click", ".actions_popover .reaction_button", function (e) {
-        var msgid = $(e.currentTarget).data('message-id');
-        e.preventDefault();
-        e.stopPropagation();
-        // HACK: Because we need the popover to be based off an
-        // element that definitely exists in the page even if the
-        // message wasn't sent by us and thus the .reaction_hover
-        // element is not present, we use the message's
-        // .icon-vector-chevron-down element as the base for the popover.
-        popovers.toggle_reactions_popover($(".selected_message .icon-vector-chevron-down")[0], msgid);
-    });
-
     $("#main_div").on("click", ".sender_info_hover", function (e) {
         var row = $(this).closest(".message_row");
         e.stopPropagation();
@@ -516,34 +322,6 @@ exports.register_click_handlers = function () {
         });
     }());
 
-    $("body").on("click", ".emoji_popover", function (e) {
-        e.stopPropagation();
-    });
-
-    $(".emoji_popover").on("click", ".emoji", function (e) {
-        var emoji_choice = $(e.target).attr("title");
-        var textarea = $("#new_message_content");
-        textarea.caret(emoji_choice);
-        textarea.focus();
-        e.stopPropagation();
-    });
-
-    $("#compose").on("click", "#emoji_map", function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        if (emoji_map_is_open) {
-            // If the popover is already shown, clicking again should toggle it.
-            popovers.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;
-            }
-            popovers.show_emoji_map_popover();
-        }
-    });
-
     $('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;
@@ -784,21 +562,21 @@ 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_map_is_open ||
-        popovers.reactions_popped();
+        message_info_popped() || emoji_picker.emoji_map_is_open ||
+        emoji_picker.reactions_popped();
 };
 
 exports.hide_all = function () {
     $('.has_popover').removeClass('has_popover has_actions_popover has_reactions_popover');
     popovers.hide_actions_popover();
     popovers.hide_message_info_popover();
-    popovers.hide_reactions_popover();
+    emoji_picker.hide_reactions_popover();
     stream_popover.hide_stream_popover();
     stream_popover.hide_topic_popover();
     popovers.hide_user_sidebar_popover();
     popovers.hide_userlist_sidebar();
     stream_popover.restore_stream_list_size();
-    popovers.hide_emoji_map_popover();
+    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

@@ -70,7 +70,7 @@ exports.toggle_reaction = function (message_id, emoji_name) {
         operation = 'remove';
     }
     send_reaction_ajax(message_id, emoji_name, operation);
-    popovers.hide_reactions_popover();
+    emoji_picker.hide_reactions_popover();
 };
 
 var reaction_show_list = []; // local reaction_show_list

static/js/server_events.js

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

zproject/settings.py

@@ -950,6 +950,7 @@ JS_SPECS = {
             'js/typing_data.js',
             'js/typing_events.js',
             'js/ui_init.js',
+            'js/emoji_picker.js',
             # JS bundled by webpack is also included here if PIPELINE_ENABLED setting is true
         ],
         'output_filename': 'min/app.js'