diff --git a/converse.css b/converse.css index a5b459919..4a1143741 100644 --- a/converse.css +++ b/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); } diff --git a/converse.js b/converse.js index fceac4529..e26a26b1a 100644 --- a/converse.js +++ b/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 @@ '' + '' + '{[ } ]}' + + '{[ if (' + converse.show_call_button + ') { ]}' + + '
  • ' + + '{[ } ]}' + '{[ if (allow_otr) { ]}' + '
  • '+ '{{otr_translated_status}}'+ @@ -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'), diff --git a/docs/CHANGES.rst b/docs/CHANGES.rst index fd689727e..0a5a6e0e8 100644 --- a/docs/CHANGES.rst +++ b/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) ------------------ diff --git a/docs/source/index.rst b/docs/source/index.rst index 03837cac2..14b027bc7 100644 --- a/docs/source/index.rst +++ b/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 ---------------------- diff --git a/spec/chatbox.js b/spec/chatbox.js index 3226518ed..0afaf86ff 100644 --- a/spec/chatbox.js +++ b/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 () { diff --git a/tests_main.js b/tests_main.js index d4e41ae08..294092558 100644 --- a/tests_main.js +++ b/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) {