From 52fbf9d3aea16b1ff05c9b4c29bb253084ee427c Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Mon, 29 Jan 2018 11:05:35 +0100
Subject: [PATCH] FIX: emoji-picker improvements

* fix a performance issue on mobile when modifying filtering query, thanks to David Taylor and Jorge Manrubia for the initial finding and solution
* minor refactoring
* better positioning of the picker on mobile
---
 .../discourse/components/emoji-picker.js.es6  | 34 ++++++++++---------
 app/assets/stylesheets/mobile/emoji.scss      |  6 ++++
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/emoji-picker.js.es6 b/app/assets/javascripts/discourse/components/emoji-picker.js.es6
index 03efe27a53c..4e1222a649e 100644
--- a/app/assets/javascripts/discourse/components/emoji-picker.js.es6
+++ b/app/assets/javascripts/discourse/components/emoji-picker.js.es6
@@ -4,6 +4,7 @@ import { emojiUrlFor } from "discourse/lib/text";
 import KeyValueStore from "discourse/lib/key-value-store";
 import { emojis } from "pretty-text/emoji/data";
 import { extendedEmojiList, isSkinTonableEmoji } from "pretty-text/emoji";
+const { run } = Ember;
 
 const keyValueStore = new KeyValueStore("discourse_emojis_");
 const EMOJI_USAGE = "emojiUsage";
@@ -44,7 +45,7 @@ export default Ember.Component.extend({
     this.set("selectedDiversity", keyValueStore.getObject(EMOJI_SELECTED_DIVERSITY) || 1);
     this.set("recentEmojis", keyValueStore.getObject(EMOJI_USAGE) || []);
 
-    Ember.run.scheduleOnce("afterRender", this, function() {
+    run.scheduleOnce("afterRender", this, function() {
       this._bindEvents();
       this._sectionLoadingCheck();
       this._loadCategoriesEmojis();
@@ -83,13 +84,14 @@ export default Ember.Component.extend({
 
   @on("didUpdateAttrs")
   _setState() {
-    this.get("active") === true ? this.show() : this.close();
+    this.get("active") ? this.show() : this.close();
   },
 
   @observes("filter")
   filterChanged() {
     this.$filter.find(".clear-filter").toggle(!_.isEmpty(this.get("filter")));
-    Ember.run.debounce(this, this._filterEmojisList, 250);
+    const filterDelay = this.site.isMobileDevice ? 400 : 250;
+    run.debounce(this, this._filterEmojisList, filterDelay);
   },
 
   @observes("selectedDiversity")
@@ -148,7 +150,7 @@ export default Ember.Component.extend({
 
   _sectionLoadingCheck() {
     this._checkTimeout = setTimeout(() => { this._sectionLoadingCheck(); }, 500);
-    Ember.run.throttle(this, this._checkVisibleSection, 100);
+    run.throttle(this, this._checkVisibleSection, 100);
   },
 
   _loadCategoriesEmojis() {
@@ -200,7 +202,7 @@ export default Ember.Component.extend({
     if (this.get("filter") === "") {
       this.$filter.find("input[name='filter']").val("");
       this.$results.empty().hide();
-      this.$list.show();
+      this.$list.css("visibility", "visible");
     } else {
       const lowerCaseFilter = this.get("filter").toLowerCase();
       const filterableEmojis = emojis.concat(_.keys(extendedEmojiList()));
@@ -217,7 +219,7 @@ export default Ember.Component.extend({
       ).show();
       this._bindHover(this.$results);
       this._bindEmojiClick(this.$results);
-      this.$list.hide();
+      this.$list.css("visibility", "hidden");
     }
   },
 
@@ -239,7 +241,7 @@ export default Ember.Component.extend({
     this.$picker.find(".category-icon").on("click", "button.emoji", (event) => {
       this.set("filter", "");
       this.$results.empty();
-      this.$list.show();
+      this.$list.css("visibility", "visible");
 
       const section = $(event.currentTarget).data("section");
       const $section = this.$list.find(`.section[data-section="${section}"]`);
@@ -264,11 +266,11 @@ export default Ember.Component.extend({
 
   _bindResizing() {
     this.$(window).on("resize", () => {
-      Ember.run.throttle(this, this._positionPicker, 16);
+      run.throttle(this, this._positionPicker, 16);
     });
 
     $("#reply-control").on("div-resizing", () => {
-      Ember.run.throttle(this, this._positionPicker, 16);
+      run.throttle(this, this._positionPicker, 16);
     });
   },
 
@@ -320,7 +322,7 @@ export default Ember.Component.extend({
   _bindSectionsScroll() {
     this.$list.on("scroll", () => {
       this.scrollPosition = this.$list.scrollTop();
-      Ember.run.throttle(this, this._checkVisibleSection, 150);
+      run.throttle(this, this._checkVisibleSection, 150);
     });
   },
 
@@ -415,12 +417,12 @@ export default Ember.Component.extend({
 
     const mobilePositioning = options => {
       let attributes = {
-        width: windowWidth - 12,
-        marginLeft: 5,
-        marginTop: -130,
+        width: windowWidth,
+        marginLeft: 0,
+        marginTop: "auto",
         left: 0,
         bottom: "",
-        top: "50%",
+        top: 0,
         display: "flex"
       };
 
@@ -445,7 +447,7 @@ export default Ember.Component.extend({
       this.$picker.css(_.merge(attributes, options));
     };
 
-    if(Ember.testing || this.get("automaticPositioning") === false) {
+    if(Ember.testing || !this.get("automaticPositioning")) {
       desktopPositioning();
       return;
     }
@@ -510,7 +512,7 @@ export default Ember.Component.extend({
     this.$list.scrollTop(yPosition);
 
     // if we don’t actually scroll we need to force it
-    if(yPosition === 0) {
+    if (yPosition === 0) {
       this.$list.scroll();
     }
   },
diff --git a/app/assets/stylesheets/mobile/emoji.scss b/app/assets/stylesheets/mobile/emoji.scss
index e69de29bb2d..34d67e4c019 100644
--- a/app/assets/stylesheets/mobile/emoji.scss
+++ b/app/assets/stylesheets/mobile/emoji.scss
@@ -0,0 +1,6 @@
+.emoji-picker {
+  box-shadow: none;
+  height: 250px;
+  border-radius: 0;
+  border: none;
+}