Add optional call button to chat box toolbar

converse.js

@@ -137,6 +137,7 @@
         this.prebind = false;
         this.show_controlbox_by_default = false;
         this.show_only_online_users = false;
+        this.show_call_button = false;
         this.show_emoticons = true;
         this.show_toolbar = true;
         this.use_vcards = true;
@@ -166,6 +167,7 @@
             'show_emoticons',
             'show_only_online_users',
             'show_toolbar',
+            'show_call_button',
             'sid',
             'use_vcards',
             'xhr_custom_status',
@@ -725,7 +727,8 @@
                 'click .toggle-otr': 'toggleOTRMenu',
                 'click .start-otr': 'startOTRFromToolbar',
                 'click .end-otr': 'endOTR',
-                'click .auth-otr': 'authOTR'
+                'click .auth-otr': 'authOTR',
+                'click .toggle-call': 'toggleCall'
             },
 
             template: _.template(
@@ -769,6 +772,9 @@
                         '</ul>' +
                     '</li>' +
                 '{[ } ]}' +
+                '{[ if (' + converse.show_call_button + ')  { ]}' +
+                    '<li><a class="toggle-call icon-phone" title="Start a call"></a></li>' +
+                '{[ } ]}' +
                 '{[ if (allow_otr)  { ]}' +
                     '<li class="toggle-otr {{otr_status_class}}" title="{{otr_tooltip}}">'+
                         '<span class="chat-toolbar-text">{{otr_translated_status}}</span>'+
@@ -1162,6 +1168,14 @@
                 }
             },
 
+            toggleCall: function (ev) {
+                ev.stopPropagation();
+
+                $('#conversejs').trigger('converse:callButtonClicked', {
+                    connection: converse.connection
+                });
+            },
+
             onChange: function (item, changed) {
                 if (_.has(item.changed, 'chat_status')) {
                     var chat_status = item.get('chat_status'),

spec/chatbox.js

@@ -109,7 +109,7 @@
                     expect(view).toBeDefined();
                     var $toolbar = view.$el.find('ul.chat-toolbar');
                     expect($toolbar.length).toBe(1);
-                    expect($toolbar.children('li').length).toBe(2);
+                    expect($toolbar.children('li').length).toBe(3);
                 }, converse));
 
                 it("contains a button for inserting emoticons", $.proxy(function () {
@@ -195,6 +195,33 @@
                     });
 
                 }, converse));
+
+                it("contains a button for starting a call", $.proxy(function () {
+                    var contact_jid = mock.cur_names[2].replace(' ','.').toLowerCase() + '@localhost';
+                    utils.openChatBoxFor(contact_jid);
+                    var chatbox = this.chatboxes.get(contact_jid);
+                    var view = this.chatboxesview.views[contact_jid];
+                    var $toolbar = view.$el.find('ul.chat-toolbar');
+                    var callButton = $toolbar.find('.toggle-call');
+
+                    expect(callButton.length).toBe(1);
+
+                    var callEventTriggered = false;
+
+                    $(document).on('converse:callButtonClicked', function() {
+                        callEventTriggered = true;
+                    });
+
+                    runs(function () {
+                        callButton.click();
+                    });
+
+                    waits(50);
+
+                    runs(function () {
+                        expect(callEventTriggered).toBe(true);
+                    });
+                }, converse));
             }, converse));
 
             describe("A Chat Message", $.proxy(function () {

tests_main.js

@@ -106,6 +106,7 @@ require([
             xhr_user_search: false,
             auto_subscribe: false,
             animate: false,
+            show_call_button: true,
             connection: mock.mock_connection,
             testing: true
         }, function (converse) {