emoji-views: lazily render picker only once user clicks to open

spec/chatbox.js

@@ -440,7 +440,6 @@
                     const contact_jid = mock.cur_names[2].replace(/ /g,'.').toLowerCase() + '@montague.lit';
                     await test_utils.openChatBoxFor(_converse, contact_jid);
                     const view = _converse.chatboxviews.get(contact_jid);
-                    await u.waitUntil(() => view.el.querySelector('.emoji-picker'));
                     const toolbar = view.el.querySelector('.chat-toolbar');
                     const counter = toolbar.querySelector('.message-limit');
                     expect(counter.textContent).toBe('200');

spec/emojis.js

@@ -23,7 +23,6 @@
                 const contact_jid = mock.cur_names[2].replace(/ /g,'.').toLowerCase() + '@montague.lit';
                 await test_utils.openChatBoxFor(_converse, contact_jid);
                 const view = _converse.chatboxviews.get(contact_jid);
-                await u.waitUntil(() => view.el.querySelector('.emoji-picker'));
                 const toolbar = view.el.querySelector('ul.chat-toolbar');
                 expect(toolbar.querySelectorAll('li.toggle-smiley__container').length).toBe(1);
                 toolbar.querySelector('a.toggle-smiley').click();
@@ -44,7 +43,6 @@
                 const muc_jid = 'lounge@montague.lit';
                 await test_utils.openAndEnterChatRoom(_converse, muc_jid, 'romeo');
                 const view = _converse.chatboxviews.get(muc_jid);
-                await u.waitUntil(() => view.el.querySelector('.emoji-picker'));
 
                 const textarea = view.el.querySelector('textarea.chat-textarea');
                 textarea.value = ':gri';

src/converse-emoji-views.js

@@ -90,22 +90,26 @@ converse.plugins.add('converse-emoji-views', {
                 this.emoji_dropdown.toggle();
             },
 
-            async createEmojiPickerView () {
-                if (this.emoji_picker_view) {
-                    this.insertEmojiPicker();
-                    return;
-                } else {
-                    await _converse.api.emojis.initialize()
-                    this.emoji_picker_view = new _converse.EmojiPickerView({
-                        'model': _converse.emojipicker,
-                        'chatview': this
-                    });
-                    this.insertEmojiPicker();
-                }
+            async createEmojiPicker () {
+                await _converse.api.emojis.initialize()
+
+                const id = `converse.emoji-${_converse.bare_jid}-${this.model.get('jid')}`;
+                const emojipicker = new _converse.EmojiPicker({'id': id});
+                emojipicker.browserStorage = _converse.createStore(id);
+                await new Promise(resolve => emojipicker.fetch({ 'success': resolve, 'error': resolve}));
+
+                this.emoji_picker_view = new _converse.EmojiPickerView({
+                    'model': emojipicker,
+                    'chatview': this
+                });
+                const el = this.el.querySelector('.emoji-picker__container');
+                el.innerHTML = '';
+                el.appendChild(this.emoji_picker_view.el);
             },
 
-            createEmojiDropdown () {
+            async createEmojiDropdown () {
                 if (!this.emoji_dropdown) {
+                    await this.createEmojiPicker();
                     const el = this.el.querySelector('.emoji-picker');
                     this.emoji_dropdown = new bootstrap.Dropdown(el, true);
                     this.emoji_dropdown.el = el;
@@ -117,12 +121,6 @@ converse.plugins.add('converse-emoji-views', {
                 await this.createEmojiDropdown();
                 this.emoji_dropdown.toggle();
                 this.emoji_picker_view.setScrollPosition();
-            },
-
-            insertEmojiPicker () {
-                const el = this.el.querySelector('.emoji-picker__container');
-                el.innerHTML = '';
-                el.appendChild(this.emoji_picker_view.el);
             }
         };
         Object.assign(_converse.ChatBoxView.prototype, emoji_aware_chat_view);
@@ -258,8 +256,7 @@ converse.plugins.add('converse-emoji-views', {
                 const category = el.getAttribute('data-category');
                 const old_category = this.model.get('current_category');
                 if (old_category !== category) {
-                    // XXX: Manually set the classes, it's quicker than using the VDOM
-                    this.model.set(
+                    this.model.save(
                         {'current_category': category},
                         {'silent': true}
                     );
@@ -453,14 +450,12 @@ converse.plugins.add('converse-emoji-views', {
             if (_converse.visible_toolbar_buttons.emoji) {
                 const html = tpl_emoji_button({'tooltip_insert_smiley': __('Insert emojis')});
                 view.el.querySelector('.chat-toolbar').insertAdjacentHTML('afterBegin', html);
-                view.createEmojiPickerView();
             }
         });
 
-        // The headlines box doesn't have a toolbar and doesn't show an emoji
-        // picker, but we still need to make sure that emojis have been
-        // initialized in order to show emojis in messages.
-        _converse.api.listen.on('headlinesBoxViewInitialized', () => _converse.api.emojis.initialize());
+        _converse.api.listen.on('headlinesBoxInitialized', () => _converse.api.emojis.initialize());
+        _converse.api.listen.on('chatRoomInitialized', () => _converse.api.emojis.initialize());
+        _converse.api.listen.on('chatBox', () => _converse.api.emojis.initialize());
 
         /************************ END Event Handlers ************************/
     }

src/headless/converse-emoji.js

@@ -264,21 +264,6 @@ converse.plugins.add('converse-emoji', {
         /************************ END Utils ************************/
 
 
-        function createEmojiPicker () {
-            if (!_converse.emojipicker) {
-                const id = `converse.emoji-${_converse.bare_jid}`;
-                _converse.emojipicker = new _converse.EmojiPicker({'id': id});
-                _converse.emojipicker.browserStorage = _converse.createStore(id);
-                _converse.emojipicker.fetch();
-            }
-        }
-
-        _converse.api.listen.on('logout', () => {
-            _converse.emojipicker.destroy();
-            delete _converse.emojipicker;
-        });
-
-
         /************************ BEGIN API ************************/
         // We extend the default converse.js API to add methods specific to MUC groupchats.
         Object.assign(_converse.api, {
@@ -296,8 +281,6 @@ converse.plugins.add('converse-emoji', {
                  * @returns {Promise}
                  */
                 async initialize () {
-                    createEmojiPicker();
-
                     if (_converse.emojis.initialized) {
                         return _converse.emojis.initialized;
                     }

src/headless/converse-headlines.js

@@ -52,6 +52,12 @@ converse.plugins.add('converse-headlines', {
          */
         const { _converse } = this;
 
+        /**
+         * Shows headline messages
+         * @class
+         * @namespace _converse.HeadlinesBox
+         * @memberOf _converse
+         */
         _converse.HeadlinesBox = _converse.ChatBox.extend({
             defaults () {
                 return {
@@ -67,6 +73,13 @@ converse.plugins.add('converse-headlines', {
             initialize () {
                 this.initMessages();
                 this.set({'box_id': `box-${btoa(this.get('jid'))}`});
+                /**
+                 * Triggered once a {@link _converse.HeadlinesBox} has been created and initialized.
+                 * @event _converse#headlinesBoxInitialized
+                 * @type { _converse.HeadlinesBox }
+                 * @example _converse.api.listen.on('headlinesBoxInitialized', model => { ... });
+                 */
+                _converse.api.trigger('headlinesBoxInitialized', this);
             }
         });