Replace the onChatBoxAdded override with event handlers

spec/roomslist.js

@@ -51,7 +51,7 @@
                     list = controlbox.el.querySelector('div.rooms-list-container');
                     expect(_.includes(list.classList, 'hidden')).toBeTruthy();
                     done();
-                });
+                }).catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL));
             }
         ));
     });
@@ -87,7 +87,7 @@
                 item = room_els[0];
                 expect(item.textContent.trim()).toBe('balcony@chat.shakespeare.lit');
                 done();
-            });
+            }).catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL));
         }));
 
         it("has an info icon which opens a details modal when clicked", mock.initConverseWithPromises(

src/converse-chatboxes.js

@@ -244,7 +244,7 @@
                         'bookmarked': false,
                         'chat_state': undefined,
                         'num_unread': 0,
-                        'type': 'chatbox',
+                        'type': _converse.PRIVATE_CHAT_TYPE,
                         'message_type': 'chat',
                         'url': '',
                         'hidden': _.includes(['mobile', 'fullscreen'], _converse.view_mode)
@@ -807,7 +807,6 @@
                 },
 
                 initialize () {
-                    this.model.on("add", this.onChatBoxAdded, this);
                     this.model.on("destroy", this.removeChat, this);
                     this.el.classList.add(`converse-${_converse.view_mode}`);
                     this.render();
@@ -830,13 +829,6 @@
                     this.row_el.insertAdjacentElement('afterBegin', el);
                 },
 
-                onChatBoxAdded (item) {
-                    // Views aren't created here, since the core code doesn't
-                    // contain any views. Instead, they're created in overrides in
-                    // plugins, such as in converse-chatview.js and converse-muc.js
-                    return this.get(item.get('id'));
-                },
-
                 removeChat (item) {
                     this.remove(item.get('id'));
                 },
@@ -1031,7 +1023,7 @@
                             _converse.chatboxes.each(function (chatbox) {
                                 // FIXME: Leaky abstraction from MUC. We need to add a
                                 // base type for chat boxes, and check for that.
-                                if (chatbox.get('type') !== 'chatroom') {
+                                if (chatbox.get('type') !== _converse.CHATROOMS_TYPE) {
                                     result.push(chatbox);
                                 }
                             });

src/converse-chatview.js

@@ -64,27 +64,6 @@
          */
         dependencies: ["converse-chatboxes", "converse-disco", "converse-message-view", "converse-modal"],
 
-        overrides: {
-            // Overrides mentioned here will be picked up by converse.js's
-            // plugin architecture they will replace existing methods on the
-            // relevant objects or classes.
-            //
-            // New functions which don't exist yet can also be added.
-            //
-            ChatBoxViews: {
-                onChatBoxAdded (item) {
-                    const { _converse } = this.__super__;
-                    let view = this.get(item.get('id'));
-                    if (!view) {
-                        view = new _converse.ChatBoxView({model: item});
-                        this.add(item.get('id'), view);
-                        return view;
-                    } else {
-                        return this.__super__.onChatBoxAdded.apply(this, arguments);
-                    }
-                }
-            }
-        },
 
         initialize () {
             /* The initialize function gets called as soon as the plugin is
@@ -1280,6 +1259,15 @@
                 }
             });
 
+            _converse.on('chatBoxesInitialized', () => {
+                const that = _converse.chatboxviews;
+                _converse.chatboxes.on('add', item => {
+                    if (!that.get(item.get('id')) && item.get('type') === _converse.PRIVATE_CHAT_TYPE) {
+                        that.add(item.get('id'), new _converse.ChatBoxView({model: item}));
+                    }
+                });
+            });
+
             _converse.on('connected', () => {
                 // Advertise that we support XEP-0382 Message Spoilers
                 _converse.api.disco.own.features.add(Strophe.NS.SPOILER);

src/converse-controlbox.js

@@ -112,23 +112,6 @@
             },
 
             ChatBoxViews: {
-                onChatBoxAdded (item) {
-                    const { _converse } = this.__super__;
-                    if (item.get('box_id') === 'controlbox') {
-                        let view = this.get(item.get('id'));
-                        if (view) {
-                            view.model = item;
-                            view.initialize();
-                            return view;
-                        } else {
-                            view = new _converse.ControlBoxView({model: item});
-                            return this.add(item.get('id'), view);
-                        }
-                    } else {
-                        return this.__super__.onChatBoxAdded.apply(this, arguments);
-                    }
-                },
-
                 closeAllChatBoxes () {
                     const { _converse } = this.__super__;
                     this.each(function (view) {
@@ -170,7 +153,6 @@
             },
 
             ChatBoxView: {
-
                 insertIntoDOM () {
                     const view = this.__super__._converse.chatboxviews.get("controlbox");
                     if (view) {
@@ -200,13 +182,14 @@
 
             _converse.api.promises.add('controlboxInitialized');
 
-            _converse.addControlBox = () =>
-                _converse.chatboxes.add({
-                    id: 'controlbox',
-                    box_id: 'controlbox',
-                    type: 'controlbox',
-                    closed: !_converse.show_controlbox_by_default
+            _converse.addControlBox = () => {
+                return _converse.chatboxes.add({
+                    'id': 'controlbox',
+                    'box_id': 'controlbox',
+                    'type': _converse.CONTROLBOX_TYPE,
+                    'closed': !_converse.show_controlbox_by_default
                 })
+            }
 
 
             _converse.ControlBoxView = _converse.ChatBoxView.extend({
@@ -584,6 +567,21 @@
                 }
             });
 
+            _converse.on('chatBoxesInitialized', () => {
+                const that = _converse.chatboxviews;
+                _converse.chatboxes.on('add', item => {
+                    if (item.get('type') === _converse.CONTROLBOX_TYPE) {
+                        const view = that.get(item.get('id'));
+                        if (view) {
+                            view.model = item;
+                            view.initialize();
+                        } else {
+                            that.add(item.get('id'), new _converse.ControlBoxView({model: item}));
+                        }
+                    }
+                });
+            });
+
             _converse.on('clearSession', () => {
                 if (_converse.config.get('trusted')) {
                     const chatboxes = _.get(_converse, 'chatboxes', null);

src/converse-core.js

@@ -186,6 +186,14 @@
     _converse.PAUSED = 'paused';
     _converse.GONE = 'gone';
 
+
+    // Chat types
+    _converse.PRIVATE_CHAT_TYPE = 'chatbox';
+    _converse.CHATROOMS_TYPE = 'chatroom';
+    _converse.HEADLINES_TYPE = 'headline';
+    _converse.CONTROLBOX_TYPE = 'controlbox';
+
+
     // Default configuration values
     // ----------------------------
     _converse.default_settings = {

src/converse-headline.js

@@ -15,7 +15,6 @@
 }(this, function (converse, tpl_chatbox) {
     "use strict";
     const { _, utils } = converse.env;
-    const HEADLINES_TYPE = 'headline';
 
     converse.plugins.add('converse-headline', {
         /* Plugin dependencies are other plugins which might be
@@ -40,26 +39,12 @@
             ChatBoxes: {
                 model (attrs, options) {
                     const { _converse } = this.__super__;
-                    if (attrs.type == HEADLINES_TYPE) {
+                    if (attrs.type == _converse.HEADLINES_TYPE) {
                         return new _converse.HeadlinesBox(attrs, options);
                     } else {
                         return this.__super__.model.apply(this, arguments);
                     }
                 },
-            },
-
-            ChatBoxViews: {
-                onChatBoxAdded (item) {
-                    const { _converse } = this.__super__;
-                    let view = this.get(item.get('id'));
-                    if (!view && item.get('type') === 'headline') {
-                        view = new _converse.HeadlinesBoxView({model: item});
-                        this.add(item.get('id'), view);
-                        return view;
-                    } else {
-                        return this.__super__.onChatBoxAdded.apply(this, arguments);
-                    }
-                }
             }
         },
 
@@ -73,7 +58,7 @@
 
             _converse.HeadlinesBox = _converse.ChatBox.extend({
                 defaults: {
-                    'type': 'headline',
+                    'type': _converse.HEADLINES_TYPE,
                     'bookmarked': false,
                     'chat_state': undefined,
                     'num_unread': 0,
@@ -135,7 +120,7 @@
                     const chatbox = _converse.chatboxes.create({
                         'id': from_jid,
                         'jid': from_jid,
-                        'type': 'headline',
+                        'type': _converse.HEADLINES_TYPE,
                         'from': from_jid
                     });
                     chatbox.createMessage(message, message);
@@ -149,6 +134,16 @@
             }
             _converse.on('connected', registerHeadlineHandler);
             _converse.on('reconnected', registerHeadlineHandler);
+
+
+            _converse.on('chatBoxesInitialized', () => {
+                const that = _converse.chatboxviews;
+                _converse.chatboxes.on('add', item => {
+                    if (!that.get(item.get('id')) && item.get('type') === _converse.HEADLINES_TYPE) {
+                        that.add(item.get('id'), new _converse.HeadlinesBoxView({model: item}));
+                    }
+                });
+            });
         }
     });
 }));

src/converse-muc-views.js

@@ -125,19 +125,6 @@
                         this.renderRoomsPanel();
                     }
                 },
-            },
-
-            ChatBoxViews: {
-                onChatBoxAdded (item) {
-                    const { _converse } = this.__super__;
-                    let view = this.get(item.get('id'));
-                    if (!view && item.get('type') === converse.CHATROOMS_TYPE) {
-                        view = new _converse.ChatRoomView({'model': item});
-                        return this.add(item.get('id'), view);
-                    } else {
-                        return this.__super__.onChatBoxAdded.apply(this, arguments);
-                    }
-                }
             }
         },
 
@@ -1957,6 +1944,16 @@
             }
 
             /************************ BEGIN Event Handlers ************************/
+
+            _converse.on('chatBoxesInitialized', () => {
+                const that = _converse.chatboxviews;
+                _converse.chatboxes.on('add', item => {
+                    if (!that.get(item.get('id')) && item.get('type') === _converse.CHATROOMS_TYPE) {
+                        return that.add(item.get('id'), new _converse.ChatRoomView({'model': item}));
+                    }
+                });
+            });
+
             _converse.on('controlboxInitialized', (view) => {
                 if (!_converse.allow_muc) {
                     return;
@@ -1970,7 +1967,7 @@
                  * all the open groupchats.
                  */
                 _converse.chatboxviews.each(function (view) {
-                    if (view.model.get('type') === converse.CHATROOMS_TYPE) {
+                    if (view.model.get('type') === _converse.CHATROOMS_TYPE) {
                         view.model.save('connection_status', converse.ROOMSTATUS.DISCONNECTED);
                         view.model.registerHandlers();
                         view.populateAndJoin();

src/converse-muc.js

@@ -35,7 +35,6 @@
     Strophe.addNamespace('MUC_USER', Strophe.NS.MUC + "#user");
 
     converse.MUC_NICK_CHANGED_CODE = "303";
-    converse.CHATROOMS_TYPE = 'chatroom';
 
     converse.ROOM_FEATURES = [
         'passwordprotected', 'unsecured', 'hidden',
@@ -77,7 +76,9 @@
             // New functions which don't exist yet can also be added.
 
             tearDown () {
-                const groupchats = this.chatboxes.where({'type': converse.CHATROOMS_TYPE});
+                const { _converse } = this.__super__,
+                      groupchats = this.chatboxes.where({'type': _converse.CHATROOMS_TYPE});
+
                 _.each(groupchats, function (groupchat) {
                     u.safeSave(groupchat, {'connection_status': converse.ROOMSTATUS.DISCONNECTED});
                 });
@@ -87,7 +88,7 @@
             ChatBoxes: {
                 model (attrs, options) {
                     const { _converse } = this.__super__;
-                    if (attrs.type == converse.CHATROOMS_TYPE) {
+                    if (attrs.type == _converse.CHATROOMS_TYPE) {
                         return new _converse.ChatRoom(attrs, options);
                     } else {
                         return this.__super__.model.apply(this, arguments);
@@ -143,7 +144,7 @@
                  * are correct, for example that the "type" is set to
                  * "chatroom".
                  */
-                settings.type = converse.CHATROOMS_TYPE;
+                settings.type = _converse.CHATROOMS_TYPE;
                 settings.id = jid;
                 settings.box_id = b64_sha1(jid)
                 const chatbox = _converse.chatboxes.getChatBox(jid, settings, true);
@@ -175,7 +176,7 @@
                           'description': '',
                           'features_fetched': false,
                           'roomconfig': {},
-                          'type': converse.CHATROOMS_TYPE,
+                          'type': _converse.CHATROOMS_TYPE,
                           'message_type': 'groupchat'
                         }
                     );
@@ -1213,7 +1214,7 @@
 
             const getChatRoom = function (jid, attrs, create) {
                 jid = jid.toLowerCase();
-                attrs.type = converse.CHATROOMS_TYPE;
+                attrs.type = _converse.CHATROOMS_TYPE;
                 attrs.id = jid;
                 attrs.box_id = b64_sha1(jid)
                 return _converse.chatboxes.getChatBox(jid, attrs, create);
@@ -1252,7 +1253,7 @@
                  * when fetched from session storage.
                  */
                 _converse.chatboxes.each(function (model) {
-                    if (model.get('type') === converse.CHATROOMS_TYPE) {
+                    if (model.get('type') === _converse.CHATROOMS_TYPE) {
                         model.save('connection_status', converse.ROOMSTATUS.DISCONNECTED);
                     }
                 });
@@ -1351,7 +1352,7 @@
                         if (_.isUndefined(jids)) {
                             const result = [];
                             _converse.chatboxes.each(function (chatbox) {
-                                if (chatbox.get('type') === converse.CHATROOMS_TYPE) {
+                                if (chatbox.get('type') === _converse.CHATROOMS_TYPE) {
                                     result.push(chatbox);
                                 }
                             });