Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

emoji: Move all emoji picker logic/events into emoji_picker module. 

Added emoji_picker.js to static asset pipeline.
This commit is contained in:
Jack Zhang 2017-04-27 01:27:25 -04:00 committed by Tim Abbott
parent 889547ff5e
commit f8b3ce7d15
10 changed files with 259 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.json
View File

@ -143,6 +143,7 @@
"drafts": false,
"katex": false,
"Clipboard": false,
"emoji_picker": false,
"hotspots": false
},
"rules": {

1
frontend_tests/node_tests/dispatch.js
View File

@ -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

5
frontend_tests/node_tests/hotkey.js
View File

@ -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');
}());

3
static/js/click_handlers.js
View File

@ -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;
}

238
static/js/emoji_picker.js Normal file
View File

@ -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;
}

12
static/js/hotkey.js
View File

@ -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);
}

230
static/js/popovers.js
View File

@ -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) {

2
static/js/reactions.js
View File

@ -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

2
static/js/server_events.js
View File

@ -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':

1
zproject/settings.py
View File

@ -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'