js: Convert static/js/emoji_picker.js to ES6 module.

Signed-off-by: Anders Kaseorg <anders@zulip.com>

.eslintrc.json

@@ -132,7 +132,6 @@
                 "csrf_token": false,
                 "current_msg_list": true,
                 "dropdown_list_widget": false,
-                "emoji_picker": false,
                 "favicon": false,
                 "flatpickr": false,
                 "helpers": false,

frontend_tests/node_tests/dispatch.js

@@ -31,7 +31,8 @@ rewiremock("../../static/js/bot_data").with(bot_data);
 rewiremock("../../static/js/compose").with({});
 const composebox_typeahead = set_global("composebox_typeahead", {});
 set_global("current_msg_list", {});
-const emoji_picker = set_global("emoji_picker", {});
+const emoji_picker = {__esModule: true};
+rewiremock("../../static/js/emoji_picker").with(emoji_picker);
 set_global("home_msg_list", {});
 const hotspots = {__esModule: true};
 rewiremock("../../static/js/hotspots").with(hotspots);

frontend_tests/node_tests/hotkey.js

@@ -34,9 +34,11 @@ rewiremock("../../static/js/stream_popover").with({
     all_messages_popped: () => false,
     starred_messages_popped: () => false,
 });
-const emoji_picker = set_global("emoji_picker", {
+const emoji_picker = {
+    __esModule: true,
     reactions_popped: () => false,
-});
+};
+rewiremock("../../static/js/emoji_picker").with(emoji_picker);
 rewiremock("../../static/js/hotspots").with({
     is_open: () => false,
 });

frontend_tests/node_tests/popovers.js

@@ -25,7 +25,7 @@ rewiremock("../../static/js/message_viewport").with({
     height: () => 500,
 });
 
