From a9505654daac46e5c828f43a7d12613f44c1b4fd Mon Sep 17 00:00:00 2001 From: Jack Zhang <15jzhang@gmail.com> Date: Sat, 29 Apr 2017 03:43:13 -0400 Subject: [PATCH] emoji: Replace the old compose emoji picker with the reactions picker. This removes the old compose emoji picker in its entirety, changing the few callbacks needed to launch the reactions-style emoji picker instead and hook it up properly. Callbacks for reactions and composing messages are distinguished by selecting for, respectively, the .reaction and .composition classes. Fixes #4122. --- frontend_tests/node_tests/templates.js | 28 -------- static/js/click_handlers.js | 4 +- static/js/emoji_picker.js | 70 ++----------------- static/js/hotkey.js | 6 -- static/js/popovers.js | 42 +---------- static/js/reactions.js | 2 +- static/js/server_events.js | 1 - static/js/ui_init.js | 5 -- static/styles/compose.css | 31 -------- .../emoji_popover_content.handlebars | 11 --- .../reaction_popover_content.handlebars | 4 +- templates/zerver/compose.html | 1 - 12 files changed, 12 insertions(+), 193 deletions(-) delete mode 100644 static/templates/emoji_popover_content.handlebars diff --git a/frontend_tests/node_tests/templates.js b/frontend_tests/node_tests/templates.js index 222969a9cd..4d4778aa6c 100644 --- a/frontend_tests/node_tests/templates.js +++ b/frontend_tests/node_tests/templates.js @@ -522,34 +522,6 @@ function render(template_name, args) { assert.equal(li.text(), 'The email will be forwarded to this stream'); }()); -(function emoji_popover_content() { - var args = (function () { - var map = {}; - for (var x in global.emoji.emojis_name_to_css_class) { - if (!global.emoji.realm_emojis[x]) { - map[x] = { - name: x, - css_name: global.emoji.emojis_name_to_css_class[x], - url: global.emoji.emojis_by_name[x], - }; - } - } - - return { - emoji_list: map, - realm_emoji: global.emoji.realm_emojis, - }; - }()); - - var html = '
'; - html += render('emoji_popover_content', args); - html += "
"; - // test to make sure the first emoji is present in the popover - var emoji_key = $(html).find(".emoji-100").attr('title'); - assert.equal(emoji_key, ':100:'); - global.write_handlebars_output("emoji_popover_content", html); -}()); - (function group_pms() { var args = { group_pms: [ diff --git a/static/js/click_handlers.js b/static/js/click_handlers.js index 85897560ef..6b9603f662 100644 --- a/static/js/click_handlers.js +++ b/static/js/click_handlers.js @@ -386,7 +386,7 @@ $(function () { function handle_compose_click(e) { // 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")) { + if ($(e.target).is("#emoji_map, img.emoji, .drag")) { return; } // Don't let clicks in the compose area count as @@ -580,7 +580,7 @@ $(function () { if (compose_state.composing() && !$(e.target).is("a") && ($(e.target).closest(".modal").length === 0) && window.getSelection().toString() === "" && - ($(e.target).closest('#emoji_map').length === 0)) { + ($(e.target).closest('.popover-content').length === 0)) { compose_actions.cancel(); } }); diff --git a/static/js/emoji_picker.js b/static/js/emoji_picker.js index cfea05d055..8effb639e2 100644 --- a/static/js/emoji_picker.js +++ b/static/js/emoji_picker.js @@ -6,30 +6,6 @@ var exports = {}; // 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) { @@ -171,55 +147,21 @@ exports.hide_reactions_popover = function () { } }; -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"); + $(document).on('click', '.reaction-popover-reaction.composition', function (e) { + var emoji_text = ':' + this.title + ':'; var textarea = $("#new_message_content"); - textarea.caret(emoji_choice); + textarea.caret(emoji_text); textarea.focus(); e.stopPropagation(); + + emoji_picker.hide_reactions_popover(); }); $("#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(); - } + emoji_picker.toggle_reactions_popover(this); }); $("#main_div").on("click", ".reactions_hover, .reaction_button", function (e) { diff --git a/static/js/hotkey.js b/static/js/hotkey.js index 80f5ea17ea..a3bd3d6202 100644 --- a/static/js/hotkey.js +++ b/static/js/hotkey.js @@ -209,12 +209,6 @@ exports.process_escape_key = function (e) { return true; } - // emoji window should trap escape before it is able to close the compose box - if ($('.emoji_popover').css('display') === 'inline-block') { - emoji_picker.hide_emoji_map_popover(); - return true; - } - if (exports.processing_text()) { if ($(".message_edit_content").filter(":focus").length > 0) { row = $(".message_edit_content").filter(":focus").closest(".message_row"); diff --git a/static/js/popovers.js b/static/js/popovers.js index fcd7fe7555..292225620d 100644 --- a/static/js/popovers.js +++ b/static/js/popovers.js @@ -284,44 +284,6 @@ exports.register_click_handlers = function () { show_message_info_popover(this, rows.id(row)); }); - (function () { - // create locally scoped variables for drag tracking. - var meta = { - drag: false, - c: { - y: null, - }, - $popover: $(".emoji_popover"), - MIN_HEIGHT: 25, - MAX_HEIGHT: 300, - }; - - // drag must start within the .drag zone. - $(".drag").on("mousedown", function (e) { - meta.drag = true; - meta.c.y = e.screenY; - }); - - // mouse move that originated in .drag zone can go anywhere. - $("body").on("mousemove", function (e) { - if (meta.drag) { - var diff = e.screenY - meta.c.y; - var resolved_height = meta.$popover.height() - diff; - - if (resolved_height > meta.MIN_HEIGHT && resolved_height < meta.MAX_HEIGHT) { - meta.$popover.height(resolved_height); - } - meta.c.y = e.screenY; - } - }); - - // drag ends on mouseup. This cancels all drag events without interfering - // with any other events. - $("body").on("mouseup", function () { - meta.drag = false; - }); - }()); - $('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; @@ -562,8 +524,7 @@ 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_picker.emoji_map_is_open || - emoji_picker.reactions_popped(); + message_info_popped() || emoji_picker.reactions_popped(); }; exports.hide_all = function () { @@ -576,7 +537,6 @@ exports.hide_all = function () { popovers.hide_user_sidebar_popover(); popovers.hide_userlist_sidebar(); stream_popover.restore_stream_list_size(); - 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 c18d53a72d..c4a186a7a6 100644 --- a/static/js/reactions.js +++ b/static/js/reactions.js @@ -121,7 +121,7 @@ function maybe_select_emoji(e) { } } -$(document).on('click', '.reaction-popover-reaction', function () { +$(document).on('click', '.reaction-popover-reaction.reaction', function () { // When an emoji is clicked in the popover, // if the user has reacted to this message with this emoji // the reaction is removed diff --git a/static/js/server_events.js b/static/js/server_events.js index 65d9b30f33..5278394aa9 100644 --- a/static/js/server_events.js +++ b/static/js/server_events.js @@ -129,7 +129,6 @@ function dispatch_normal_event(event) { case 'realm_emoji': emoji.update_emojis(event.realm_emoji); settings_emoji.populate_emoji(event.realm_emoji); - emoji_picker.reset_emoji_popover(); break; case 'realm_filters': diff --git a/static/js/ui_init.js b/static/js/ui_init.js index 7cb1844363..1d3065fac7 100644 --- a/static/js/ui_init.js +++ b/static/js/ui_init.js @@ -98,11 +98,6 @@ $(function () { } }); - // Override the #compose mousewheel prevention below just for the emoji box - $('.emoji_popover').mousewheel(function (e) { - e.stopPropagation(); - }); - // Ignore wheel events in the compose area which weren't already handled above. $('#compose').mousewheel(function (e) { e.stopPropagation(); diff --git a/static/styles/compose.css b/static/styles/compose.css index 564d1c317f..2f0c493678 100644 --- a/static/styles/compose.css +++ b/static/styles/compose.css @@ -421,37 +421,6 @@ input.recipient_box { cursor: ns-resize; } -.emoji_popover { - display: none; - position: relative; - margin-top: 10px; - bottom: 0px; - z-index: 1010; - /* take away 2px of borders and 2px of padding. */ - width: calc(100% - 2px - 2px); - height: 140px; - padding: 1px; - text-align: center; - background-color: #ffffff; - border: 1px solid #ddd; - border: 1px solid rgba(0, 0, 0, 0.2); - border-radius: 4px; - overflow: hidden; - overflow-y: scroll; -} - -.emoji_popover .emoji { - margin: 2px; - box-sizing: border-box; - cursor: pointer; - display: inline-block; -} - -.emoji_popover .emoji:active { - border-radius: 5px; - border: 2px white solid; -} - #enter_sends { margin-top: 0px; margin-right: 5px; diff --git a/static/templates/emoji_popover_content.handlebars b/static/templates/emoji_popover_content.handlebars deleted file mode 100644 index 1288aebccd..0000000000 --- a/static/templates/emoji_popover_content.handlebars +++ /dev/null @@ -1,11 +0,0 @@ -{{! Contents of the "emoji map" popup }} -{{#each emoji_list}} - {{#with this}} -
- {{/with}} -{{/each}} -{{#each realm_emoji}} - {{#with this}} -
- {{/with}} -{{/each}} diff --git a/static/templates/reaction_popover_content.handlebars b/static/templates/reaction_popover_content.handlebars index 75abbe4b71..20a51345b0 100644 --- a/static/templates/reaction_popover_content.handlebars +++ b/static/templates/reaction_popover_content.handlebars @@ -7,7 +7,7 @@ {{#if message_id}} {{! message_id -> message reaction, no message_id -> compose }}
{{#each emojis}} -
+
{{#if is_realm_emoji}} {{else}} @@ -19,7 +19,7 @@ {{else}}
{{#each emojis}} -
+
{{#if is_realm_emoji}} {{else}} diff --git a/templates/zerver/compose.html b/templates/zerver/compose.html index e2272291f6..301c401f29 100644 --- a/templates/zerver/compose.html +++ b/templates/zerver/compose.html @@ -84,7 +84,6 @@
-