emoji_pickers: Fix broken flag emojis.

Due to differences between the codepoints of flag emojis in
`emoji_map.json` and iamcal's dataset, we need to patch the
css classes for the flag emojis temporarily until the migration
to iamcal's dataset is complete inorder to render them properly.
There is a difference between the images of flag emojis in our
old emoji farm and iamcal's spritesheets and since we have not
yet switched to using spritesheets for displaying emojis in
messages, there is a difference between the flag emojis as
rendered in messages and in emoji pickers.

static/js/emoji.js

@@ -56,6 +56,12 @@ exports.update_emojis = function update_emojis(realm_emojis) {
         exports.emojis_name_to_css_class[emoji.emoji_name] = css_class;
         exports.emojis_by_name[emoji.emoji_name] = emoji.emoji_url;
     });
+    // Code for patching CSS classes for flag emojis so that they render
+    // properly in emoji picker. Remove after migration to iamcal dataset
+    // is complete.
+    _.each(emoji_codes.patched_css_classes, function (css_class, name) {
+        exports.emojis_name_to_css_class[name] = css_class;
+    });
     exports.emojis_by_unicode = {};
     _.each(default_unicode_emojis, function (emoji) {
         exports.emojis_by_unicode[emoji.emoji_name] = emoji.emoji_url;

static/js/emoji_picker.js

@@ -69,7 +69,7 @@ function generate_emoji_picker_content(id) {
             emojis[emoji_name] = {
                 name: emoji_name,
                 has_reacted: true,
-                css_class: emoji.emoji_name_to_css_class(emoji_name),
+                css_class: emoji.emojis_name_to_css_class[emoji_name],
                 is_realm_emoji: emojis[emoji_name].is_realm_emoji,
                 url: emojis[emoji_name].url,
             };
@@ -83,7 +83,7 @@ function generate_emoji_picker_content(id) {
 
         return {
             name: emoji_name,
-            css_class: emoji.emoji_name_to_css_class(emoji_name),
+            css_class: emoji.emojis_name_to_css_class[emoji_name],
             has_reacted: false,
             is_realm_emoji: false,
         };

tools/setup/emoji/build_emoji

@@ -47,6 +47,8 @@ exports.name_to_codepoint = %(name_to_codepoint)s;
 
 exports.emoji_catalog = %(emoji_catalog)s;
 
+exports.patched_css_classes = %(patched_css_classes)s;
+
 return exports;
 }());
 if (typeof module !== 'undefined') {
@@ -294,11 +296,20 @@ def dump_emojis(cache_path):
     up_index = names.index('thumbs_up')
     names[down_index], names[up_index] = ('thumbs_up', 'thumbs_down')
 
+    # Patch CSS classes of flag emojis.
+    patched_css_classes = {}
+    for emoji in emoji_data:
+        if emoji['category'] == 'Flags':
+            for name in emoji['short_names']:
+                if name in emoji_map:
+                    patched_css_classes[str(name)] = str(emoji['unified'].lower())
+
     emoji_codes_file.write(EMOJI_CODES_FILE_TEMPLATE % {
         'names': names,
         'codepoints': sorted([str(code_point) for code_point in set(emoji_map.values())]),
         'name_to_codepoint': {str(key): str(emoji_map[key]) for key in emoji_map},
-        'emoji_catalog': emoji_catalog
+        'emoji_catalog': emoji_catalog,
+        'patched_css_classes': patched_css_classes
     })
     emoji_codes_file.close()