-set_global("emoji_picker", {
+rewiremock("../../static/js/emoji_picker").with({
     hide_emoji_popover: noop,
 });
 

frontend_tests/node_tests/reactions.js

@@ -19,9 +19,12 @@ set_global("page_params", {
 
 const channel = {__esModule: true};
 rewiremock("../../static/js/channel").with(channel);
-const emoji_picker = set_global("emoji_picker", {
+const emoji_picker = {
+    __esModule: true,
     hide_emoji_popover() {},
-});
+};
+
+rewiremock("../../static/js/emoji_picker").with(emoji_picker);
 
 const message = {
     id: 1001,

frontend_tests/node_tests/ui_init.js

@@ -71,7 +71,7 @@ rewiremock("../../static/js/activity").with({initialize() {}});
 rewiremock("../../static/js/click_handlers").with({initialize() {}});
 rewiremock("../../static/js/compose_pm_pill").with({initialize() {}});
 rewiremock("../../static/js/drafts").with({initialize() {}});
-set_global("emoji_picker", {initialize() {}});
+rewiremock("../../static/js/emoji_picker").with({initialize() {}});
 rewiremock("../../static/js/gear_menu").with({initialize() {}});
 rewiremock("../../static/js/hashchange").with({initialize() {}});
 rewiremock("../../static/js/hotspots").with({initialize() {}});

static/js/bundles/app.js

@@ -38,7 +38,6 @@ import "../dropdown_list_widget";
 import "../settings_profile_fields";
 import "../settings";
 import "../ui_init";
-import "../emoji_picker";
 import "../compose_ui";
 import "../panels";
 import "../recent_topics";

static/js/click_handlers.js

@@ -11,6 +11,7 @@ import * as buddy_data from "./buddy_data";
 import * as channel from "./channel";
 import * as compose from "./compose";
 import * as compose_state from "./compose_state";
+import * as emoji_picker from "./emoji_picker";
 import * as hash_util from "./hash_util";
 import * as hashchange from "./hashchange";
 import * as hotspots from "./hotspots";

static/js/emoji_picker.js

@@ -1,17 +1,15 @@
-"use strict";
+import emoji_codes from "../generated/emoji/emoji_codes.json";
+import * as emoji from "../shared/js/emoji";
+import * as typeahead from "../shared/js/typeahead";
+import render_emoji_popover from "../templates/emoji_popover.hbs";
+import render_emoji_popover_content from "../templates/emoji_popover_content.hbs";
+import render_emoji_popover_search_results from "../templates/emoji_popover_search_results.hbs";
+import render_emoji_showcase from "../templates/emoji_showcase.hbs";
 
-const emoji_codes = require("../generated/emoji/emoji_codes.json");
-const emoji = require("../shared/js/emoji");
-const typeahead = require("../shared/js/typeahead");
-const render_emoji_popover = require("../templates/emoji_popover.hbs");
-const render_emoji_popover_content = require("../templates/emoji_popover_content.hbs");
-const render_emoji_popover_search_results = require("../templates/emoji_popover_search_results.hbs");
-const render_emoji_showcase = require("../templates/emoji_showcase.hbs");
-
-const message_store = require("./message_store");
-const popovers = require("./popovers");
-const reactions = require("./reactions");
-const rows = require("./rows");
+import * as message_store from "./message_store";
+import * as popovers from "./popovers";
+import * as reactions from "./reactions";
+import * as rows from "./rows";
 
 // Emoji picker is of fixed width and height. Update these
 // whenever these values are changed in `reactions.css`.
@@ -21,7 +19,7 @@ const APPROX_WIDTH = 255;
 // The functionalities for reacting to a message with an emoji
 // and composing a message with an emoji share a single widget,
 // implemented as the emoji_popover.
-exports.complete_emoji_catalog = [];
+export let complete_emoji_catalog = [];
 
 let current_message_emoji_popover_elem;
 let emoji_catalog_last_coordinates = {
@@ -53,14 +51,14 @@ function get_total_sections() {
     if (search_is_active) {
         return 1;
     }
-    return exports.complete_emoji_catalog.length;
+    return complete_emoji_catalog.length;
 }
 
 function get_max_index(section) {
     if (search_is_active) {
         return search_results.length;
     } else if (section >= 0 && section < get_total_sections()) {
-        return exports.complete_emoji_catalog[section].emojis.length;
+        return complete_emoji_catalog[section].emojis.length;
     }
     return undefined;
 }
@@ -107,7 +105,7 @@ function show_emoji_catalog() {
     search_is_active = false;
 }
 
-exports.rebuild_catalog = function () {
+export function rebuild_catalog() {
     const realm_emojis = emoji.active_realm_emojis;
 
     const catalog = new Map();
@@ -145,12 +143,12 @@ exports.rebuild_catalog = function () {
     catalog.set("Popular", popular);
 
     const categories = EMOJI_CATEGORIES.filter((category) => catalog.has(category.name));
-    exports.complete_emoji_catalog = categories.map((category) => ({
+    complete_emoji_catalog = categories.map((category) => ({
         name: category.name,
         icon: category.icon,
         emojis: catalog.get(category.name),
     }));
-};
+}
 
 const generate_emoji_picker_content = function (id) {
     let emojis_used = [];
@@ -164,7 +162,7 @@ const generate_emoji_picker_content = function (id) {
 
     return render_emoji_popover_content({
         message_id: id,
-        emoji_categories: exports.complete_emoji_catalog,
+        emoji_categories: complete_emoji_catalog,
     });
 };
 
@@ -178,20 +176,20 @@ function refill_section_head_offsets(popover) {
     });
 }
 
-exports.reactions_popped = function () {
+export function reactions_popped() {
     return current_message_emoji_popover_elem !== undefined;
-};
+}
 
-exports.hide_emoji_popover = function () {
+export function hide_emoji_popover() {
     $(".has_popover").removeClass("has_popover has_emoji_popover");
-    if (exports.reactions_popped()) {
+    if (reactions_popped()) {
         const orig_title = current_message_emoji_popover_elem.data("original-title");
         current_message_emoji_popover_elem.popover("destroy");
         current_message_emoji_popover_elem.prop("title", orig_title);
         current_message_emoji_popover_elem.removeClass("reaction_button_visible");
         current_message_emoji_popover_elem = undefined;
     }
-};
+}
 
 function get_selected_emoji() {
     return $(".emoji-popover-emoji:focus")[0];
@@ -212,7 +210,7 @@ function filter_emojis() {
     const message_id = $(".emoji-search-results-container").data("message-id");
     const search_results_visible = $(".emoji-search-results-container").is(":visible");
     if (query !== "") {
-        const categories = exports.complete_emoji_catalog;
+        const categories = complete_emoji_catalog;
         const search_terms = query.split(" ");
         search_results.length = 0;
 
@@ -259,7 +257,7 @@ function toggle_reaction(emoji_name, event) {
     reactions.toggle_emoji_reaction(message_id, emoji_name, event);
 
     if (event === undefined || !event.shiftKey) {
-        exports.hide_emoji_popover();
+        hide_emoji_popover();
     }
 
     $(event.target).closest(".reaction").toggleClass("reacted");
@@ -406,13 +404,13 @@ function change_focus_to_filter() {
     reset_emoji_showcase();
 }
 
-exports.navigate = function (event_name, e) {
+export function navigate(event_name, e) {
     if (
         event_name === "toggle_reactions_popover" &&
-        exports.reactions_popped() &&
+        reactions_popped() &&
         (search_is_active === false || search_results.length === 0)
     ) {
-        exports.hide_emoji_popover();
+        hide_emoji_popover();
         return true;
     }
 
@@ -512,7 +510,7 @@ exports.navigate = function (event_name, e) {
         return maybe_change_focused_emoji($emoji_map, next_coord.section, next_coord.index);
     }
     return false;
-};
+}
 
 function process_keypress(e) {
     const is_filter_focused = $(".emoji-popover-filter").is(":focus");
@@ -546,7 +544,7 @@ function process_keypress(e) {
     }
 }
 
-exports.emoji_select_tab = function (elt) {
+export function emoji_select_tab(elt) {
     const scrolltop = elt.scrollTop();
     const scrollheight = elt.prop("scrollHeight");
     const elt_height = elt.height();
@@ -571,13 +569,13 @@ exports.emoji_select_tab = function (elt) {
             "active",
         );
     }
-};
+}
 
 function register_popover_events(popover) {
     const $emoji_map = popover.find(".emoji-popover-emoji-map");
 
     ui.get_scroll_element($emoji_map).on("scroll", () => {
-        exports.emoji_select_tab(ui.get_scroll_element($emoji_map));
+        emoji_select_tab(ui.get_scroll_element($emoji_map));
     });
 
     $(".emoji-popover-filter").on("input", filter_emojis);
@@ -594,7 +592,7 @@ function register_popover_events(popover) {
     });
 }
 
-exports.build_emoji_popover = function (elt, id) {
+export function build_emoji_popover(elt, id) {
     const template_args = {
         class: "emoji-info-popover",
     };
@@ -640,9 +638,9 @@ exports.build_emoji_popover = function (elt, id) {
 
     elt.ready(() => refill_section_head_offsets(popover));
     register_popover_events(popover);
-};
+}
 
-exports.toggle_emoji_popover = function (element, id) {
+export function toggle_emoji_popover(element, id) {
     const last_popover_elem = current_message_emoji_popover_elem;
     popovers.hide_all();
     if (last_popover_elem !== undefined && last_popover_elem.get()[0] === element) {
@@ -660,12 +658,12 @@ exports.toggle_emoji_popover = function (element, id) {
     if (elt.data("popover") === undefined) {
         // Keep the element over which the popover is based off visible.
         elt.addClass("reaction_button_visible");
-        exports.build_emoji_popover(elt, id);
+        build_emoji_popover(elt, id);
     }
     reset_emoji_showcase();
-};
+}
 
-exports.register_click_handlers = function () {
+export function register_click_handlers() {
     $(document).on("click", ".emoji-popover-emoji.reaction", function (e) {
         // When an emoji is clicked in the popover,
         // if the user has reacted to this message with this emoji
@@ -690,7 +688,7 @@ exports.register_click_handlers = function () {
             compose_ui.insert_syntax_and_focus(emoji_text);
         }
         e.stopPropagation();
-        exports.hide_emoji_popover();
+        hide_emoji_popover();
     });
 
     $("body").on("click", "#emoji_map", function (e) {
@@ -706,14 +704,14 @@ exports.register_click_handlers = function () {
         } else {
             edit_message_id = null;
         }
-        exports.toggle_emoji_popover(this);
+        toggle_emoji_popover(this);
     });
 
     $("#main_div").on("click", ".reaction_button", function (e) {
         e.stopPropagation();
 
         const message_id = rows.get_message_id(this);
-        exports.toggle_emoji_popover(this, message_id);
+        toggle_emoji_popover(this, message_id);
     });
 
     $("#main_div").on("mouseenter", ".reaction_button", (e) => {
@@ -746,7 +744,7 @@ exports.register_click_handlers = function () {
         // element is not present, we use the message's
         // .fa-chevron-down element as the base for the popover.
         const elem = $(".selected_message .actions_hover")[0];
-        exports.toggle_emoji_popover(elem, message_id);
+        toggle_emoji_popover(elem, message_id);
     });
 
     $("body").on("click", ".emoji-popover-tab-item", function (e) {
@@ -784,10 +782,8 @@ exports.register_click_handlers = function () {
             true,
         );
     });
-};
+}
 
-exports.initialize = function () {
-    exports.rebuild_catalog();
-};
-
-window.emoji_picker = exports;
+export function initialize() {
+    rebuild_catalog();
+}

static/js/global.d.ts

@@ -10,7 +10,6 @@ declare let compose_ui: any;
 declare let csrf_token: any;
 declare let current_msg_list: any;
 declare let emoji: any;
-declare let emoji_picker: any;
 declare let favicon: any;
 declare let helpers: any;
 declare let home_msg_list: any;

static/js/hotkey.js

@@ -7,6 +7,7 @@ import * as compose_state from "./compose_state";
 import * as condense from "./condense";
 import * as copy_and_paste from "./copy_and_paste";
 import * as drafts from "./drafts";
+import * as emoji_picker from "./emoji_picker";
 import * as feedback_widget from "./feedback_widget";
 import * as gear_menu from "./gear_menu";
 import * as hashchange from "./hashchange";

static/js/popovers.js

@@ -16,6 +16,7 @@ import render_user_profile_modal from "../templates/user_profile_modal.hbs";
 import * as buddy_data from "./buddy_data";
 import * as compose_state from "./compose_state";
 import * as condense from "./condense";
+import * as emoji_picker from "./emoji_picker";
 import * as feature_flags from "./feature_flags";
 import * as hash_util from "./hash_util";
 import * as message_edit from "./message_edit";

static/js/reactions.js

@@ -4,6 +4,7 @@ import * as emoji from "../shared/js/emoji";
 import render_message_reaction from "../templates/message_reaction.hbs";
 
 import * as channel from "./channel";
+import * as emoji_picker from "./emoji_picker";
 import * as message_store from "./message_store";
 import * as people from "./people";
 

static/js/server_events_dispatch.js

@@ -7,6 +7,7 @@ import * as attachments_ui from "./attachments_ui";
 import * as bot_data from "./bot_data";
 import * as compose from "./compose";
 import * as compose_fade from "./compose_fade";
+import * as emoji_picker from "./emoji_picker";
 import * as hotspots from "./hotspots";
 import * as markdown from "./markdown";
 import * as message_edit from "./message_edit";

static/js/ui_init.js

@@ -16,6 +16,7 @@ import * as condense from "./condense";
 import * as copy_and_paste from "./copy_and_paste";
 import * as drafts from "./drafts";
 import * as echo from "./echo";
+import * as emoji_picker from "./emoji_picker";
 import * as emojisets from "./emojisets";
 import * as gear_menu from "./gear_menu";
 import * as hashchange from "./hashchange";