Initial work towards decoupling contact adding

New conf variable in converse.js to indicate how contacts are added (either via
XHR or directly).

converse.css

@@ -234,7 +234,7 @@ a.subscribe-to-user {
     font-weight: bold;
 }
 
-dl.add-xmpp-contact {
+dl.add-converse-contact {
     margin: 0 0 0 0.5em;
     padding-top: 3px;
     z-index: 21;
@@ -246,7 +246,7 @@ dt#xmpp-contact-search {
 }
 
 .fancy-dropdown a.choose-xmpp-status,
-.fancy-dropdown a.add-xmpp-contact {
+.fancy-dropdown a.toggle-xmpp-contact-form {
     text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
     padding-left: 1.5em;
     width: 140px;
@@ -283,7 +283,7 @@ form.search-xmpp-contact {
 }
 
 form.search-xmpp-contact input {
-    width: 9em;
+    width: 8em;
 }
 
 .oc-chat-head {
@@ -596,20 +596,14 @@ form.sendXMPPMessage {
     height: 54px;
 }
 
-form#set-custom-xmpp-status {
+#set-custom-xmpp-status {
     float: left;
-    padding: 0;
-    background: none;
 }
 
 #set-custom-xmpp-status button {
     padding: 1px 2px 1px 1px;
 }
 
-input.custom-xmpp-status {
-    width: 138px;
-}
-
 /* status dropdown styles */
 dl.dropdown {
     margin-right: 0.5em;
@@ -622,6 +616,10 @@ div.xmpp-status {
     padding: 3px;
 }
 
+input.custom-xmpp-status {
+    height: 18px;
+}
+
 .fancy-dropdown {
     border:1px solid #ddd;
     height: 22px;

converse.js

@@ -573,9 +573,10 @@
         className: 'oc-chat-content',
         id: 'users',
         events: {
-            'click a.add-xmpp-contact': 'toggleContactForm',
+            'click a.toggle-xmpp-contact-form': 'toggleContactForm',
+            'submit form.add-xmpp-contact': 'addContactFromForm',
             'submit form.search-xmpp-contact': 'searchContacts',
-            'click a.subscribe-to-user': 'subscribeToContact'
+            'click a.subscribe-to-user': 'addContactFromList'
         },
 
         tab_template: _.template('<li><a class="s current" href="#users">Contacts</a></li>'),
@@ -590,23 +591,38 @@
                     '</select>'+
                 '</span>'+
             '</form>'+
-            '<dl class="add-xmpp-contact dropdown">' +
+            '<dl class="add-converse-contact dropdown">' +
                 '<dt id="xmpp-contact-search" class="fancy-dropdown">' +
-                    '<a class="add-xmpp-contact" href="#" title="Click to search for new users to add as chat contacts">Add a contact</a>' +
+                    '<a class="toggle-xmpp-contact-form" href="#" title="Click to add new chat contacts">Add a contact</a>' +
                 '</dt>' +
                 '<dd class="search-xmpp" style="display:none"><ul>' +
+                '</ul></dd>' +
+            '</dl>'
+        ),
+
+        add_contact_template: _.template(
+                '<form class="add-xmpp-contact">' +
+                    '<input type="text" name="identifier" class="username" placeholder="Contact name"/>' +
+                    '<button type="submit">Add</button>' +
+                '</form>'),
+
+        search_contact_template: _.template(
                 '<form class="search-xmpp-contact">' +
                     '<input type="text" name="identifier" class="username" placeholder="Contact name"/>' +
                     '<button type="submit">Search</button>' +
                     '<ul id="found-users"></ul>' +
-                '</form>' +
-                '</ul></dd>' +
-            '</dl>'
-        ),
+                '</form>'),
 
         render: function () {
+            var markup;
             this.$parent.find('#controlbox-tabs').append(this.tab_template());
             this.$parent.find('#controlbox-panes').append(this.$el.html(this.template()));
+            if (xmppchat.xhr_user_search) {
+                markup = this.search_contact_template();
+            } else {
+                markup = this.add_contact_template();
+            }
+            this.$el.find('#xmpp-contact-search').siblings('.search-xmpp').append(markup);
             return this;
         },
 
@@ -618,34 +634,44 @@
         searchContacts: function (ev) {
             ev.preventDefault();
             $.getJSON(portal_url + "/search-users?q=" + $(ev.target).find('input.username').val(), function (data) {
-                    var $results_el = $('#found-users');
-                    $(data).each(function (idx, obj) {
-                        if ($results_el.children().length) {
-                        $results_el.empty();
-                        }
-                        $results_el.append(
-                            $('<li></li>')
-                            .attr('id', 'found-users-'+obj.id)
-                            .append(
-                                $('<a class="subscribe-to-user" href="#" title="Click to add as a chat contact"></a>')
-                                .attr('data-recipient', Strophe.escapeNode(obj.id)+'@'+xmppchat.domain)
-                                .text(obj.fullname)
-                                )
-                            );
-                        });
-                    });
-            },
+                var $results_el = $('#found-users');
+                $(data).each(function (idx, obj) {
+                    if ($results_el.children().length) {
+                    $results_el.empty();
+                    }
+                    $results_el.append(
+                        $('<li></li>')
+                        .attr('id', 'found-users-'+obj.id)
+                        .append(
+                            $('<a class="subscribe-to-user" href="#" title="Click to add as a chat contact"></a>')
+                            .attr('data-recipient', Strophe.escapeNode(obj.id)+'@'+xmppchat.domain)
+                            .text(obj.fullname)
+                        )
+                    );
+                });
+            });
+        },
+
+        addContactFromForm: function (ev) {
+            ev.preventDefault();
+            this.addContact($(ev.target).find('input').val());
+            $('.search-xmpp').hide();
+        },
 
