[wip] popovers: rendering the emoji picker only once.

frontend_tests/node_tests/dispatch.js

@@ -35,6 +35,9 @@ set_global('echo', {
     set_realm_filters: noop,
 });
 
+// To support popovers object referenced in server_events.js
+add_dependencies({popovers: 'js/popovers.js'});
+
 // page_params is highly coupled to dispatching now
 set_global('page_params', {test_suite: false});
 var page_params = global.page_params;

static/js/emoji.js

@@ -28,6 +28,10 @@ exports.emoji_name_to_css_class = function (emoji_name) {
 };
 
 exports.update_emojis = function update_emojis(realm_emojis) {
+    // exports.realm_emojis is emptied before adding the realm-specific emoji to it.
+    // This makes sure that in case of deletion, the deleted realm_emojis don't
+    //  persist in exports.realm_emojis.
+    exports.realm_emojis = {};
     // Copy the default emoji list and add realm-specific emoji to it
     exports.emojis = default_emojis.slice(0);
     _.each(realm_emojis, function (data, name) {

static/js/popovers.js

@@ -6,7 +6,7 @@ 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 = [];
@@ -381,13 +381,27 @@ 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()) {
@@ -423,13 +437,6 @@ function render_emoji_popover() {
     }());
     $('.emoji_popover').empty();
     $('.emoji_popover').append(content);
-
-    $('.drag').show();
-    $('.emoji_popover').css('display', 'inline-block');
-
-    $("#new_message_content").focus();
-
-    emoji_map_is_open = true;
 }
 
 exports.register_click_handlers = function () {
@@ -520,10 +527,14 @@ exports.register_click_handlers = function () {
         if (emoji_map_is_open) {
             // If the popover is already shown, clicking again should toggle it.
             popovers.hide_emoji_map_popover();
-            return;
+        } 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();
         }
-        popovers.hide_all();
-        render_emoji_popover();
     });
 
     $('body').on('click', '.user_popover .narrow_to_private_messages', function (e) {

static/js/server_events.js

@@ -129,6 +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();
         break;
 
     case 'realm_filters':