From b20a24875abcf3b2af2c5935b3022f02c479e331 Mon Sep 17 00:00:00 2001
From: Tim Abbott <tabbott@zulipchat.com>
Date: Wed, 3 May 2017 13:11:35 -0700
Subject: [PATCH] emoji: Switch to using iamcal sprite sheets for reactions and
 pickers.

Without changing how we render emoji in messages or changing the data
set used for emoji names, this switches us to the superior
percentage-based system for choosing which emoji from the spritesheet
to select and the iamcal sprite sheets.

It requires some small changes to CSS to ensure emoji are centered
properly in the new design.

Based on Harshit Gupta's work on "Interrelated emoji infrastructure changes".
---
 static/js/emoji.js          | 17 +++++++++--------
 static/styles/zulip.css     | 10 ++++++++++
 templates/zerver/index.html |  2 +-
 version.py                  |  2 +-
 4 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/static/js/emoji.js b/static/js/emoji.js
index fc194b8730..8cc5cf3a49 100644
--- a/static/js/emoji.js
+++ b/static/js/emoji.js
@@ -19,18 +19,19 @@ var zulip_emoji = {
 
 _.each(emoji_codes.names, function (value) {
     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"});
+    default_emojis.push({emoji_name: value,
+                         codepoint: emoji_codes.name_to_codepoint[value],
+                         emoji_url: "/static/generated/emoji/images/emoji/unicode/" + base_name + ".png"});
 });
 
 _.each(emoji_codes.codepoints, function (value) {
-    default_unicode_emojis.push({emoji_name: value, emoji_url: "/static/generated/emoji/images/emoji/unicode/" + value + ".png"});
+    default_unicode_emojis.push({emoji_name: value,
+                                 codepoint: value,
+                                 emoji_url: "/static/generated/emoji/images/emoji/unicode/" + value + ".png"});
 });
 
 exports.emoji_name_to_css_class = function (emoji_name) {
-    if (emoji_name.indexOf("+") >= 0) {
-        return emoji_name.replace("+", "");
-    }
-    return emoji_name;
+    return emoji_codes.name_to_codepoint[emoji_name];
 };
 
 exports.update_emojis = function update_emojis(realm_emojis) {
@@ -50,7 +51,7 @@ exports.update_emojis = function update_emojis(realm_emojis) {
 
     exports.emojis_by_name = {};
     exports.emojis_name_to_css_class = {};
-    _.each(exports.emojis, function (emoji) {
+    _.each(default_emojis, function (emoji) {
         var css_class = exports.emoji_name_to_css_class(emoji.emoji_name);
         exports.emojis_name_to_css_class[emoji.emoji_name] = css_class;
         exports.emojis_by_name[emoji.emoji_name] = emoji.emoji_url;
@@ -65,7 +66,7 @@ exports.initialize = function initialize() {
     // Load the sprite image in the background so that the browser
     // can cache it for later use.
     var sprite = new Image();
-    sprite.src = '/static/generated/emoji/sprite.png';
+    sprite.src = '/static/generated/emoji/sheet_google_32.png';
 };
 
 exports.update_emojis(page_params.realm_emoji);
diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index 6e99bb0804..66b26d22a7 100644
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@@ -2337,6 +2337,16 @@ button.topic_edit_cancel {
     margin-top: -7px;
 }
 
+div.emoji {
+    /* This is needed when using the sprite sheets */
+    top: 6px;
+}
+
+img.emoji {
+    /* This is the right offset for <img> style emoji */
+    top: 3px;
+}
+
 .emoji.realm-emoji {
     background-size: contain;
     background-position: center;
diff --git a/templates/zerver/index.html b/templates/zerver/index.html
index 52cadce27d..045ba60432 100644
--- a/templates/zerver/index.html
+++ b/templates/zerver/index.html
@@ -14,7 +14,7 @@ var page_params = {{ page_params }};
 {% block customhead %}
 <meta name="apple-mobile-web-app-capable" content="yes">
 <link href="/static/images/logo/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
-<link rel="stylesheet" type="text/css" href="/static/generated/emoji/sprite.css" />
+<link rel="stylesheet" type="text/css" href="/static/generated/emoji/google_sprite.css" />
 <style type="text/css">
 
 #css-loading {
diff --git a/version.py b/version.py
index fe59032735..bd701da1d4 100644
--- a/version.py
+++ b/version.py
@@ -1,2 +1,2 @@
 ZULIP_VERSION = "1.5.1+git"
-PROVISION_VERSION = '4.22'
+PROVISION_VERSION = '4.23'