Fetch vCard once a roster contact is added. Updates #38

This will happen in the background and in the meantime roster contacts will
appear under their JIDs.

converse.js

@@ -2255,7 +2255,7 @@
                     this.$el.html(this.request_template(item.toJSON()));
                     converse.showControlBox();
                 } else if (subscription === 'both' || subscription === 'to') {
-                    _.each(['pending-xmpp-contact', 'requesting-xmpp-contact'], 
+                    _.each(['pending-xmpp-contact', 'requesting-xmpp-contact'],
                         function (cls) {
                             if (this.el.className.indexOf(cls) !== -1) {
                                 this.$el.removeClass(cls);
@@ -2276,35 +2276,46 @@
                 }
                 return this;
             },
-
-            initialize: function () {
-                this.options.model.on('change', function (item, changed) {
-                    if (_.has(item.changed, 'chat_status')) {
-                        this.$el.attr('class', item.changed.chat_status);
-                    }
-                }, this);
-            }
         });
 
         this.getVCard = function (jid, callback, errback) {
-            converse.connection.vcard.get($.proxy(function (iq) {
-                $vcard = $(iq).find('vCard');
-                var fullname = $vcard.find('FN').text(),
-                    img = $vcard.find('BINVAL').text(),
-                    img_type = $vcard.find('TYPE').text(),
-                    url = $vcard.find('URL').text();
-                var rosteritem = converse.roster.get(jid);
-                if (rosteritem) {
-                    rosteritem.save({
-                        'fullname': fullname || jid,
-                        'image_type': img_type,
-                        'image': img,
-                        'url': url,
-                        'vcard_updated': converse.toISOString(new Date())
-                    });
-                }
-                callback(jid, fullname, img, img_type, url);
-            }, this), jid, errback);
+            converse.connection.vcard.get(
+                $.proxy(function (iq) {
+                    // Successful callback
+                    $vcard = $(iq).find('vCard');
+                    var fullname = $vcard.find('FN').text(),
+                        img = $vcard.find('BINVAL').text(),
+                        img_type = $vcard.find('TYPE').text(),
+                        url = $vcard.find('URL').text();
+                    if (jid) {
+                        var rosteritem = converse.roster.get(jid);
+                        if (rosteritem) {
+                            rosteritem.save({
+                                'fullname': fullname || jid,
+                                'image_type': img_type,
+                                'image': img,
+                                'url': url,
+                                'vcard_updated': converse.toISOString(new Date())
+                            });
+                        }
+                    }
+                    if (callback) {
+                        callback(jid, fullname, img, img_type, url);
+                    }
+                }, this),
+                jid,
+                function (iq) {
+                    // Error callback
+                    var rosteritem = converse.roster.get(jid);
+                    if (rosteritem) {
+                        rosteritem.save({
+                            'vcard_updated': converse.toISOString(new Date())
+                        });
+                    }
+                    if (errback) {
+                        errback(iq);
+                    }
+                });
         };
 
         this.RosterItems = Backbone.Collection.extend({
@@ -2579,6 +2590,11 @@
                     var view = new converse.RosterItemView({model: item});
                     this.rosteritemviews[item.id] = view;
                     this.render(item);
+                    if (!item.get('vcard_updated')) {
+                        // This will update the vcard, which triggers a change
+                        // request which will rerender the roster item.
+                        converse.getVCard(item.get('jid'));
+                    }
                 }, this);
 
                 this.model.on('change', function (item, changed) {
@@ -2656,7 +2672,7 @@
                     if (changed_presence) {
                         this.sortRoster(changed_presence);
                         sorted = true;
-                    } 
+                    }
                     if (item.get('is_last')) {
                         if (!sorted) {
                             this.sortRoster(item.get('chat_status'));