diff --git a/.eslintrc.json b/.eslintrc.json index 4a45fde58d..30fc5066bd 100644 --- a/.eslintrc.json +++ b/.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, diff --git a/frontend_tests/node_tests/dispatch.js b/frontend_tests/node_tests/dispatch.js index 07e55cd6fc..4914e65dda 100644 --- a/frontend_tests/node_tests/dispatch.js +++ b/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); diff --git a/frontend_tests/node_tests/hotkey.js b/frontend_tests/node_tests/hotkey.js index 14a6c322f2..e40fd63dfb 100644 --- a/frontend_tests/node_tests/hotkey.js +++ b/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, }); diff --git a/frontend_tests/node_tests/popovers.js b/frontend_tests/node_tests/popovers.js index 8792eb0dc0..5f3938156a 100644 --- a/frontend_tests/node_tests/popovers.js +++ b/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, }); diff --git a/frontend_tests/node_tests/reactions.js b/frontend_tests/node_tests/reactions.js index b2235e42f5..1277857f89 100644 --- a/frontend_tests/node_tests/reactions.js +++ b/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, diff --git a/frontend_tests/node_tests/ui_init.js b/frontend_tests/node_tests/ui_init.js index 1f695d55f0..fa5ee00aae 100644 --- a/frontend_tests/node_tests/ui_init.js +++ b/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() {}}); diff --git a/static/js/bundles/app.js b/static/js/bundles/app.js index 3c5f602169..bd93574f31 100644 --- a/static/js/bundles/app.js +++ b/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"; diff --git a/static/js/click_handlers.js b/static/js/click_handlers.js index 0392fa8a35..b46016dee9 100644 --- a/static/js/click_handlers.js +++ b/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"; diff --git a/static/js/emoji_picker.js b/static/js/emoji_picker.js index 898d0162c4..5e72069949 100644 --- a/static/js/emoji_picker.js +++ b/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(); +} diff --git a/static/js/global.d.ts b/static/js/global.d.ts index 3555bed33b..9035e0bea0 100644 --- a/static/js/global.d.ts +++ b/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; diff --git a/static/js/hotkey.js b/static/js/hotkey.js index a0ce2adcbd..786b90df2e 100644 --- a/static/js/hotkey.js +++ b/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"; diff --git a/static/js/popovers.js b/static/js/popovers.js index 6b46060e39..56591f11f9 100644 --- a/static/js/popovers.js +++ b/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"; diff --git a/static/js/reactions.js b/static/js/reactions.js index 3a7753dc10..1998f232a8 100644 --- a/static/js/reactions.js +++ b/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"; diff --git a/static/js/server_events_dispatch.js b/static/js/server_events_dispatch.js index cdeea3ca10..dfa19bae41 100644 --- a/static/js/server_events_dispatch.js +++ b/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"; diff --git a/static/js/ui_init.js b/static/js/ui_init.js index 00e33d7004..7805d153c9 100644 --- a/static/js/ui_init.js +++ b/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";