Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Add a new toolbar button to clear chat messages

Browse Source 
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".
This commit is contained in:
JC Brand 2014-04-24 18:03:30 +02:00
parent 242dc3d3d8
commit 9b3601314e
5 changed files with 53 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
converse.css
View File

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

56
converse.js
View File

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

5
index.html
View File

@ -193,13 +193,16 @@
allow_otr: true, allow_otr: true,
auto_list_rooms: false, auto_list_rooms: false,
auto_subscribe: 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 , debug: true ,
hide_muc_server: false, hide_muc_server: false,
i18n: locales['en'], // Refer to ./locale/locales.js to see which locales are supported i18n: locales['en'], // Refer to ./locale/locales.js to see which locales are supported
prebind: false, prebind: false,
show_controlbox_by_default: true, show_controlbox_by_default: true,
xhr_user_search: false, xhr_user_search: false,
visible_toolbar_buttons: {
'clear': false
}
}); });
}); });
</script> </script>

3
mockup/index.html
View File

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

5
src/templates/toolbar.html
View File

@ -18,7 +18,10 @@
</li> </li>
{[ } ]} {[ } ]}
{[ if (show_call_button) { ]} {[ 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) { ]} {[ if (allow_otr) { ]}
<li class="toggle-otr {{otr_status_class}}" title="{{otr_tooltip}}"> <li class="toggle-otr {{otr_status_class}}" title="{{otr_tooltip}}">