emoji: Add `initialize` API method and call when chat view gets created

spec/chatbox.js

@@ -440,6 +440,7 @@
                     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,6 +23,7 @@
                 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();
@@ -43,6 +44,8 @@
                 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,25 +90,22 @@ converse.plugins.add('converse-emoji-views', {
                 this.emoji_dropdown.toggle();
             },
 
-            createEmojiPicker () {
+            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();
                 }
-                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();
-                }
-                this.emoji_picker_view = new _converse.EmojiPickerView({'model': _converse.emojipicker});
-                this.emoji_picker_view.chatview = this;
-                this.insertEmojiPicker();
             },
 
-            async createEmojiDropdown () {
+            createEmojiDropdown () {
                 if (!this.emoji_dropdown) {
-                    await _converse.api.waitUntil('emojisInitialized');
                     const el = this.el.querySelector('.emoji-picker');
                     this.emoji_dropdown = new bootstrap.Dropdown(el, true);
                     this.emoji_dropdown.el = el;
@@ -141,7 +138,8 @@ converse.plugins.add('converse-emoji-views', {
                 'keydown .emoji-search': 'onKeyDown'
             },
 
-            async initialize () {
+            initialize (config) {
+                this.chatview = config.chatview;
                 this.onGlobalKeyDown = ev => this._onGlobalKeyDown(ev);
 
                 const body = document.querySelector('body');
@@ -158,7 +156,6 @@ converse.plugins.add('converse-emoji-views', {
                     this.navigator.select(el);
                     !this.navigator.enabled && this.navigator.enable();
                 });
-                await _converse.api.waitUntil('emojisInitialized');
                 this.render();
             },
 
@@ -456,8 +453,15 @@ 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.createEmojiPicker();
+                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());
+
+        /************************ END Event Handlers ************************/
     }
 });

src/headless/converse-emoji.js

@@ -263,45 +263,66 @@ converse.plugins.add('converse-emoji', {
         });
         /************************ END Utils ************************/
 
-        async function initializeEmojis () {
-            if (_converse.emojis.json) {
-                return;
+
+        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();
             }
-            const { default: json } = await import(/*webpackChunkName: "emojis" */ './emojis.json');
-            _converse.emojis.json = json;
-            _converse.emojis.categories = Object.keys(_converse.emojis.json);
-            _converse.emojis_map = _converse.emojis.categories.reduce((result, cat) => Object.assign(result, _converse.emojis.json[cat]), {});
-            _converse.emojis_list = Object.values(_converse.emojis_map);
-            _converse.emojis_list.sort((a, b) => a.sn < b.sn ? -1 : (a.sn > b.sn ? 1 : 0));
-            _converse.emoji_shortnames = _converse.emojis_list.map(m => m.sn);
-
-            const getShortNames = () => _converse.emoji_shortnames.map(s => s.replace(/[+]/g, "\\$&")).join('|');
-            _converse.emojis.shortnames_regex = new RegExp("<object[^>]*>.*?<\/object>|<span[^>]*>.*?<\/span>|<(?:object|embed|svg|img|div|span|p|a)[^>]*>|("+getShortNames()+")", "gi");
-
-            _converse.emojis.toned = getTonedEmojis();
+        }
+
+        _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, {
             /**
-             * Triggered once the JSON file representing emoji data has been
-             * fetched and its save to start calling emoji utility methods.
-             * @event _converse#emojisInitialized
+             * The "rooms" namespace groups methods relevant to chatrooms
+             * (aka groupchats).
+             *
+             * @namespace _converse.api.rooms
+             * @memberOf _converse.api
              */
-            _converse.api.trigger('emojisInitialized');
-        }
+            emojis: {
+                /**
+                 * Initializes Emoji support by downloading the emojis JSON (and any applicable images).
+                 * @method _converse.api.emojis.initialize
+                 * @returns {Promise}
+                 */
+                async initialize () {
+                    createEmojiPicker();
 
+                    if (_converse.emojis.initialized) {
+                        return _converse.emojis.initialized;
+                    }
+                    _converse.emojis.initialized = u.getResolveablePromise();
+                    const { default: json } = await import(/*webpackChunkName: "emojis" */ './emojis.json');
+                    _converse.emojis.json = json;
+                    _converse.emojis.categories = Object.keys(_converse.emojis.json);
+                    _converse.emojis_map = _converse.emojis.categories.reduce((result, cat) => Object.assign(result, _converse.emojis.json[cat]), {});
+                    _converse.emojis_list = Object.values(_converse.emojis_map);
+                    _converse.emojis_list.sort((a, b) => a.sn < b.sn ? -1 : (a.sn > b.sn ? 1 : 0));
+                    _converse.emoji_shortnames = _converse.emojis_list.map(m => m.sn);
 
-        /************************ BEGIN Event Handlers ************************/
-        _converse.api.listen.on('clearSession', () => {
-            if (_converse.emojipicker) {
-                _converse.emojipicker.destroy();
-                delete _converse.emojipicker
-            }
-        });
+                    const getShortNames = () => _converse.emoji_shortnames.map(s => s.replace(/[+]/g, "\\$&")).join('|');
+                    _converse.emojis.shortnames_regex = new RegExp("<object[^>]*>.*?<\/object>|<span[^>]*>.*?<\/span>|<(?:object|embed|svg|img|div|span|p|a)[^>]*>|("+getShortNames()+")", "gi");
 
-        _converse.api.listen.on('chatBoxesInitialized', () => {
-            _converse.chatboxes.on(
-                'add',
-                chat => (chat.get('type') !== _converse.CONTROLBOX_TYPE) && initializeEmojis()
-            );
+                    _converse.emojis.toned = getTonedEmojis();
+                    _converse.emojis.initialized.resolve();
+                    /**
+                     * Triggered once the JSON file representing emoji data has been
+                     * fetched and its save to start calling emoji utility methods.
+                     * @event _converse#emojisInitialized
+                     */
+                    _converse.api.trigger('emojisInitialized');
+                }
+            }
         });
-        /************************ END Event Handlers ************************/
     }
 });