Cleaner separation between minimize/trimming feature and core
One visible effect is that when this component is now removed, minimize buttons are not visible on the chat boxes. updates #622
This commit is contained in:
JC Brand
parent
2cbf20c6db
commit
4c6bd1f49c
|
|
@ -169,7 +169,8 @@ require.config({
|
|||
"toolbar": "src/templates/toolbar",
|
||||
"toolbar_otr": "src/templates/toolbar_otr",
|
||||
"trimmed_chat": "src/templates/trimmed_chat",
|
||||
"vcard": "src/templates/vcard"
|
||||
"vcard": "src/templates/vcard",
|
||||
"chatbox_minimize": "src/templates/chatbox_minimize"
|
||||
},
|
||||
|
||||
map: {
|
||||
|
|
|
|||
|
|
@ -584,7 +584,7 @@
|
|||
it("received for a minimized chat box will increment a counter on its header", function () {
|
||||
var contact_name = mock.cur_names[0];
|
||||
var contact_jid = contact_name.replace(/ /g,'.').toLowerCase() + '@localhost';
|
||||
spyOn(this, 'emit');
|
||||
spyOn(this, 'emit').andCallThrough();
|
||||
test_utils.openChatBoxFor(contact_jid);
|
||||
var chatview = this.chatboxviews.get(contact_jid);
|
||||
expect(chatview.$el.is(':visible')).toBeTruthy();
|
||||
|
|
|
|||
|
|
@ -98,8 +98,6 @@
|
|||
show_textarea: true,
|
||||
title: this.model.get('fullname'),
|
||||
info_close: __('Close this chat box'),
|
||||
// FIXME: leaky-abstraction from converse-minimize
|
||||
info_minimize: __('Minimize this chat box'),
|
||||
label_personal_message: __('Personal message')
|
||||
}
|
||||
)
|
||||
|
|
@ -110,6 +108,7 @@
|
|||
this.renderToolbar().renderAvatar();
|
||||
this.$content.on('scroll', _.debounce(this.onScroll.bind(this), 100));
|
||||
converse.emit('chatBoxOpened', this);
|
||||
converse.emit('chatRoomOpened', this);
|
||||
window.setTimeout(utils.refreshWebkit, 50);
|
||||
return this.showStatusMessage();
|
||||
},
|
||||
|
|
|
|||
|
|
@ -109,11 +109,6 @@
|
|||
return this;
|
||||
},
|
||||
|
||||
getOldestMaximizedChat: function (exclude_ids) {
|
||||
exclude_ids.push('controlbox');
|
||||
return this._super.getOldestMaximizedChat.apply(this, arguments);
|
||||
},
|
||||
|
||||
getChatBoxWidth: function (view) {
|
||||
var controlbox = this.get('controlbox');
|
||||
if (view.model.get('id') === 'controlbox') {
|
||||
|
|
@ -151,13 +146,6 @@
|
|||
insertIntoPage: function () {
|
||||
this.$el.insertAfter(converse.chatboxviews.get("controlbox").$el);
|
||||
return this;
|
||||
},
|
||||
|
||||
maximize: function () {
|
||||
var chatboxviews = converse.chatboxviews;
|
||||
// Restores a minimized chat box
|
||||
this.$el.insertAfter(chatboxviews.get("controlbox").$el).show('fast', this.onMaximized.bind(this));
|
||||
return this;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@
|
|||
define("converse-minimize", [
|
||||
"converse-core",
|
||||
"converse-api",
|
||||
"converse-chatview"
|
||||
"converse-controlbox",
|
||||
"converse-chatview",
|
||||
"converse-muc"
|
||||
], factory);
|
||||
}(this, function (converse, converse_api) {
|
||||
"use strict";
|
||||
|
|
@ -152,9 +154,10 @@
|
|||
},
|
||||
|
||||
maximize: function () {
|
||||
// Restore a minimized chat box
|
||||
$('#conversejs').prepend(this.$el);
|
||||
this.$el.show('fast', this.onMaximized.bind(this));
|
||||
// Restores a minimized chat box
|
||||
var chatboxviews = converse.chatboxviews;
|
||||
this.$el.insertAfter(chatboxviews.get("controlbox").$el)
|
||||
.show('fast', this.onMaximized.bind(this));
|
||||
return this;
|
||||
},
|
||||
|
||||
|
|
@ -165,7 +168,29 @@
|
|||
this.setChatState(converse.INACTIVE).model.minimize();
|
||||
this.$el.hide('fast', this.onMinimized.bind(this));
|
||||
},
|
||||
},
|
||||
|
||||
ChatRoomView: {
|
||||
events: {
|
||||
'click .toggle-chatbox-button': 'minimize',
|
||||
},
|
||||
|
||||
initialize: function () {
|
||||
this.model.on('change:minimized', function (item) {
|
||||
if (item.get('minimized')) {
|
||||
this.hide();
|
||||
} else {
|
||||
this.maximize();
|
||||
}
|
||||
}, this);
|
||||
var result = this._super.initialize.apply(this, arguments);
|
||||
if (this.model.get('minimized')) {
|
||||
this.hide();
|
||||
} else {
|
||||
this.show();
|
||||
}
|
||||
return result;
|
||||
}
|
||||
},
|
||||
|
||||
ChatBoxes: {
|
||||
|
|
@ -244,6 +269,7 @@
|
|||
|
||||
getOldestMaximizedChat: function (exclude_ids) {
|
||||
// Get oldest view (if its id is not excluded)
|
||||
exclude_ids.push('controlbox');
|
||||
var i = 0;
|
||||
var model = this.model.sort().at(i);
|
||||
while (_.contains(exclude_ids, model.get('id')) ||
|
||||
|
|
@ -264,7 +290,6 @@
|
|||
/* The initialize function gets called as soon as the plugin is
|
||||
* loaded by converse.js's plugin machinery.
|
||||
*/
|
||||
|
||||
this.updateSettings({
|
||||
no_trimming: false, // Set to true for phantomjs tests (where browser apparently has no width)
|
||||
});
|
||||
|
|
@ -284,6 +309,9 @@
|
|||
}
|
||||
}, this);
|
||||
this.model.on('change:minimized', this.clearUnreadMessagesCounter, this);
|
||||
// OTR stuff, doesn't require this module to depend on OTR.
|
||||
this.model.on('showReceivedOTRMessage', this.updateUnreadMessagesCounter, this);
|
||||
this.model.on('showSentOTRMessage', this.updateUnreadMessagesCounter, this);
|
||||
},
|
||||
|
||||
render: function () {
|
||||
|
|
@ -457,6 +485,21 @@
|
|||
}
|
||||
});
|
||||
|
||||
var renderMinimizeButton = function (evt, view) {
|
||||
// Inserts a "minimize" button in the chatview's header
|
||||
var $el = view.$el.find('.toggle-chatbox-button');
|
||||
var $new_el = converse.templates.chatbox_minimize(
|
||||
_.extend({info_minimize: __('Minimize this chat box')})
|
||||
);
|
||||
if ($el.length) {
|
||||
$el.replaceWith($new_el);
|
||||
} else {
|
||||
view.$el.find('.close-chatbox-button').after($new_el);
|
||||
}
|
||||
};
|
||||
converse.on('chatBoxOpened', renderMinimizeButton);
|
||||
converse.on('chatRoomOpened', renderMinimizeButton);
|
||||
|
||||
converse.on('controlBoxOpened', function (evt, chatbox) {
|
||||
// Wrapped in anon method because at scan time, chatboxviews
|
||||
// attr not set yet.
|
||||
|
|
|
|||
|
|
@ -169,7 +169,6 @@
|
|||
is_chatroom: true,
|
||||
events: {
|
||||
'click .close-chatbox-button': 'close',
|
||||
'click .toggle-chatbox-button': 'minimize',
|
||||
'click .configure-chatroom-button': 'configureChatRoom',
|
||||
'click .toggle-smiley': 'toggleEmoticonMenu',
|
||||
'click .toggle-smiley ul li': 'insertEmoticon',
|
||||
|
|
@ -185,33 +184,18 @@
|
|||
initialize: function () {
|
||||
$(window).on('resize', _.debounce(this.setDimensions.bind(this), 100));
|
||||
this.model.messages.on('add', this.onMessageAdded, this);
|
||||
this.model.on('change:minimized', function (item) {
|
||||
if (item.get('minimized')) {
|
||||
this.hide();
|
||||
} else {
|
||||
this.maximize();
|
||||
}
|
||||
}, this);
|
||||
|
||||
this.occupantsview = new converse.ChatRoomOccupantsView({
|
||||
model: new converse.ChatRoomOccupants({nick: this.model.get('nick')})
|
||||
});
|
||||
var id = b64_sha1('converse.occupants'+converse.bare_jid+this.model.get('id')+this.model.get('nick'));
|
||||
this.occupantsview.model.browserStorage = new Backbone.BrowserStorage[converse.storage](id);
|
||||
|
||||
this.occupantsview.chatroomview = this;
|
||||
this.render().$el.hide();
|
||||
this.occupantsview.model.fetch({add:true});
|
||||
this.join(null, {'maxstanzas': converse.muc_history_max_stanzas});
|
||||
this.fetchMessages();
|
||||
converse.emit('chatRoomOpened', this);
|
||||
|
||||
this.$el.insertAfter(converse.chatboxviews.get("controlbox").$el);
|
||||
if (this.model.get('minimized')) {
|
||||
this.hide();
|
||||
} else {
|
||||
this.show();
|
||||
}
|
||||
converse.emit('chatRoomOpened', this);
|
||||
},
|
||||
|
||||
render: function () {
|
||||
|
|
|
|||
|
|
@ -13,8 +13,7 @@
|
|||
define("converse-otr", [
|
||||
"otr",
|
||||
"converse-core",
|
||||
"converse-api",
|
||||
"converse-minimize"
|
||||
"converse-api"
|
||||
], factory);
|
||||
}(this, function (otr, converse, converse_api) {
|
||||
"use strict";
|
||||
|
|
@ -458,14 +457,6 @@
|
|||
));
|
||||
return this;
|
||||
}
|
||||
},
|
||||
|
||||
MinimizedChatBoxView: {
|
||||
initialize: function () {
|
||||
this._super.initialize.apply(this, arguments);
|
||||
this.model.on('showReceivedOTRMessage', this.updateUnreadMessagesCounter, this);
|
||||
this.model.on('showSentOTRMessage', this.updateUnreadMessagesCounter, this);
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -52,6 +52,11 @@ define("converse-templates", [
|
|||
"tpl!toolbar_otr",
|
||||
"tpl!trimmed_chat",
|
||||
"tpl!vcard",
|
||||
|
||||
// Can be removed together with converse-minimize.js
|
||||
// if minimization/trimming features not needed (for example for mobile
|
||||
// apps).
|
||||
"tpl!chatbox_minimize",
|
||||
], function () {
|
||||
return {
|
||||
action: arguments[0],
|
||||
|
|
@ -106,6 +111,7 @@ define("converse-templates", [
|
|||
toolbar: arguments[49],
|
||||
toolbar_otr: arguments[50],
|
||||
trimmed_chat: arguments[51],
|
||||
vcard: arguments[52]
|
||||
vcard: arguments[52],
|
||||
chatbox_minimize: arguments[53]
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<div class="dragresize dragresize-left"></div>
|
||||
<div class="chat-head chat-head-chatbox">
|
||||
<a class="chatbox-btn close-chatbox-button icon-close" title="{{info_close}}"></a>
|
||||
<a class="chatbox-btn toggle-chatbox-button icon-minus" title="{{info_minimize}}"></a>
|
||||
<div class="chat-title">
|
||||
{[ if (url) { ]}
|
||||
<a href="{{url}}" target="_blank" rel="noopener" class="user">
|
||||
|
|
|
|||
1
src/templates/chatbox_minimize.html
Normal file
1
src/templates/chatbox_minimize.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<a class="chatbox-btn toggle-chatbox-button icon-minus" title="{{info_minimize}}"></a>
|
||||
|
|
@ -4,7 +4,6 @@
|
|||
<div class="dragresize dragresize-left"></div>
|
||||
<div class="chat-head chat-head-chatroom">
|
||||
<a class="chatbox-btn close-chatbox-button icon-close"></a>
|
||||
<a class="chatbox-btn toggle-chatbox-button icon-minus"></a>
|
||||
<a class="chatbox-btn configure-chatroom-button icon-wrench" style="display:none"></a>
|
||||
<div class="chat-title"> {{ _.escape(name) }} </div>
|
||||
<p class="chatroom-topic"><p/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user