-        subscribeToContact: function (ev) {
+        addContactFromList: function (ev) {
             ev.preventDefault();
             var $target = $(ev.target),
                 jid = $target.attr('data-recipient'),
                 name = $target.text();
-            xmppchat.connection.roster.add(jid, name, [], function (iq) {
-                    xmppchat.connection.roster.subscribe(jid, null, xmppchat.fullname);
-                    });
+            this.addContact(jid, name);
             $target.parent().remove();
             $('.search-xmpp').hide();
+        },
+
+        addContact: function (jid, name) {
+            xmppchat.connection.roster.add(jid, name, [], function (iq) {
+                xmppchat.connection.roster.subscribe(jid, null, xmppchat.fullname);
+            });
         }
     });
 
@@ -1910,11 +1936,12 @@
         $('.conn-feedback').text(message);
     }
 
-    xmppchat.initialize = function () {
-        var chatdata = $('div#collective-xmpp-chat-data');
-        this.fullname = chatdata.attr('fullname');
-        this.prebind = chatdata.attr('prebind');
-        this.auto_subscribe = chatdata.attr('auto_subscribe') === "True" || false;
+    xmppchat.initialize = function (data) {
+        this.prebind = data.attr('prebind');
+        this.fullname = data.attr('fullname');
+        this.xhr_user_search = data.attr('xhr_user_search');
+        this.auto_subscribe = data.attr('auto_subscribe') === "True" || false;
+
         this.chatboxes = new this.ChatBoxes();
         this.chatboxesview = new this.ChatBoxesView({model: this.chatboxes});
         $('a.toggle-online-users').bind(
@@ -1978,7 +2005,9 @@
     // Event handlers
     // --------------
     $(document).ready($.proxy(function () {
-        this.initialize();
+        // TODO: This code is Plone specific and needs to be factored out
+        var data = $('div#collective-xmpp-chat-data');
+        this.initialize(data);
         $(document).bind('jarnxmpp.connecting', $.proxy(function (ev, conn) {
         this.giveFeedback('Connecting to chat...');
         }, this));

spec/MainSpec.js

@@ -400,8 +400,20 @@
             }, xmppchat));
         }, xmppchat));
 
-        describe("A Chatbox", $.proxy(function () {
+        describe("The 'Add Contact' widget", $.proxy(function () {
+            it("opens up an add form when you click on it", $.proxy(function () {
+                var panel = this.chatboxesview.views.controlbox.contactspanel;
+                spyOn(panel, 'toggleContactForm').andCallThrough();
+                panel.delegateEvents(); // We need to rebind all events otherwise our spy won't be called
+                panel.$el.find('a.toggle-xmpp-contact-form').click();
+                expect(panel.toggleContactForm).toHaveBeenCalled();
+                // XXX: Awaiting more tests, close it again for now...
+                panel.$el.find('a.toggle-xmpp-contact-form').click();
+            }, xmppchat));
+
+        }, xmppchat));
 
+        describe("A Chatbox", $.proxy(function () {
             it("is created when you click on a roster item", $.proxy(function () {
                 var i, $el, click, jid, view;
                 // showControlBox was called earlier, so the controlbox is
@@ -585,10 +597,8 @@
                     }, xmppchat));
                 }, xmppchat));
 
-
             }, xmppchat));
         }, xmppchat));
 
-
     }, xmppchat));
 }));