Render group updates
Not pretty, but it works. Also allows for later localization. Copy/behavior is borrowed from the Android client. Closes #104 Fixes #65
This commit is contained in:
parent
bcff1cf991
commit
d52db8fe6f
6 changed files with 102 additions and 25 deletions
|
@ -155,6 +155,7 @@
|
|||
<script type="text/javascript" src="js/views/notifications.js"></script>
|
||||
<script type="text/javascript" src="js/views/file_input_view.js"></script>
|
||||
<script type="text/javascript" src="js/views/list_view.js"></script>
|
||||
<script type="text/javascript" src="js/views/group_update_view.js"></script>
|
||||
<script type="text/javascript" src="js/views/message_view.js"></script>
|
||||
<script type="text/javascript" src="js/views/message_list_view.js"></script>
|
||||
<script type="text/javascript" src="js/views/conversation_list_item_view.js"></script>
|
||||
|
|
|
@ -138,6 +138,14 @@
|
|||
avatar : pushMessageContent.group.avatar,
|
||||
members : pushMessageContent.group.members,
|
||||
};
|
||||
var group_update = conversation.changedAttributes(_.pick(pushMessageContent.group, 'name', 'avatar'));
|
||||
var difference = _.difference(pushMessageContent.group.members, conversation.get('members'));
|
||||
if (difference.length > 0) {
|
||||
group_update.joined = difference;
|
||||
}
|
||||
if (_.keys(group_update).length > 0) {
|
||||
message.set({group_update: group_update});
|
||||
}
|
||||
}
|
||||
attributes.active_at = now;
|
||||
conversation.set(attributes);
|
||||
|
|
40
js/views/group_update_view.js
Normal file
40
js/views/group_update_view.js
Normal file
|
@ -0,0 +1,40 @@
|
|||
/* vim: ts=4:sw=4:expandtab
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Lesser General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Lesser General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Lesser General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
window.Whisper = window.Whisper || {};
|
||||
|
||||
Whisper.GroupUpdateView = Backbone.View.extend({
|
||||
tagName: "div",
|
||||
className: "group-update",
|
||||
render: function() {
|
||||
//TODO l10n
|
||||
var messages = ['Updated the group.'];
|
||||
if (this.model.name) {
|
||||
messages.push("Title is now '" + this.model.name + "'.");
|
||||
}
|
||||
if (this.model.joined) {
|
||||
messages.push(this.model.joined + ' joined the group');
|
||||
}
|
||||
|
||||
this.$el.text(messages.join(' '));
|
||||
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
})();
|
|
@ -61,7 +61,13 @@
|
|||
initialize: function() {
|
||||
this.$el.addClass(this.model.get('type'));
|
||||
|
||||
this.template = $('#message').html();
|
||||
if (this.model.get('group_update')) {
|
||||
this.group_update_view = new Whisper.GroupUpdateView({
|
||||
model: this.model.get('group_update')
|
||||
}).render();
|
||||
} else {
|
||||
this.template = $('#message').html();
|
||||
}
|
||||
Mustache.parse(this.template);
|
||||
|
||||
this.listenTo(this.model, 'change', this.render); // auto update
|
||||
|
@ -70,32 +76,36 @@
|
|||
},
|
||||
|
||||
render: function() {
|
||||
this.$el.html(
|
||||
Mustache.render(this.template, {
|
||||
message: this.model.get('body'),
|
||||
timestamp: moment(this.model.get('received_at')).fromNow(),
|
||||
bubble_class: this.model.get('type') === 'outgoing' ? 'sent' : 'incoming',
|
||||
sender: this.model.get('source')
|
||||
})
|
||||
);
|
||||
|
||||
this.$el.find('.attachments').append(
|
||||
this.model.get('attachments').map(function(attachment) {
|
||||
return new AttachmentView({model: attachment}).render().el;
|
||||
})
|
||||
);
|
||||
|
||||
if (this.model.get('delivered')) {
|
||||
this.$el.addClass('delivered');
|
||||
}
|
||||
|
||||
var errors = this.model.get('errors');
|
||||
if (errors && errors.length) {
|
||||
this.$el.find('.message').append(
|
||||
errors.map(function(error) {
|
||||
return new ErrorView({model: error}).render().el;
|
||||
if (this.group_update_view) {
|
||||
this.$el.append(this.group_update_view.$el);
|
||||
} else {
|
||||
this.$el.html(
|
||||
Mustache.render(this.template, {
|
||||
message: this.model.get('body'),
|
||||
timestamp: moment(this.model.get('received_at')).fromNow(),
|
||||
bubble_class: this.model.get('type') === 'outgoing' ? 'sent' : 'incoming',
|
||||
sender: this.model.get('source')
|
||||
})
|
||||
);
|
||||
|
||||
this.$el.find('.attachments').append(
|
||||
this.model.get('attachments').map(function(attachment) {
|
||||
return new AttachmentView({model: attachment}).render().el;
|
||||
})
|
||||
);
|
||||
|
||||
if (this.model.get('delivered')) {
|
||||
this.$el.addClass('delivered');
|
||||
}
|
||||
|
||||
var errors = this.model.get('errors');
|
||||
if (errors && errors.length) {
|
||||
this.$el.find('.message').append(
|
||||
errors.map(function(error) {
|
||||
return new ErrorView({model: error}).render().el;
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return this;
|
||||
|
|
|
@ -149,6 +149,7 @@
|
|||
|
||||
<script type="text/javascript" src="../js/views/notifications.js"></script>
|
||||
<script type="text/javascript" src="../js/views/list_view.js" data-cover></script>
|
||||
<script type="text/javascript" src="../js/views/group_update_view.js"></script>
|
||||
<script type="text/javascript" src="../js/views/message_view.js" data-cover></script>
|
||||
<script type="text/javascript" src="../js/views/message_list_view.js" data-cover></script>
|
||||
<script type="text/javascript" src="../js/views/conversation_list_item_view.js" data-cover></script>
|
||||
|
@ -164,6 +165,7 @@
|
|||
<script type="text/javascript" src="nativeclient_test.js"></script>
|
||||
<script type="text/javascript" src="curve25519_compiled_test.js"></script>
|
||||
<script type="text/javascript" src="helpers_test.js"></script>
|
||||
<script type="text/javascript" src="views/group_update_view_test.js"></script>
|
||||
<script type="text/javascript" src="views/message_view_test.js"></script>
|
||||
<script type="text/javascript" src="views/list_view_test.js"></script>
|
||||
<script type="text/javascript" src="views/message_list_view_test.js"></script>
|
||||
|
|
16
test/views/group_update_view_test.js
Normal file
16
test/views/group_update_view_test.js
Normal file
|
@ -0,0 +1,16 @@
|
|||
describe('GroupUpdateView', function() {
|
||||
it('should show new group members', function() {
|
||||
var view = new Whisper.GroupUpdateView({model: {joined: ['Alice', 'Bob']}}).render();
|
||||
assert.match(view.$el.text(), /Alice.*Bob.*joined the group/);
|
||||
});
|
||||
|
||||
it('should note updates to the title', function() {
|
||||
var view = new Whisper.GroupUpdateView({model: {name: 'New name'}}).render();
|
||||
assert.match(view.$el.text(), /Title is now 'New name'/);
|
||||
});
|
||||
|
||||
it('should say "Updated the group"', function() {
|
||||
var view = new Whisper.GroupUpdateView({model: {avatar: 'New avatar'}}).render();
|
||||
assert.match(view.$el.text(), /Updated the group/);
|
||||
});
|
||||
});
|
Loading…
Reference in a new issue