Skip to content

C
converse.js
Commit ad51e1c0 authored by JC Brand's avatar JC Brand
Browse files
Options

More working on trimming chats. (still very buggy) 

More flesh on the view and superview for trimmed chats.
Add event handlers.
Renamed some methods to make them shorter, more consistent.
parent 2d237f9e
Hide whitespace changes
Inline Side-by-side
Showing with 75 additions and 50 deletions
converse.js
View file @ ad51e1c0
...@@ -668,14 +668,16 @@ ...@@ -668,14 +668,16 @@
*/ */
var attrs; var attrs;
// Handle both `"key", value` and `{key: value}` -style arguments. // Handle both `"key", value` and `{key: value}` -style arguments.
if (key == null || typeof key === 'object') { if (key === null || typeof key === 'object') {
attrs = key; attrs = key;
options = val; options = val;
} else { } else {
(attrs = {})[key] = val; (attrs = {})[key] = val;
} }
if (typeof attrs === 'object' && attrs.trimmed) { if (typeof attrs === 'object' && attrs !== null) {
delete attrs.trimmed; if (attrs.trimmed) {
delete attrs.trimmed;
}
} }
Backbone.Model.prototype.save.call(this, attrs, options); Backbone.Model.prototype.save.call(this, attrs, options);
}, },
...@@ -881,7 +883,7 @@ ...@@ -881,7 +883,7 @@
is_chatroom: false, // This is not a multi-user chatroom is_chatroom: false, // This is not a multi-user chatroom
events: { events: {
'click .close-chatbox-button': 'closeChat', 'click .close-chatbox-button': 'close',
'click .toggle-chatbox-button': 'toggleChatBox', 'click .toggle-chatbox-button': 'toggleChatBox',
'keypress textarea.chat-textarea': 'keyPressed', 'keypress textarea.chat-textarea': 'keyPressed',
'click .toggle-smiley': 'toggleEmoticonMenu', 'click .toggle-smiley': 'toggleEmoticonMenu',
...@@ -1303,6 +1305,9 @@ ...@@ -1303,6 +1305,9 @@
if (_.has(item.changed, 'otr_status')) { if (_.has(item.changed, 'otr_status')) {
this.renderToolbar().informOTRChange(); this.renderToolbar().informOTRChange();
} }
if (_.has(item.changed, 'trimmed')) {
this.trim();
}
// TODO check for changed fullname as well // TODO check for changed fullname as well
}, },
...@@ -1310,7 +1315,7 @@ ...@@ -1310,7 +1315,7 @@
this.$el.find('p.user-custom-message').text(msg).attr('title', msg); this.$el.find('p.user-custom-message').text(msg).attr('title', msg);
}, },
closeChat: function () { close: function () {
if (converse.connection) { if (converse.connection) {
this.model.destroy(); this.model.destroy();
} else { } else {
...@@ -1319,12 +1324,8 @@ ...@@ -1319,12 +1324,8 @@
return this; return this;
}, },
trimChat: function () { trim: function () {
// TODO: Instead of closing the chat, we should add it to this.$el.hide();
// div#offscreen-chatboxes
this.model.set('trimmed', true);
this.$el.hide(); // Hide it immediately to avoid flashes on the screen
this.closeChat();
}, },
saveToggleState: function () { saveToggleState: function () {
...@@ -1786,7 +1787,7 @@ ...@@ -1786,7 +1787,7 @@
} }
} }
if (!nick) { return; } if (!nick) { return; }
chatroom = converse.chatboxviews.showChatBox({ chatroom = converse.chatboxviews.showChat({
'id': jid, 'id': jid,
'jid': jid, 'jid': jid,
'name': Strophe.unescapeNode(Strophe.getNodeFromJid(jid)), 'name': Strophe.unescapeNode(Strophe.getNodeFromJid(jid)),
...@@ -1805,7 +1806,7 @@ ...@@ -1805,7 +1806,7 @@
className: 'chatbox', className: 'chatbox',
id: 'controlbox', id: 'controlbox',
events: { events: {
'click a.close-chatbox-button': 'closeChat', 'click a.close-chatbox-button': 'close',
'click ul#controlbox-tabs li a': 'switchTab', 'click ul#controlbox-tabs li a': 'switchTab',
'mousedown .dragresize-tm': 'onDragResizeStart' 'mousedown .dragresize-tm': 'onDragResizeStart'
}, },
...@@ -1909,7 +1910,7 @@ ...@@ -1909,7 +1910,7 @@
tagName: 'div', tagName: 'div',
className: 'chatroom', className: 'chatroom',
events: { events: {
'click .close-chatbox-button': 'closeChat', 'click .close-chatbox-button': 'close',
'click .toggle-chatbox-button': 'toggleChatBox', 'click .toggle-chatbox-button': 'toggleChatBox',
'click .configure-chatroom-button': 'configureChatRoom', 'click .configure-chatroom-button': 'configureChatRoom',
'click .toggle-smiley': 'toggleEmoticonMenu', 'click .toggle-smiley': 'toggleEmoticonMenu',
...@@ -2406,7 +2407,7 @@ ...@@ -2406,7 +2407,7 @@
this.ChatBoxes = Backbone.Collection.extend({ this.ChatBoxes = Backbone.Collection.extend({
model: converse.ChatBox, model: converse.ChatBox,
comparator : 'time_opened', comparator: 'time_opened',
registerMessageHandler: function () { registerMessageHandler: function () {
converse.connection.addHandler( converse.connection.addHandler(
...@@ -2525,7 +2526,7 @@ ...@@ -2525,7 +2526,7 @@
view.model = item; view.model = item;
view.initialize(); view.initialize();
} }
this.trimOpenChats(view); this.trimChats(view);
}, this); }, this);
}, },
...@@ -2549,13 +2550,14 @@ ...@@ -2549,13 +2550,14 @@
} }
}, },
trimOpenChats: function (view) { trimChats: function (view) {
/* This method is called before a new chat box will be opened. /* This method is called before a new chat box will be opened.
* *
* Check whether there is enough space in the page to show * Check whether there is enough space in the page to show
* another chat box. Otherwise, close the oldest chat box. * another chat box. Otherwise, close the oldest chat box.
*/ */
var toggle_width = 0, var toggle_width = 0,
trimmed_chats_width,
boxes_width = view.$el.outerWidth(true), boxes_width = view.$el.outerWidth(true),
controlbox = this.get('controlbox'); controlbox = this.get('controlbox');
if (!controlbox || !controlbox.$el.is(':visible')) { if (!controlbox || !controlbox.$el.is(':visible')) {
...@@ -2570,13 +2572,24 @@ ...@@ -2570,13 +2572,24 @@
if (this.model.length <= 1) { if (this.model.length <= 1) {
return; return;
} }
if ((boxes_width + toggle_width) > this.$el.width()) { trimmed_chats_width = this.trimmed_chatboxes_view.$('.box-flyout').outerWidth(true) || 0;
// trim oldest view (which is not controlbox) if ((trimmed_chats_width + boxes_width + toggle_width) > this.$el.width()) {
this.get(this.model.at(1).get('id')).trimChat(); this.getOldestNonTrimmedChat().set('trimmed', true);
} }
}, },
showChatBox: function (attrs) { getOldestNonTrimmedChat: function () {
// Get oldest view (which is not controlbox)
var i = 0;
var model = this.model.at(i);
while (model.get('id') === 'controlbox' || model.get('trimmed') === true) {
i++;
model = this.model.at(i);
}
return model;
},
showChat: function (attrs) {
var chatbox = this.model.get(attrs.jid); var chatbox = this.model.get(attrs.jid);
if (chatbox) { if (chatbox) {
chatbox.trigger('show'); chatbox.trigger('show');
...@@ -2592,22 +2605,32 @@ ...@@ -2592,22 +2605,32 @@
}); });
this.TrimmedChatBoxView = Backbone.View.extend({ this.TrimmedChatBoxView = Backbone.View.extend({
tagName: 'div',
className: 'chat-head',
events: {
'click .close-chatbox-button': 'close',
'click .restore-chat': 'restore'
},
render: function () { render: function () {
return this.$el; return this.$el.addClass('chat-head-chatbox').html(
converse.templates.trimmed_chat(this.model.toJSON()));
}, },
_ensureElement: function() { close: function (ev) {
/* Override method from backbone.js ev.preventDefault();
* Make sure that the el and $el attributes point to a DOM snippet this.$el.remove();
* from src/templates/trimmed_chat.html this.model.destroy();
*/ return this;
if (!this.el) {
var $el = $(converse.templates.trimmed_chat());
this.setElement($el, false);
} else {
this.setElement(_.result(this, 'el'), false);
}
}, },
restore: function (ev) {
ev.preventDefault();
this.model.set('trimmed', false);
this.$el.remove();
return this;
}
}); });
this.TrimmedChatBoxesView = Backbone.View.extend({ this.TrimmedChatBoxesView = Backbone.View.extend({
...@@ -2628,7 +2651,7 @@ ...@@ -2628,7 +2651,7 @@
var view; var view;
if (item.get('trimmed')) { if (item.get('trimmed')) {
view = new converse.TrimmedChatBoxView({model: item}); view = new converse.TrimmedChatBoxView({model: item});
this.$el.append(view.render()); this.$('.box-flyout').append(view.render());
views[item.get('id')] = view; views[item.get('id')] = view;
} else { } else {
this.remove(item.get('id')); this.remove(item.get('id'));
...@@ -2684,7 +2707,7 @@ ...@@ -2684,7 +2707,7 @@
openChat: function (ev) { openChat: function (ev) {
ev.preventDefault(); ev.preventDefault();
return converse.chatboxviews.showChatBox({ return converse.chatboxviews.showChat({
'id': this.model.get('jid'), 'id': this.model.get('jid'),
'jid': this.model.get('jid'), 'jid': this.model.get('jid'),
'fullname': this.model.get('fullname'), 'fullname': this.model.get('fullname'),
......
spec/chatbox.js
View file @ ad51e1c0
...@@ -104,8 +104,8 @@ ...@@ -104,8 +104,8 @@
var chatbox = utils.openChatBoxes(1)[0], var chatbox = utils.openChatBoxes(1)[0],
controlview = this.chatboxviews.get('controlbox'), // The controlbox is currently open controlview = this.chatboxviews.get('controlbox'), // The controlbox is currently open
chatview = this.chatboxviews.get(chatbox.get('jid')); chatview = this.chatboxviews.get(chatbox.get('jid'));
spyOn(chatview, 'closeChat').andCallThrough(); spyOn(chatview, 'close').andCallThrough();
spyOn(controlview, 'closeChat').andCallThrough(); spyOn(controlview, 'close').andCallThrough();
spyOn(converse, 'emit'); spyOn(converse, 'emit');
// We need to rebind all events otherwise our spy won't be called // We need to rebind all events otherwise our spy won't be called
...@@ -117,14 +117,14 @@ ...@@ -117,14 +117,14 @@
}); });
waits(250); waits(250);
runs(function () { runs(function () {
expect(controlview.closeChat).toHaveBeenCalled(); expect(controlview.close).toHaveBeenCalled();
expect(converse.emit).toHaveBeenCalledWith('onChatBoxClosed', jasmine.any(Object)); expect(converse.emit).toHaveBeenCalledWith('onChatBoxClosed', jasmine.any(Object));
expect(converse.emit.callCount, 1); expect(converse.emit.callCount, 1);
chatview.$el.find('.close-chatbox-button').click(); chatview.$el.find('.close-chatbox-button').click();
}); });
waits(250); waits(250);
runs(function () { runs(function () {
expect(chatview.closeChat).toHaveBeenCalled(); expect(chatview.close).toHaveBeenCalled();
expect(converse.emit).toHaveBeenCalledWith('onChatBoxClosed', jasmine.any(Object)); expect(converse.emit).toHaveBeenCalledWith('onChatBoxClosed', jasmine.any(Object));
expect(converse.emit.callCount, 2); expect(converse.emit.callCount, 2);
}); });
...@@ -303,7 +303,7 @@ ...@@ -303,7 +303,7 @@
$toolbar = view.$el.find('ul.chat-toolbar'); $toolbar = view.$el.find('ul.chat-toolbar');
callButton = $toolbar.find('.toggle-call'); callButton = $toolbar.find('.toggle-call');
expect(callButton.length).toBe(0); expect(callButton.length).toBe(0);
view.closeChat(); view.close();
// Now check that it's shown if enabled and that it emits // Now check that it's shown if enabled and that it emits
// onCallButtonClicked // onCallButtonClicked
converse.visible_toolbar_buttons.call = true; // enable the button converse.visible_toolbar_buttons.call = true; // enable the button
...@@ -328,7 +328,7 @@ ...@@ -328,7 +328,7 @@
$toolbar = view.$el.find('ul.chat-toolbar'); $toolbar = view.$el.find('ul.chat-toolbar');
clearButton = $toolbar.find('.toggle-clear'); clearButton = $toolbar.find('.toggle-clear');
expect(clearButton.length).toBe(0); expect(clearButton.length).toBe(0);
view.closeChat(); view.close();
// Now check that it's shown if enabled and that it calls // Now check that it's shown if enabled and that it calls
// clearMessages // clearMessages
converse.visible_toolbar_buttons.clear = true; // enable the button converse.visible_toolbar_buttons.clear = true; // enable the button
......
spec/chatroom.js
View file @ ad51e1c0
...@@ -174,7 +174,7 @@ ...@@ -174,7 +174,7 @@
it("can be closed again by clicking a DOM element with class 'close-chatbox-button'", $.proxy(function () { it("can be closed again by clicking a DOM element with class 'close-chatbox-button'", $.proxy(function () {
var view = this.chatboxviews.get('lounge@muc.localhost'), chatroom = view.model, $el; var view = this.chatboxviews.get('lounge@muc.localhost'), chatroom = view.model, $el;
spyOn(view, 'closeChat').andCallThrough(); spyOn(view, 'close').andCallThrough();
spyOn(converse, 'emit'); spyOn(converse, 'emit');
spyOn(converse.connection.muc, 'leave'); spyOn(converse.connection.muc, 'leave');
view.delegateEvents(); // We need to rebind all events otherwise our spy won't be called view.delegateEvents(); // We need to rebind all events otherwise our spy won't be called
...@@ -183,7 +183,7 @@ ...@@ -183,7 +183,7 @@
}); });
waits(250); waits(250);
runs(function () { runs(function () {
expect(view.closeChat).toHaveBeenCalled(); expect(view.close).toHaveBeenCalled();
expect(this.connection.muc.leave).toHaveBeenCalled(); expect(this.connection.muc.leave).toHaveBeenCalled();
expect(this.emit).toHaveBeenCalledWith('onChatBoxClosed', jasmine.any(Object)); expect(this.emit).toHaveBeenCalledWith('onChatBoxClosed', jasmine.any(Object));
}.bind(converse)); }.bind(converse));
...@@ -204,7 +204,7 @@ ...@@ -204,7 +204,7 @@
afterEach($.proxy(function () { afterEach($.proxy(function () {
var view = this.chatboxviews.get('problematic@muc.localhost'); var view = this.chatboxviews.get('problematic@muc.localhost');
view.closeChat(); view.close();
}, converse)); }, converse));
it("will show an error message if the room requires a password", $.proxy(function () { it("will show an error message if the room requires a password", $.proxy(function () {
......
src/templates/trimmed_chat.html
View file @ ad51e1c0
<div class="chat-head"> <a class="close-chatbox-button icon-close"></a>
<a class="close-chatbox-button icon-close"></a> <div class="chat-title">
<div class="chat-title">JC Brand</div> <a href="#" class="restore-chat">
{{ fullname }}
</a>
</div> </div>
tests/utils.js
View file @ ad51e1c0
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
var i, chatbox; var i, chatbox;
for (i=converse.chatboxes.models.length-1; i>-1; i--) { for (i=converse.chatboxes.models.length-1; i>-1; i--) {
chatbox = converse.chatboxes.models[i]; chatbox = converse.chatboxes.models[i];
converse.chatboxviews.get(chatbox.get('id')).closeChat(); converse.chatboxviews.get(chatbox.get('id')).close();
} }
return this; return this;
}; };
...@@ -22,10 +22,10 @@ ...@@ -22,10 +22,10 @@
var i, chatbox, num_chatboxes = converse.chatboxes.models.length; var i, chatbox, num_chatboxes = converse.chatboxes.models.length;
for (i=num_chatboxes-1; i>-1; i--) { for (i=num_chatboxes-1; i>-1; i--) {
chatbox = converse.chatboxes.models[i]; chatbox = converse.chatboxes.models[i];
converse.chatboxviews.get(chatbox.get('id')).closeChat(); converse.chatboxviews.get(chatbox.get('id')).close();
converse.chatboxviews.get(chatbox.get('id')).$el.remove(); converse.chatboxviews.get(chatbox.get('id')).$el.remove();
} }
converse.chatboxviews.get('controlbox').closeChat(); converse.chatboxviews.get('controlbox').close();
converse.chatboxviews.get('controlbox').$el.remove(); converse.chatboxviews.get('controlbox').$el.remove();
return this; return this;
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7