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

64 lines
2.1 KiB
JavaScript
Raw Normal View History

v1 Emoji autocomplete (imported from commit 0b0d4b004936ce4abc37f44317aec414451f3a8e)
2013-07-02 00:40:57 +02:00
var emoji = (function () {
var exports = {};
exports.emojis = [];
Add frontend support for emoji reactions. This commit replaces the placeholder "clipboard" button with a reaction button. This is done on any message that can't be edited. Also, on messages sent by the user the actions popover (toggled by the down chevron icon) contains an option to add a reaction. When clicked, a popover with a search bar and a list of emojis is displayed. If the right sidebar is collapsed (the viewport is small), the popover is placed to the left of the button. Focus is set to the search bar. Typing in the search bar filters emojis. Emojis with which the user has reacted to this message are highlighted. Clicking them sends an API request to remove that reaction. Clicking on non-highlighted emojis sends an API request to add a reaction. When the popover loses focus it is closed. The frontend listens for reaction events. When an add-reaction event is received, the emoji is displayed at the bottom of the message with a count initialized to 1. If there was an existing reaction to the message with the same emoji, the count is incremented. Old messages fetched from the server contain reactions. They are displayed (along with title and count) at the bottom of each message. When clicking the emoji reaction at the bottom of the message, if the user has already reacted with that emoji to this message, the reaction is removed and the count is decremented. Otherwise, a reaction is added and the count is incremented. Hovering over the emoji reaction at the bottom of the message displays a list of users who have reacted with this emoji along with the emoji name. Hovering over the emoji reactions at the bottom of the message displays a button to add a reaction. Fixes #541.
2016-12-02 13:23:23 +01:00
exports.realm_emojis = {};
Parse emoji client-side (imported from commit 3bf150d866689b301ee31218cb3d570119b766cf)
2014-01-04 00:21:06 +01:00
exports.emojis_by_name = {};
Create emoji name to css class mapping. `glue` ingores the + sign in the name of the emoji and creates the css class without it. This causes the emoji pallete to miss '+1' emoji. This commit creates a translation map from emoji name to css class that we can use for the emoji popover.
2016-09-23 11:27:29 +02:00
exports.emojis_name_to_css_class = {};
Separate unicode emojis from named emojis.
2016-06-29 22:16:59 +02:00
exports.emojis_by_unicode = {};
v1 Emoji autocomplete (imported from commit 0b0d4b004936ce4abc37f44317aec414451f3a8e)
2013-07-02 00:40:57 +02:00
Show realm emoji in typeahead and update the list via events. (imported from commit bd8b8be5d088d503cac2b72cf228e769827e2308)
2013-08-22 19:54:35 +02:00
var default_emojis = [];
Separate unicode emojis from named emojis.
2016-06-29 22:16:59 +02:00
var default_unicode_emojis = [];
Show realm emoji in typeahead and update the list via events. (imported from commit bd8b8be5d088d503cac2b72cf228e769827e2308)
2013-08-22 19:54:35 +02:00
build_emoji: Generate emoji names and codepoints from emoji_map. Replaces the hardcoded list of emoji_names and unicode_emoji_names in static/js/emoji.js with a list generated from emoji_map.json, both to get the list out of version control and so we can start modifying it for our autocomplete. This does not change the contents of emoji_names. It sorts and removes duplicates from unicode_emoji_names (causes no change in behavior, since unicode_emoji_names is only used as if it were a set).
2017-01-26 00:41:53 +01:00
_.each(emoji_codes.names, function (value) {
bugdown: Change rendered emoji image to `unicode/<codepoint>.png.` Use `name_to_codepoint.json` file (and the similar structure in emoji_codes.js) to map emoji names directly to codepoints and change the rendered emoji image to `unicode/<codepoint.png>` rather than `<emoji_name>.png`. Fixes: #3539.
2017-02-04 23:27:24 +01:00
var base_name = emoji_codes.name_to_codepoint[value];
default_emojis.push({emoji_name: value, emoji_url: "/static/generated/emoji/images/emoji/unicode/" + base_name + ".png"});
v1 Emoji autocomplete (imported from commit 0b0d4b004936ce4abc37f44317aec414451f3a8e)
2013-07-02 00:40:57 +02:00
});
build_emoji: Generate emoji names and codepoints from emoji_map. Replaces the hardcoded list of emoji_names and unicode_emoji_names in static/js/emoji.js with a list generated from emoji_map.json, both to get the list out of version control and so we can start modifying it for our autocomplete. This does not change the contents of emoji_names. It sorts and removes duplicates from unicode_emoji_names (causes no change in behavior, since unicode_emoji_names is only used as if it were a set).
2017-01-26 00:41:53 +01:00
_.each(emoji_codes.codepoints, function (value) {
Move static/third/gemoji to static/generated/emoji. Fixes #1153.
2016-12-28 05:07:10 +01:00
default_unicode_emojis.push({emoji_name: value, emoji_url: "/static/generated/emoji/images/emoji/unicode/" + value + ".png"});
Add unicode emoji to frontend markdown parser. Fixes 2nd half of #1011.
2016-06-24 22:39:44 +02:00
});
Add frontend support for emoji reactions. This commit replaces the placeholder "clipboard" button with a reaction button. This is done on any message that can't be edited. Also, on messages sent by the user the actions popover (toggled by the down chevron icon) contains an option to add a reaction. When clicked, a popover with a search bar and a list of emojis is displayed. If the right sidebar is collapsed (the viewport is small), the popover is placed to the left of the button. Focus is set to the search bar. Typing in the search bar filters emojis. Emojis with which the user has reacted to this message are highlighted. Clicking them sends an API request to remove that reaction. Clicking on non-highlighted emojis sends an API request to add a reaction. When the popover loses focus it is closed. The frontend listens for reaction events. When an add-reaction event is received, the emoji is displayed at the bottom of the message with a count initialized to 1. If there was an existing reaction to the message with the same emoji, the count is incremented. Old messages fetched from the server contain reactions. They are displayed (along with title and count) at the bottom of each message. When clicking the emoji reaction at the bottom of the message, if the user has already reacted with that emoji to this message, the reaction is removed and the count is decremented. Otherwise, a reaction is added and the count is incremented. Hovering over the emoji reaction at the bottom of the message displays a list of users who have reacted with this emoji along with the emoji name. Hovering over the emoji reactions at the bottom of the message displays a button to add a reaction. Fixes #541.
2016-12-02 13:23:23 +01:00
exports.emoji_name_to_css_class = function (emoji_name) {
if (emoji_name.indexOf("+") >= 0) {
return emoji_name.replace("+", "");
}
return emoji_name;
};
Show realm emoji in typeahead and update the list via events. (imported from commit bd8b8be5d088d503cac2b72cf228e769827e2308)
2013-08-22 19:54:35 +02:00
exports.update_emojis = function update_emojis(realm_emojis) {
Fix existing tab-based whitespace in the codebase. (imported from commit 3bd8f51d1bb303455597d238af47b1b5541aed04)
2015-09-20 08:01:55 +02:00
// Copy the default emoji list and add realm-specific emoji to it
exports.emojis = default_emojis.slice(0);
Use camo to avoid mixed content warnings when displaying emoji.
2016-04-28 06:43:40 +02:00
_.each(realm_emojis, function (data, name) {
Display realm emojis in the emoji picker container. This displays the realm emojis in the emoji picker container in their own divs styled similarly to the existing .emoji divs.
2017-01-28 00:25:01 +01:00
exports.emojis.push({emoji_name: name, emoji_url: data.display_url, is_realm_emoji: true});
Add frontend support for emoji reactions. This commit replaces the placeholder "clipboard" button with a reaction button. This is done on any message that can't be edited. Also, on messages sent by the user the actions popover (toggled by the down chevron icon) contains an option to add a reaction. When clicked, a popover with a search bar and a list of emojis is displayed. If the right sidebar is collapsed (the viewport is small), the popover is placed to the left of the button. Focus is set to the search bar. Typing in the search bar filters emojis. Emojis with which the user has reacted to this message are highlighted. Clicking them sends an API request to remove that reaction. Clicking on non-highlighted emojis sends an API request to add a reaction. When the popover loses focus it is closed. The frontend listens for reaction events. When an add-reaction event is received, the emoji is displayed at the bottom of the message with a count initialized to 1. If there was an existing reaction to the message with the same emoji, the count is incremented. Old messages fetched from the server contain reactions. They are displayed (along with title and count) at the bottom of each message. When clicking the emoji reaction at the bottom of the message, if the user has already reacted with that emoji to this message, the reaction is removed and the count is decremented. Otherwise, a reaction is added and the count is incremented. Hovering over the emoji reaction at the bottom of the message displays a list of users who have reacted with this emoji along with the emoji name. Hovering over the emoji reactions at the bottom of the message displays a button to add a reaction. Fixes #541.
2016-12-02 13:23:23 +01:00
exports.realm_emojis[name] = {emoji_name: name, emoji_url: data.display_url};
Fix existing tab-based whitespace in the codebase. (imported from commit 3bd8f51d1bb303455597d238af47b1b5541aed04)
2015-09-20 08:01:55 +02:00
});
Parse emoji client-side (imported from commit 3bf150d866689b301ee31218cb3d570119b766cf)
2014-01-04 00:21:06 +01:00
exports.emojis_by_name = {};
Create emoji name to css class mapping. `glue` ingores the + sign in the name of the emoji and creates the css class without it. This causes the emoji pallete to miss '+1' emoji. This commit creates a translation map from emoji name to css class that we can use for the emoji popover.
2016-09-23 11:27:29 +02:00
exports.emojis_name_to_css_class = {};
Parse emoji client-side (imported from commit 3bf150d866689b301ee31218cb3d570119b766cf)
2014-01-04 00:21:06 +01:00
_.each(exports.emojis, function (emoji) {
Add frontend support for emoji reactions. This commit replaces the placeholder "clipboard" button with a reaction button. This is done on any message that can't be edited. Also, on messages sent by the user the actions popover (toggled by the down chevron icon) contains an option to add a reaction. When clicked, a popover with a search bar and a list of emojis is displayed. If the right sidebar is collapsed (the viewport is small), the popover is placed to the left of the button. Focus is set to the search bar. Typing in the search bar filters emojis. Emojis with which the user has reacted to this message are highlighted. Clicking them sends an API request to remove that reaction. Clicking on non-highlighted emojis sends an API request to add a reaction. When the popover loses focus it is closed. The frontend listens for reaction events. When an add-reaction event is received, the emoji is displayed at the bottom of the message with a count initialized to 1. If there was an existing reaction to the message with the same emoji, the count is incremented. Old messages fetched from the server contain reactions. They are displayed (along with title and count) at the bottom of each message. When clicking the emoji reaction at the bottom of the message, if the user has already reacted with that emoji to this message, the reaction is removed and the count is decremented. Otherwise, a reaction is added and the count is incremented. Hovering over the emoji reaction at the bottom of the message displays a list of users who have reacted with this emoji along with the emoji name. Hovering over the emoji reactions at the bottom of the message displays a button to add a reaction. Fixes #541.
2016-12-02 13:23:23 +01:00
var css_class = exports.emoji_name_to_css_class(emoji.emoji_name);
exports.emojis_name_to_css_class[emoji.emoji_name] = css_class;
Parse emoji client-side (imported from commit 3bf150d866689b301ee31218cb3d570119b766cf)
2014-01-04 00:21:06 +01:00
exports.emojis_by_name[emoji.emoji_name] = emoji.emoji_url;
});
Separate unicode emojis from named emojis.
2016-06-29 22:16:59 +02:00
exports.emojis_by_unicode = {};
_.each(default_unicode_emojis, function (emoji) {
exports.emojis_by_unicode[emoji.emoji_name] = emoji.emoji_url;
});
Show realm emoji in typeahead and update the list via events. (imported from commit bd8b8be5d088d503cac2b72cf228e769827e2308)
2013-08-22 19:54:35 +02:00
};
eslint: change space-before-function-paren from warning to error. Also fix violations.
2016-12-05 07:02:18 +01:00
exports.initialize = function initialize() {
Add emoji map to the compose box. - Expand a box full of emojis into the compose window for users to graphically select emojis. - Append an emoji to the end of the message when a user clicks the emoji in the emoji box. - Trap the escape key to always close the emoji box before closing anything else if the box is open. - Fixes: #147.
2015-10-15 22:34:30 +02:00
// Load the sprite image in the background so that the browser
// can cache it for later use.
var sprite = new Image();
Move static/third/gemoji to static/generated/emoji. Fixes #1153.
2016-12-28 05:07:10 +01:00
sprite.src = '/static/generated/emoji/sprite.png';
Add emoji map to the compose box. - Expand a box full of emojis into the compose window for users to graphically select emojis. - Append an emoji to the end of the message when a user clicks the emoji in the emoji box. - Trap the escape key to always close the emoji box before closing anything else if the box is open. - Fixes: #147.
2015-10-15 22:34:30 +02:00
};
Show realm emoji in typeahead and update the list via events. (imported from commit bd8b8be5d088d503cac2b72cf228e769827e2308)
2013-08-22 19:54:35 +02:00
exports.update_emojis(page_params.realm_emoji);
v1 Emoji autocomplete (imported from commit 0b0d4b004936ce4abc37f44317aec414451f3a8e)
2013-07-02 00:40:57 +02:00
return exports;
}());
Consolidate emoji tests and test on frontend as well (imported from commit 3244a93209b56b655b80633713a3f58ae46d06ff)
2014-01-24 22:52:37 +01:00
if (typeof module !== 'undefined') {
module.exports = emoji;
}