Looser coupling with converse-vcard

To make it easier to remove it without breaking stuff.

Author: jcbrand

src/converse-chatboxviews.js

@@ -23,22 +23,24 @@ const AvatarMixin = {
         if (_.isNull(canvas_el)) {
             return;
         }
-        const image_type = this.model.vcard.get('image_type'),
-                image = this.model.vcard.get('image');
-
-        canvas_el.outerHTML = tpl_avatar({
+        const data = {
             'classes': canvas_el.getAttribute('class'),
             'width': canvas_el.width,
             'height': canvas_el.height,
-            'image': "data:" + image_type + ";base64," + image,
-        });
+        }
+        if (this.model.vcard) {
+            const image_type = this.model.vcard.get('image_type'),
+                  image = this.model.vcard.get('image');
+            data['image'] = "data:" + image_type + ";base64," + image;
+        }
+        canvas_el.outerHTML = tpl_avatar(data);
     },
 };
 
 
 converse.plugins.add('converse-chatboxviews', {
 
-    dependencies: ["converse-chatboxes"],
+    dependencies: ["converse-chatboxes", "converse-vcard"],
 
     overrides: {
         // Overrides mentioned here will be picked up by converse.js's

src/headless/converse-chatboxes.js

@@ -118,6 +118,10 @@ converse.plugins.add('converse-chatboxes', {
             },
 
             setVCard () {
+                if (!_converse.vcards) {
+                    // VCards aren't supported
+                    return;
+                }
                 if (this.get('type') === 'error') {
                     return;
                 } else if (this.get('type') === 'groupchat') {
@@ -135,11 +139,12 @@ converse.plugins.add('converse-chatboxes', {
             getDisplayName () {
                 if (this.get('type') === 'groupchat') {
                     return this.get('nick');
+                } else if (this.contact) {
+                    return this.contact.getDisplayName();
+                } else if (this.vcard) {
+                    return this.vcard.getDisplayName();
                 } else {
-                    if (this.contact) {
-                        return this.contact.getDisplayName();
-                    }
-                    return this.vcard.get('nickname') || this.vcard.get('fullname') || this.get('from');
+                    return this.get('from');
                 }
             },
 
@@ -271,12 +276,15 @@ converse.plugins.add('converse-chatboxes', {
                     // but we're in embedded mode.
                     return;
                 }
-
-                this.vcard = _converse.vcards.findWhere({'jid': jid}) || _converse.vcards.create({'jid': jid});
                 // XXX: this creates a dependency on converse-roster, which we
                 // probably shouldn't have here, so we should probably move
                 // ChatBox out of converse-chatboxes
                 this.presence = _converse.presences.findWhere({'jid': jid}) || _converse.presences.create({'jid': jid});
+
+                if (_converse.vcards) {
+                    this.vcard = _converse.vcards.findWhere({'jid': jid}) || _converse.vcards.create({'jid': jid});
+                }
+
                 if (this.get('type') === _converse.PRIVATE_CHAT_TYPE) {
                     this.setRosterContact(jid);
                 }
@@ -317,8 +325,11 @@ converse.plugins.add('converse-chatboxes', {
             getDisplayName () {
                 if (this.contact) {
                     return this.contact.getDisplayName();
+                } else if (this.vcard) {
+                    return this.vcard.getDisplayName();
+                } else {
+                    return this.get('jid');
                 }
-                return this.vcard.get('nickname') || this.vcard.get('fullname') || this.get('jid');
             },
 
             getUpdatedMessageAttributes (message, stanza) {

src/headless/converse-core.js

@@ -1059,11 +1059,6 @@ _converse.initialize = async function (settings, callback) {
         },
 
         initialize () {
-            this.vcard = _converse.vcards.findWhere({'jid': this.get('jid')});
-            if (_.isNil(this.vcard)) {
-                this.vcard = _converse.vcards.create({'jid': this.get('jid')});
-            }
-
             this.on('change:status', (item) => {
                 const status = this.get('status');
                 this.sendPresence(status);

src/headless/converse-roster.js

@@ -211,6 +211,10 @@ converse.plugins.add('converse-roster', {
             },
 
             setVCard () {
+                if (!_converse.vcards) {
+                    // VCards aren't supported
+                    return;
+                }
                 const jid = this.get('jid');
                 this.vcard = _converse.vcards.findWhere({'jid': jid}) || _converse.vcards.create({'jid': jid});
             },
@@ -258,11 +262,21 @@ converse.plugins.add('converse-roster', {
             },
 
             getDisplayName () {
-                return this.get('nickname') || this.vcard.get('nickname') || this.vcard.get('fullname') || this.get('jid');
+                if (this.get('nickname')) {
+                    return this.get('nickname');
+                } else if (this.vcard) {
+                    return this.vcard.getDisplayName();
+                } else {
+                    return this.get('jid');
+                }
             },
 
             getFullname () {
-                return this.vcard.get('fullname');
+                if (this.vcard) {
+                    return this.vcard.get('fullname');
+                } else {
+                    return this.get('jid');
+                }
             },
 
             /**

src/headless/converse-vcard.js

@@ -43,6 +43,10 @@ converse.plugins.add('converse-vcard', {
                 } else {
                     return Backbone.Model.prototype.set.apply(this, arguments);
                 }
+            },
+
+            getDisplayName () {
+                return this.get('nickname') || this.get('fullname') || this.get('jid');
             }
         });
 
@@ -124,6 +128,13 @@ converse.plugins.add('converse-vcard', {
         _converse.api.listen.on('sessionInitialized', _converse.initVCardCollection);
 
 
+        _converse.api.listen.on('statusInitialized', () => {
+            const vcards = _converse.vcards;
+            const jid = _converse.xmppstatus.get('jid');
+            _converse.xmppstatus.vcard = vcards.findWhere({'jid': jid}) || vcards.create({'jid': jid});
+        });
+
+
         _converse.api.listen.on('addClientFeatures', () => {
             _converse.api.disco.own.features.add(Strophe.NS.VCARD);
         });