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

Chat boxes can now be minimized. Updates #71

Browse Source
This commit is contained in:
JC Brand 2014-01-22 23:50:39 +02:00
parent d2358a6a93
commit d0af974206
3 changed files with 43 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
converse.css
View File

@ -653,7 +653,7 @@ form.search-xmpp-contact input {
}
a.configure-chatroom-button,
a.minimize-chatbox-button,
a.toggle-chatbox-button,
a.close-chatbox-button {
font-size: 10px;
padding: 3px 3px 2px 3px;
@ -677,7 +677,7 @@ a.close-chatbox-button {
}
a.configure-chatroom-button:active,
a.minimize-chatbox-button:active,
a.toggle-chatbox-button:active,
a.close-chatbox-button:active {
position:relative;
top:1px;

38
converse.js
View File

@ -729,6 +729,7 @@
events: {
'click .close-chatbox-button': 'closeChat',
'click .toggle-chatbox-button': 'toggleChat',
'keypress textarea.chat-textarea': 'keyPressed',
'click .toggle-smiley': 'toggleEmoticonMenu',
'click .toggle-smiley ul li': 'insertEmoticon',
@ -1116,6 +1117,32 @@
}
},
saveToggleState: function () {
var flyout = this.$el.find('.box-flyout');
if (flyout.hasClass('minimized')) {
flyout.removeClass('minimized');
this.model.save({'minimized': false});
} else {
flyout.addClass('minimized');
this.model.save({'minimized': true});
}
},
swapToggleIcon: function ($el) {
if ($el.hasClass('icon-minus')) {
$el.removeClass('icon-minus').addClass('icon-plus');
} else {
$el.removeClass('icon-plus').addClass('icon-minus');
}
},
toggleChat: function (ev) {
this.saveToggleState();
this.$el.find('form.sendXMPPMessage').toggle();
this.$el.find('div.chat-content').slideToggle('fast');
this.swapToggleIcon($(ev.target));
},
updateVCard: function () {
var jid = this.model.get('jid'),
rosteritem = converse.roster.get(jid);
@ -1692,14 +1719,21 @@
tagName: 'div',
className: 'chatroom',
events: {
'click a.close-chatbox-button': 'closeChat',
'click a.configure-chatroom-button': 'configureChatRoom',
'click .close-chatbox-button': 'closeChat',
'click .toggle-chatbox-button': 'toggleChat',
'click .configure-chatroom-button': 'configureChatRoom',
'click .toggle-smiley': 'toggleEmoticonMenu',
'click .toggle-smiley ul li': 'insertEmoticon',
'keypress textarea.chat-textarea': 'keyPressed'
},
is_chatroom: true,
toggleChat: function (ev) {
this.saveToggleState();
this.$el.find('div.chat-body').slideToggle('fast');
this.swapToggleIcon($(ev.target));
},
sendChatRoomMessage: function (body) {
var match = body.replace(/^\s*/, "").match(/^\/(.*?)(?: (.*))?$/) || [false],
$chat_content;

12
mockup.html
View File

@ -244,7 +244,7 @@
<div class="dragresize dragresize-tm"></div>
<div class="chat-head chat-head-chatbox">
<a class="close-chatbox-button icon-close"></a>
<a class="minimize-chatbox-button icon-minus"></a>
<a class="toggle-chatbox-button icon-minus"></a>
<a href="http://opkode.com" target="_blank" class="user">
<canvas height="33px" width="33px" class="avatar" style="background-color: black"></canvas>
@ -321,7 +321,7 @@
<div class="dragresize dragresize-tm"></div>
<div class="chat-head chat-head-chatroom">
<a class="close-chatbox-button icon-close"></a>
<a class="minimize-chatbox-button icon-minus"></a>
<a class="toggle-chatbox-button icon-minus"></a>
<a class="configure-chatroom-button icon-wrench" style=""></a>
<div class="chat-title"> Chatroom </div>
@ -396,7 +396,7 @@
<div class="dragresize dragresize-tm"></div>
<div class="chat-head chat-head-chatroom">
<a class="close-chatbox-button icon-close"></a>
<a class="minimize-chatbox-button icon-minus"></a>
<a class="toggle-chatbox-button icon-minus"></a>
<a class="configure-chatroom-button" style="display:none">&nbsp;</a>
<div class="chat-title"> Restricted Chatroom</div>
<p class="chatroom-topic"></p>
@ -477,11 +477,9 @@ $(document).ready(function () {
});
});
$('.minimize-chatbox-button').click(function(ev) {
$('.toggle-chatbox-button').click(function(ev) {
var $grandparent = $(ev.target).parent().parent().parent();
if ($grandparent.attr('id') == 'controlbox') {
$grandparent.find('.controlbox-panes').slideToggle(300);
} else if ($grandparent.attr('class') == 'chatroom') {
if ($grandparent.attr('class') == 'chatroom') {
$grandparent.find('.chat-body').slideToggle(300);
} else {
$grandparent.find('div.chat-content').slideToggle(300);