From db60894834ee46a3538c1342dc6bfe554ca0e832 Mon Sep 17 00:00:00 2001 From: Pete Nicholls Date: Wed, 18 Dec 2013 15:52:16 +1300 Subject: [PATCH 1/5] Add optional call button to chat box toolbar --- converse.js | 16 +++++++++++++++- spec/chatbox.js | 29 ++++++++++++++++++++++++++++- tests_main.js | 1 + 3 files changed, 44 insertions(+), 2 deletions(-) diff --git a/converse.js b/converse.js index fceac4529..f321d720b 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,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'), diff --git a/spec/chatbox.js b/spec/chatbox.js index 3226518ed..bdfbf3083 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,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 () { 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) { From 6002e0fdf924ee7de12d5b6fb9acb178aca87b17 Mon Sep 17 00:00:00 2001 From: Pete Nicholls Date: Thu, 19 Dec 2013 12:16:08 +1300 Subject: [PATCH 2/5] Use converse.emit to dispatch call button event --- converse.js | 2 +- spec/chatbox.js | 15 +++------------ 2 files changed, 4 insertions(+), 13 deletions(-) diff --git a/converse.js b/converse.js index f321d720b..68262a089 100644 --- a/converse.js +++ b/converse.js @@ -1171,7 +1171,7 @@ toggleCall: function (ev) { ev.stopPropagation(); - $('#conversejs').trigger('converse:callButtonClicked', { + converse.emit('onCallButtonClicked', { connection: converse.connection }); }, diff --git a/spec/chatbox.js b/spec/chatbox.js index bdfbf3083..0afaf86ff 100644 --- a/spec/chatbox.js +++ b/spec/chatbox.js @@ -197,6 +197,8 @@ }, 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); @@ -206,20 +208,9 @@ 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); + expect(converse.emit).toHaveBeenCalledWith('onCallButtonClicked', jasmine.any(Object)); }); }, converse)); }, converse)); From 410b80c326cd469e3aa0935acccf4c0d4e8a3e0f Mon Sep 17 00:00:00 2001 From: Pete Nicholls Date: Thu, 19 Dec 2013 12:22:32 +1300 Subject: [PATCH 3/5] Style call button to match toolbar button colour --- converse.css | 4 ++++ 1 file changed, 4 insertions(+) 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); } From 1d3aa9f4509a0d99e866cfacf4ee7b32998dc2ab Mon Sep 17 00:00:00 2001 From: Pete Nicholls Date: Thu, 26 Dec 2013 14:41:20 +1300 Subject: [PATCH 4/5] Add model to onCallButtonClicked event payload --- converse.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/converse.js b/converse.js index 68262a089..e26a26b1a 100644 --- a/converse.js +++ b/converse.js @@ -1172,7 +1172,8 @@ ev.stopPropagation(); converse.emit('onCallButtonClicked', { - connection: converse.connection + connection: converse.connection, + model: this.model }); }, From 0b4fe330d612356ef41ce8b7146543460f21f751 Mon Sep 17 00:00:00 2001 From: Pete Nicholls Date: Thu, 26 Dec 2013 15:02:28 +1300 Subject: [PATCH 5/5] Document show_call_button option --- docs/CHANGES.rst | 5 +++++ docs/source/index.rst | 22 ++++++++++++++++++++++ 2 files changed, 27 insertions(+) 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 ----------------------