From 6cb03ea78ec621258a3fa77f933ff784df6665b7 Mon Sep 17 00:00:00 2001
From: Harshit Bansal <harshitbansal2015@gmail.com>
Date: Sun, 23 Apr 2017 18:47:18 +0000
Subject: [PATCH] frontend: Add UI necessary to change emoji set.

Note that this code is disabled until the infrastructure for the
feature can be finished.

Tweaked by tabbott to use slightly cleaner names for the various sets.
---
 static/js/server_events.js                    | 14 ++++++++++++++
 static/js/settings_display.js                 | 19 +++++++++++++++++++
 static/styles/settings.css                    |  2 +-
 .../settings/display-settings.handlebars      | 11 +++++++++++
 4 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/static/js/server_events.js b/static/js/server_events.js
index 500d02b6a1..ee4d26acdf 100644
--- a/static/js/server_events.js
+++ b/static/js/server_events.js
@@ -297,6 +297,20 @@ function dispatch_normal_event(event) {
         if (event.setting_name === 'timezone') {
             page_params.timezone = event.setting;
         }
+        if (event.setting_name === 'emojiset') {
+            page_params.emojiset = event.setting;
+            var sprite = new Image();
+            sprite.onload = function () {
+                $("#emoji-spritesheet").attr('href', "/static/generated/emoji/" + page_params.emojiset + "_sprite.css");
+                if ($("#display-settings-status").length) {
+                    loading.destroy_indicator($("#emojiset_spinner"));
+                    $("#emojiset_select").val(page_params.emojiset);
+                    ui_report.success(i18n.t("Emojiset changed successfully!!"),
+                                      $('#display-settings-status').expectOne());
+                }
+            };
+            sprite.src = "/static/generated/emoji/sheet_" + page_params.emojiset + "_32.png";
+        }
         if ($("#settings.tab-pane.active").length) {
             settings_display.update_page();
         }
diff --git a/static/js/settings_display.js b/static/js/settings_display.js
index e08244d975..ac1b498fd2 100644
--- a/static/js/settings_display.js
+++ b/static/js/settings_display.js
@@ -6,6 +6,7 @@ exports.set_up = function () {
     $("#display-settings-status").hide();
 
     $("#user_timezone").val(page_params.timezone);
+    $("#emojiset_select").val(page_params.emojiset);
 
     $("#default_language_modal [data-dismiss]").click(function () {
       $("#default_language_modal").fadeOut(300);
@@ -135,6 +136,24 @@ exports.set_up = function () {
             },
         });
     });
+
+    $("#emojiset_select").change(function () {
+        var emojiset = $(this).val();
+        var data = {};
+        data.emojiset = JSON.stringify(emojiset);
+
+        channel.patch({
+            url: '/json/settings/display',
+            data: data,
+            success: function () {
+                var spinner = $("#emojiset_spinner").expectOne();
+                loading.make_indicator(spinner, {text: 'Changing emojiset.'});
+            },
+            error: function (xhr) {
+                ui_report.error(i18n.t("Error changing emojiset."), xhr, $('#display-settings-status').expectOne());
+            },
+        });
+    });
 };
 
 function _update_page() {
diff --git a/static/styles/settings.css b/static/styles/settings.css
index dd819dbb84..570cccd9cc 100644
--- a/static/styles/settings.css
+++ b/static/styles/settings.css
@@ -1066,6 +1066,6 @@ input[type=text]#settings_search {
     width: 15%;
 }
 
-#user_timezone {
+#settings_page .display-settings-form select {
     width: 245px;
 }
diff --git a/static/templates/settings/display-settings.handlebars b/static/templates/settings/display-settings.handlebars
index ca1cefe6f1..b26ea1d379 100644
--- a/static/templates/settings/display-settings.handlebars
+++ b/static/templates/settings/display-settings.handlebars
@@ -108,5 +108,16 @@
       </select>
     </div>
 
+    {{#if false}}
+    <div class="input-group">
+      <label for="emojiset_select">{{t "Emoji style" }}:</label>
+      <select name="emojiset_select" id="emojiset_select">
+        {{#each page_params.emojiset_choices}}
+        <option value={{@key}}>{{this}}</option>
+        {{/each}}
+      </select>
+      <div id="emojiset_spinner"></div>
+    </div>
+    {{/if}}
   </form>
 </div>