From f8b3ce7d15c76f1c5680e36edcece4e3a9c48569 Mon Sep 17 00:00:00 2001 From: Jack Zhang <15jzhang@gmail.com> Date: Thu, 27 Apr 2017 01:27:25 -0400 Subject: [PATCH] emoji: Move all emoji picker logic/events into emoji_picker module. Added emoji_picker.js to static asset pipeline. --- .eslintrc.json | 1 + frontend_tests/node_tests/dispatch.js | 1 + frontend_tests/node_tests/hotkey.js | 5 +- static/js/click_handlers.js | 3 +- static/js/emoji_picker.js | 238 ++++++++++++++++++++++++++ static/js/hotkey.js | 12 +- static/js/popovers.js | 230 +------------------------ static/js/reactions.js | 2 +- static/js/server_events.js | 2 +- zproject/settings.py | 1 + 10 files changed, 259 insertions(+), 236 deletions(-) create mode 100644 static/js/emoji_picker.js diff --git a/.eslintrc.json b/.eslintrc.json index 31500943ac..9825db73ce 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -143,6 +143,7 @@ "drafts": false, "katex": false, "Clipboard": false, + "emoji_picker": false, "hotspots": false }, "rules": { diff --git a/frontend_tests/node_tests/dispatch.js b/frontend_tests/node_tests/dispatch.js index ebf58bc14d..00ef032575 100644 --- a/frontend_tests/node_tests/dispatch.js +++ b/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 diff --git a/frontend_tests/node_tests/hotkey.js b/frontend_tests/node_tests/hotkey.js index f7e53d26d1..e3df6787a7 100644 --- a/frontend_tests/node_tests/hotkey.js +++ b/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'); }()); diff --git a/static/js/click_handlers.js b/static/js/click_handlers.js index 449761cd42..85897560ef 100644 --- a/static/js/click_handlers.js +++ b/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; } diff --git a/static/js/emoji_picker.js b/static/js/emoji_picker.js new file mode 100644 index 0000000000..78e5739d11 --- /dev/null +++ b/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; +} diff --git a/static/js/hotkey.js b/static/js/hotkey.js index 0ee51d70a4..80f5ea17ea 100644 --- a/static/js/hotkey.js +++ b/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); } diff --git a/static/js/popovers.js b/static/js/popovers.js index 2e05d2f8a5..fcd7fe7555 100644 --- a/static/js/popovers.js +++ b/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) { diff --git a/static/js/reactions.js b/static/js/reactions.js index 6886ba26d5..c18d53a72d 100644 --- a/static/js/reactions.js +++ b/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 diff --git a/static/js/server_events.js b/static/js/server_events.js index 16060979b6..65d9b30f33 100644 --- a/static/js/server_events.js +++ b/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': diff --git a/zproject/settings.py b/zproject/settings.py index 335c50629d..46e2c639c3 100644 --- a/zproject/settings.py +++ b/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'