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".
2014-04-24 18:03:30 +02:00 · 2014-04-24 18:03:30 +02:00 · 9b3601314e
commit 9b3601314e
parent 242dc3d3d8
5 changed files with 53 additions and 27 deletions
--- a/converse.css
+++ b/converse.css
@ -1208,24 +1208,17 @@ 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 {
+#conversejs .chat-toolbar a {
 	color: rgb(79, 79, 79);
 }

-#conversejs .chat-toolbar ul li a {
-    color: rgb(79, 79, 79);
-}
-
 #conversejs .chat-toolbar ul li a:hover {
    color: #8f2831;
 }
--- a/converse.js
+++ b/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) {
--- a/index.html
+++ b/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>
--- a/mockup/index.html
+++ b/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>
--- a/src/templates/toolbar.html
+++ b/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}}">