From 23b65f5fc5c90374146995b4485d416264daf15e Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Mon, 3 Sep 2018 14:20:14 +0200
Subject: [PATCH] Lazily load emoji images

---
 dist/converse.js         | 8 ++++----
 src/converse-chatview.js | 7 ++++---
 src/utils/emoji.js       | 2 +-
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/dist/converse.js b/dist/converse.js
index 70ed06914..4ff45bfcc 100644
--- a/dist/converse.js
+++ b/dist/converse.js
@@ -60961,7 +60961,6 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 
         initialize() {
           this.initDebounced();
-          this.createEmojiPicker();
           this.model.messages.on('add', this.onMessageAdded, this);
           this.model.messages.on('rendered', this.scrollDown, this);
           this.model.on('show', this.show, this);
@@ -61006,7 +61005,6 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           this.el.querySelector('.chat-toolbar').innerHTML = toolbar(options);
           this.addSpoilerButton(options);
           this.addFileUploadButton();
-          this.insertEmojiPicker();
 
           _converse.emit('renderToolbar', this);
 
@@ -61745,6 +61743,9 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
         toggleEmojiMenu(ev) {
           if (_.isUndefined(this.emoji_dropdown)) {
             ev.stopPropagation();
+            this.createEmojiPicker();
+            this.insertEmojiPicker();
+            this.renderEmojiPicker();
             const dropdown_el = this.el.querySelector('.toggle-smiley.dropup');
             this.emoji_dropdown = new bootstrap.Dropdown(dropdown_el, true);
             this.emoji_dropdown.toggle();
@@ -61878,7 +61879,6 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
         afterShown() {
           this.model.clearUnreadMsgCounter();
           this.setChatState(_converse.ACTIVE);
-          this.renderEmojiPicker();
           this.scrollDown();
           this.focus();
         },
@@ -102993,7 +102993,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
     /* will output unicode from shortname
      * useful for sending emojis back to mobile devices
      */
-    // replace regular shortnames first
+    // Replace regular shortnames first
     str = str.replace(SHORTNAMES_REGEX, shortname => {
       if (typeof shortname === 'undefined' || shortname === '' || !(shortname in emoji_list)) {
         // if the shortname doesnt exist just return the entire matchhju
diff --git a/src/converse-chatview.js b/src/converse-chatview.js
index 7d944c947..23b56f9c4 100644
--- a/src/converse-chatview.js
+++ b/src/converse-chatview.js
@@ -310,7 +310,6 @@
                 initialize () {
                     this.initDebounced();
 
-                    this.createEmojiPicker();
                     this.model.messages.on('add', this.onMessageAdded, this);
                     this.model.messages.on('rendered', this.scrollDown, this);
 
@@ -358,7 +357,6 @@
                     this.el.querySelector('.chat-toolbar').innerHTML = toolbar(options);
                     this.addSpoilerButton(options);
                     this.addFileUploadButton();
-                    this.insertEmojiPicker();
                     _converse.emit('renderToolbar', this);
                     return this;
                 },
@@ -1057,6 +1055,10 @@
                 toggleEmojiMenu (ev) {
                     if (_.isUndefined(this.emoji_dropdown)) {
                         ev.stopPropagation();
+                        this.createEmojiPicker();
+                        this.insertEmojiPicker();
+                        this.renderEmojiPicker();
+
                         const dropdown_el = this.el.querySelector('.toggle-smiley.dropup');
                         this.emoji_dropdown = new bootstrap.Dropdown(dropdown_el, true);
                         this.emoji_dropdown.toggle();
@@ -1179,7 +1181,6 @@
                 afterShown () {
                     this.model.clearUnreadMsgCounter();
                     this.setChatState(_converse.ACTIVE);
-                    this.renderEmojiPicker();
                     this.scrollDown();
                     this.focus();
                 },
diff --git a/src/utils/emoji.js b/src/utils/emoji.js
index 7045b1c4b..d508b081e 100644
--- a/src/utils/emoji.js
+++ b/src/utils/emoji.js
@@ -173,7 +173,7 @@
         /* will output unicode from shortname
          * useful for sending emojis back to mobile devices
          */
-        // replace regular shortnames first
+        // Replace regular shortnames first
         str = str.replace(SHORTNAMES_REGEX, (shortname) => {
             if( (typeof shortname === 'undefined') || (shortname === '') || (!(shortname in emoji_list)) ) {
                 // if the shortname doesnt exist just return the entire matchhju