Add a new toolbar button to clear chat messages

Configuration options have changed a bit.

show_emoticons and show_call_button are now removed. Instead the toolbar is
configured via a new config option: "visible_toolbar_buttons".

converse.css

@@ -1208,21 +1208,14 @@ select#select-xmpp-status {
     height: 20px;
     display: block;
     width: 195px;
-    /* XXX:  CHECKME */
-    float: right;
-    display: inline-block;
-    height: 20px;
 }
 
+#conversejs .chat-toolbar .toggle-clear,
 #conversejs .chat-toolbar .toggle-otr {
     float: right;
 }
 
-#conversejs .chat-toolbar .toggle-call {
-	color: rgb(79, 79, 79);
-}
-
-#conversejs .chat-toolbar ul li a {
+#conversejs .chat-toolbar a {
 	color: rgb(79, 79, 79);
 }
 

converse.js

@@ -56,7 +56,7 @@
     };
 
     $.fn.addEmoticons = function() {
-        if (converse.show_emoticons) {
+        if (converse.visible_toolbar_buttons['emoticons']) {
             if (this.length > 0) {
                 this.each(function(i, obj) {
                     var text = $(obj).html();
@@ -161,11 +161,14 @@
         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_otr_by_default = false;
         this.use_vcards = true;
+        this.visible_toolbar_buttons = {
+            'emoticons': true,
+            'call': false,
+            'clear': true
+        };
         this.xhr_custom_status = false;
         this.xhr_custom_status_url = '';
         this.xhr_user_search = false;
@@ -195,9 +198,7 @@
             'jid',
             'prebind',
             'rid',
-            'show_call_button',
             'show_controlbox_by_default',
-            'show_emoticons',
             'show_only_online_users',
             'show_toolbar',
             'sid',
@@ -208,6 +209,12 @@
             'xhr_user_search',
             'xhr_user_search_url'
         ]));
+        _.extend(
+            this.visible_toolbar_buttons,
+            _.pick(settings.visible_toolbar_buttons, [
+                'emoticons', 'call', 'clear'
+            ]
+        ));
         $.fx.off = !this.animate;
 
         // Only allow OTR if we have the capability
@@ -896,6 +903,7 @@
                 'keypress textarea.chat-textarea': 'keyPressed',
                 'click .toggle-smiley': 'toggleEmoticonMenu',
                 'click .toggle-smiley ul li': 'insertEmoticon',
+                'click .toggle-clear': 'clearMessages',
                 'click .toggle-otr': 'toggleOTRMenu',
                 'click .start-otr': 'startOTRFromToolbar',
                 'click .end-otr': 'endOTR',
@@ -933,8 +941,7 @@
 
             render: function () {
                 this.$el.attr('id', this.model.get('box_id'))
-                    .html(
-                        converse.templates.chatbox(
+                    .html(converse.templates.chatbox(
                             _.extend(this.model.toJSON(), {
                                     show_toolbar: converse.show_toolbar,
                                     label_personal_message: __('Personal message')
@@ -976,6 +983,15 @@
                 return this;
             },
 
+            clearChatRoomMessages: function (ev) {
+                ev.stopPropagation();
+                var result = confirm(__("Are you sure you want to clear the messages from this room?"));
+                if (result === true) {
+                    this.$el.find('.chat-content').empty();
+                }
+                return this;
+            },
+
             showMessage: function (msg_dict) {
                 var $content = this.$el.find('.chat-content'),
                     iso_time = msg_dict.time || converse.toISOString(new Date()),
@@ -1080,10 +1096,7 @@
                 var match = text.replace(/^\s*/, "").match(/^\/(.*)\s*$/), msgs;
                 if (match) {
                     if (match[1] === "clear") {
-                        this.$el.find('.chat-content').empty();
-                        this.model.messages.reset();
-                        this.model.messages.localStorage._clear();
-                        return;
+                        return this.clearMessages();
                     }
                     else if (match[1] === "help") {
                         msgs = [
@@ -1171,6 +1184,17 @@
                 this.setChatBoxHeight(this.height);
             },
 
+            clearMessages: function (ev) {
+                ev.stopPropagation();
+                var result = confirm(__("Are you sure you want to clear the messages from this chat box?"));
+                if (result === true) {
+                    this.$el.find('.chat-content').empty();
+                    this.model.messages.reset();
+                    this.model.messages.localStorage._clear();
+                }
+                return this;
+            },
+
             insertEmoticon: function (ev) {
                 ev.stopPropagation();
                 this.$el.find('.toggle-smiley ul').slideToggle(200);
@@ -1408,8 +1432,9 @@
                                 label_whats_this: __("What\'s this?"),
                                 otr_status_class: OTR_CLASS_MAPPING[data.otr_status],
                                 otr_translated_status: OTR_TRANSLATED_MAPPING[data.otr_status],
-                                show_call_button: converse.show_call_button,
-                                show_emoticons: converse.show_emoticons
+                                show_call_button: converse.visible_toolbar_buttons['call'],
+                                show_clear_button: converse.visible_toolbar_buttons['clear'],
+                                show_emoticons: converse.visible_toolbar_buttons['emoticons']
                             })
                         )
                     );
@@ -1900,6 +1925,7 @@
                 'click .configure-chatroom-button': 'configureChatRoom',
                 'click .toggle-smiley': 'toggleEmoticonMenu',
                 'click .toggle-smiley ul li': 'insertEmoticon',
+                'click .toggle-clear': 'clearChatRoomMessages',
                 'keypress textarea.chat-textarea': 'keyPressed',
                 'mousedown .dragresize-tm': 'onDragResizeStart'
             },
@@ -1936,7 +1962,7 @@
                         // TODO: Private messages
                         break;
                     case 'clear':
-                        this.$el.find('.chat-content').empty();
+                        this.clearChatRoomMessages();
                         break;
                     case 'topic':
                         converse.connection.muc.setTopic(this.model.get('jid'), match[2]);
@@ -2568,7 +2594,7 @@
 
             removeContact: function (ev) {
                 ev.preventDefault();
-                var result = confirm("Are you sure you want to remove this contact?");
+                var result = confirm(__("Are you sure you want to remove this contact?"));
                 if (result === true) {
                     var bare_jid = this.model.get('jid');
                     converse.connection.roster.remove(bare_jid, function (iq) {

index.html

@@ -193,13 +193,16 @@
             allow_otr: true,
             auto_list_rooms: false,
             auto_subscribe: false,
-            bosh_service_url: 'https://bind.conversejs.org', // Please use this connection manager only for testing purposes
+            bosh_service_url: 'http://devbox:5280/http-bind', // Please use this connection manager only for testing purposes
             debug: true ,
             hide_muc_server: false,
             i18n: locales['en'], // Refer to ./locale/locales.js to see which locales are supported
             prebind: false,
             show_controlbox_by_default: true,
             xhr_user_search: false,
+            visible_toolbar_buttons: {
+                'clear': false
+            }
         });
     });
 </script>

mockup/index.html

@@ -7,7 +7,7 @@
     <meta name="description" content="Converse.js: Chat Client for Websites" />
     <link type="text/css" rel="stylesheet" href="../stylesheets/stylesheet.css">
     <link type="text/css" rel="stylesheet" href="../converse.css">
-    <script src="../components/jquery/jquery.min.js"></script>
+    <script src="../components/jquery/dist/jquery.min.js"></script>
 </head>
 <body>
 <!-- HEADER -->
@@ -257,6 +257,7 @@
                                 <li><a class="icon-heart" href="#" data-emoticon="<3"></a></li>
                             </ul>
                         </li>
+                        <li class="toggle-clear"><a class="icon-remove" title="Clear all messages"></a></li>
                         <li class="toggle-otr unencrypted" title="Turn on 'off-the-record' chat encryption">
                             <span class="chat-toolbar-text">unencrypted</span>
                             <span class="icon-unlocked"></span>

src/templates/toolbar.html

@@ -18,7 +18,10 @@
     </li>
 {[ } ]}
 {[ if (show_call_button)  { ]}
-    <li><a class="toggle-call icon-phone" title="Start a call"></a></li>
+    <li class="toggle-call"><a class="icon-phone" title="Start a call"></a></li>
+{[ } ]}
+{[ if (show_clear_button)  { ]}
+    <li class="toggle-clear"><a class="icon-remove" title="Clear all messages"></a></li>
 {[ } ]}
 {[ if (allow_otr)  { ]}
     <li class="toggle-otr {{otr_status_class}}" title="{{otr_tooltip}}">