From fe2ec995b63737793aa9b7b34ace0eb49baab637 Mon Sep 17 00:00:00 2001 From: vinitS101 Date: Thu, 4 Apr 2019 18:26:54 +0530 Subject: [PATCH] message_view: Add js tooltip hovers for emoji reactions. This removes HTML title hovers for emoji reaction buttons below messages and replaces them with js tooltips. Fixes #8679. --- frontend_tests/node_tests/reactions.js | 42 +++++++++++--------------- static/js/click_handlers.js | 34 +++++++++++++++++++++ static/js/emoji_picker.js | 4 +-- static/js/reactions.js | 26 +++++++++++----- static/templates/message_reaction.hbs | 2 +- 5 files changed, 73 insertions(+), 35 deletions(-) diff --git a/frontend_tests/node_tests/reactions.js b/frontend_tests/node_tests/reactions.js index 8e8bcf8890..54386c3e8b 100644 --- a/frontend_tests/node_tests/reactions.js +++ b/frontend_tests/node_tests/reactions.js @@ -161,7 +161,7 @@ run_test('basics', () => { local_id: 'unicode_emoji,frown,1f626', count: 1, user_ids: [7], - title: 'Cali reacted with :frown:', + label: 'Cali reacted with :frown:', emoji_alt_code: false, class: 'message_reaction', }, @@ -172,7 +172,7 @@ run_test('basics', () => { local_id: 'realm_emoji,inactive_realm_emoji,992', count: 1, user_ids: [5], - title: 'You (click to remove) reacted with :inactive_realm_emoji:', + label: 'You (click to remove) reacted with :inactive_realm_emoji:', emoji_alt_code: false, is_realm_emoji: true, url: 'TBD', @@ -185,7 +185,7 @@ run_test('basics', () => { local_id: 'unicode_emoji,smile,1f604', count: 2, user_ids: [5, 6], - title: 'You (click to remove) and Bob van Roberts reacted with :smile:', + label: 'You (click to remove) and Bob van Roberts reacted with :smile:', emoji_alt_code: false, class: 'message_reaction reacted', }, @@ -299,6 +299,14 @@ run_test('get_reaction_section', () => { assert.equal(section, message_reactions); }); +run_test('emoji_reaction_title', () => { + var message_id = 1001; + var local_id = 'unicode_emoji,smile,1f604'; + + assert.equal(reactions.get_reaction_title_data(message_id, local_id), + "You (click to remove) and Bob van Roberts reacted with :smile:"); +}); + run_test('add_and_remove_reaction', () => { // Insert 8ball for Alice. var alice_event = { @@ -330,7 +338,7 @@ run_test('add_and_remove_reaction', () => { assert.equal(data.class, 'message_reaction reacted'); assert(!data.is_realm_emoji); assert.equal(data.message_id, 1001); - assert.equal(data.title, 'You (click to remove) reacted with :8ball:'); + assert.equal(data.label, 'You (click to remove) reacted with :8ball:'); return ''; }); @@ -344,6 +352,11 @@ run_test('add_and_remove_reaction', () => { assert(template_called); assert(insert_called); + // Testing tooltip title data for added reaction. + var local_id = 'unicode_emoji,8ball,1f3b1'; + assert.equal(reactions.get_reaction_title_data(alice_event.message_id, local_id), + "You (click to remove) reacted with :8ball:"); + // Running add_reaction again should not result in any changes template_called = false; insert_called = false; @@ -367,36 +380,15 @@ run_test('add_and_remove_reaction', () => { var reaction_element = $.create('reaction-element'); reaction_element.set_find_results('.message_reaction_count', count_element); - var title_set; - reaction_element.prop = function (prop_name, value) { - assert.equal(prop_name, 'title'); - var expected_msg = 'You (click to remove)' + - ' and Bob van Roberts reacted with :8ball:'; - assert.equal(value, expected_msg); - title_set = true; - }; - message_reactions.find = function (selector) { assert.equal(selector, "[data-reaction-id='unicode_emoji,8ball,1f3b1']"); return reaction_element; }; reactions.add_reaction(bob_event); - assert(title_set); assert.equal(count_element.text(), '2'); - // Now, remove Bob's 8ball emoji. The event has the same exact - // structure as the add event. - title_set = false; - reaction_element.prop = function (prop_name, value) { - assert.equal(prop_name, 'title'); - var expected_msg = 'You (click to remove) reacted with :8ball:'; - assert.equal(value, expected_msg); - title_set = true; - }; - reactions.remove_reaction(bob_event); - assert(title_set); assert.equal(count_element.text(), '1'); var current_emojis = reactions.get_emojis_used_by_user_for_message_id(1001); diff --git a/static/js/click_handlers.js b/static/js/click_handlers.js index 4b7f117cd5..f57613ac76 100644 --- a/static/js/click_handlers.js +++ b/static/js/click_handlers.js @@ -189,6 +189,40 @@ exports.initialize = function () { var local_id = $(this).attr('data-reaction-id'); var message_id = rows.get_message_id(this); reactions.process_reaction_click(message_id, local_id); + $(".tooltip").remove(); + }); + + // TOOLTIP FOR MESSAGE REACTIONS + + $('#main_div').on('mouseenter', '.message_reaction', function (e) { + e.stopPropagation(); + var elem = $(e.currentTarget); + var local_id = elem.attr('data-reaction-id'); + var message_id = rows.get_message_id(e.currentTarget); + var title = reactions.get_reaction_title_data(message_id, local_id); + + elem.tooltip({ + title: title, + trigger: 'hover', + placement: 'bottom', + animation: false, + }); + elem.tooltip('show'); + $(".tooltip, .tooltip-inner").css('max-width', "600px"); + // Remove the arrow from the tooltip. + $(".tooltip-arrow").remove(); + }); + + $('#main_div').on('mouseleave', '.message_reaction', function (e) { + e.stopPropagation(); + $(e.currentTarget).tooltip('destroy'); + }); + + // DESTROY PERSISTING TOOLTIPS ON HOVER + + $("body").on('mouseenter', '.tooltip', function (e) { + e.stopPropagation(); + $(e.currentTarget).remove(); }); $("#main_div").on("click", "a.stream", function (e) { diff --git a/static/js/emoji_picker.js b/static/js/emoji_picker.js index 9c95b410e9..2ca975317e 100644 --- a/static/js/emoji_picker.js +++ b/static/js/emoji_picker.js @@ -696,7 +696,7 @@ exports.register_click_handlers = function () { $("#main_div").on("mouseenter", ".reaction_button", function (e) { e.stopPropagation(); - var elem = $(this); + var elem = $(e.currentTarget); var title = i18n.t("Add emoji reaction"); elem.tooltip({ title: title + " (:)", @@ -710,7 +710,7 @@ exports.register_click_handlers = function () { $('#main_div').on('mouseleave', '.reaction_button', function (e) { e.stopPropagation(); - $(this).tooltip('hide'); + $(e.currentTarget).tooltip('hide'); }); $("body").on("click", ".actions_popover .reaction_button", function (e) { diff --git a/static/js/reactions.js b/static/js/reactions.js index f5171a5554..8052131ed4 100644 --- a/static/js/reactions.js +++ b/static/js/reactions.js @@ -172,6 +172,16 @@ function generate_title(emoji_name, user_ids) { return _.initial(user_names).join(', ') + ' and ' + _.last(user_names) + reacted_with_string; } +// Add a tooltip showing who reacted to a message. +exports.get_reaction_title_data = function (message_id, local_id) { + var message = get_message(message_id); + var user_list = get_user_list_for_message_reaction(message, local_id); + var emoji_name = exports.get_reaction_info(local_id).emoji_name; + var title = generate_title(emoji_name, user_list); + + return title; +}; + exports.get_reaction_section = function (message_id) { var message_element = $('.message_table').find("[zid='" + message_id + "']"); var section = message_element.find('.message_reactions'); @@ -249,8 +259,8 @@ exports.view.update_existing_reaction = function (opts) { exports.set_reaction_count(reaction, user_list.length); - var new_title = generate_title(emoji_name, user_list); - reaction.prop('title', new_title); + var new_label = generate_title(emoji_name, user_list); + reaction.attr('aria-label', new_label); if (user_id === page_params.user_id) { reaction.addClass("reacted"); @@ -275,7 +285,7 @@ exports.view.insert_new_reaction = function (opts) { emoji_code: emoji_code, }; - var new_title = generate_title(emoji_name, user_list); + var new_label = generate_title(emoji_name, user_list); if (opts.reaction_type !== 'unicode_emoji') { context.is_realm_emoji = true; @@ -283,7 +293,7 @@ exports.view.insert_new_reaction = function (opts) { } context.count = 1; - context.title = new_title; + context.label = new_label; context.local_id = exports.get_local_reaction_id(opts); context.emoji_alt_code = page_params.emojiset === 'text'; @@ -369,8 +379,10 @@ exports.view.remove_reaction = function (opts) { // the title/count and, if the user is the current user, turn off the // "reacted" class. - var new_title = generate_title(emoji_name, user_list); - reaction.prop('title', new_title); + var new_label = generate_title(emoji_name, user_list); + reaction.attr('aria-label', new_label); + + // If the user is the current user, turn off the "reacted" class. exports.set_reaction_count(reaction, user_list.length); @@ -414,7 +426,7 @@ exports.get_message_reactions = function (message) { reaction.emoji_name = reaction.emoji_name; reaction.emoji_code = reaction.emoji_code; reaction.count = reaction.user_ids.length; - reaction.title = generate_title(reaction.emoji_name, reaction.user_ids); + reaction.label = generate_title(reaction.emoji_name, reaction.user_ids); reaction.emoji_alt_code = page_params.emojiset === 'text'; if (reaction.reaction_type !== 'unicode_emoji') { diff --git a/static/templates/message_reaction.hbs b/static/templates/message_reaction.hbs index 48b101f57e..2e0c5c8dbc 100644 --- a/static/templates/message_reaction.hbs +++ b/static/templates/message_reaction.hbs @@ -1,4 +1,4 @@ -
+
{{#if this.emoji_alt_code}}
 :{{this.emoji_name}}:
{{else}}