Merge pull request #103 from Aupajo/call-button

Option to enable toolbar call button

converse.css

@@ -1083,6 +1083,10 @@ ul.chat-toolbar {
     float: right;
 }
 
+.chat-toolbar .toggle-call {
+	color: rgb(79, 79, 79);
+}
+
 .chat-toolbar ul li a {
     color: rgb(79, 79, 79);
 }

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,15 @@
                 }
             },
 
+            toggleCall: function (ev) {
+                ev.stopPropagation();
+
+                converse.emit('onCallButtonClicked', {
+                    connection: converse.connection,
+                    model: this.model
+                });
+            },
+
             onChange: function (item, changed) {
                 if (_.has(item.changed, 'chat_status')) {
                     var chat_status = item.get('chat_status'),

docs/CHANGES.rst

@@ -1,6 +1,11 @@
 Changelog
 =========
 
+Unreleased
+----------
+
+* Option to display a call button in the chatbox toolbar, to allow third-party libraries to provide a calling feature. [Aupajo]
+
 0.7.2 (2013-12-18)
 ------------------
 

docs/source/index.rst

@@ -813,6 +813,28 @@ the page with class *toggle-online-users*.
 If this options is set to true, the controlbox will by default be shown upon
 page load.
 
+
+show_call_button
+----------------
+
+Default = ``false``
+
+Enable to display a call button on the chatbox toolbar.
+
+When the call button is pressed, it will emit an event that can be used by a third-party library to initiate a call.
+
+::
+
+    converse.on('onCallButtonClicked', function(event, data) {
+        console.log('Call button was clicked.');
+        console.log('Strophe connection is', data.connection);
+        console.log('Bare buddy JID is', data.model.get('jid'));
+
+        // ... Third-party library code ...
+    });
+
+
+
 show_only_online_users
 ----------------------
 

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,24 @@
                     });
 
                 }, converse));
+
+                it("contains a button for starting a call", $.proxy(function () {
+                    spyOn(converse, 'emit');
+
+                    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);
+
+                    runs(function () {
+                        callButton.click();
+                        expect(converse.emit).toHaveBeenCalledWith('onCallButtonClicked', jasmine.any(Object));
+                    });
+                }, 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) {