Clean up older views, mostly whitespace

pull/749/head
lilia 10 years ago
parent 44a31f3ed9
commit f89cf890df

@ -14,52 +14,51 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
var Whisper = Whisper || {};
(function () { (function () {
'use strict'; 'use strict';
var Whisper = Whisper || {};
// list of conversations, showing user/group and last message sent // list of conversations, showing user/group and last message sent
Whisper.ConversationListItemView = Whisper.View.extend({ Whisper.ConversationListItemView = Whisper.View.extend({
tagName: 'div', tagName: 'div',
className: 'contact', className: 'contact',
template: $('#contact').html(),
events: {
'click': 'select'
},
initialize: function() {
this.listenTo(this.model, 'change', this.render); // auto update
this.listenTo(this.model, 'destroy', this.remove); // auto update
},
events: { select: function(e) {
'click': 'select' this.$el.addClass('selected');
}, this.$el.trigger('select', {modelId: this.model.id});
template: $('#contact').html(), },
initialize: function() {
this.listenTo(this.model, 'change', this.render); // auto update
this.listenTo(this.model, 'destroy', this.remove); // auto update
},
select: function(e) { render: function() {
this.$el.addClass('selected'); this.$el.html(
this.$el.trigger('select', {modelId: this.model.id}); Mustache.render(this.template, {
}, contact_name: this.model.getTitle(),
last_message: this.model.get('lastMessage'),
last_message_timestamp: moment(this.model.get('timestamp')).format('MMM D'),
number: this.model.getNumber()
})
);
if (this.model.get('avatar')) {
this.$el.find('.avatar').append(
new Whisper.AttachmentView({model: this.model.get('avatar')}).render().el
);
}
else {
this.$el.find('.avatar').append(
$('<img>').attr('src', '/images/default.png')
);
}
render: function() { return this;
this.$el.html( }
Mustache.render(this.template, {
contact_name: this.model.getTitle(),
last_message: this.model.get('lastMessage'),
last_message_timestamp: moment(this.model.get('timestamp')).format('MMM D'),
number: this.model.getNumber()
})
);
if (this.model.get('avatar')) {
this.$el.find('.avatar').append(
new Whisper.AttachmentView({model: this.model.get('avatar')}).render().el
);
}
else {
this.$el.find('.avatar').append(
$('<img>').attr('src', '/images/default.png')
);
}
return this; });
}
});
})(); })();

@ -13,248 +13,248 @@
* You should have received a copy of the GNU Lesser General Public License * 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/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
var Whisper = Whisper || {};
(function () { (function () {
'use strict'; 'use strict';
var Whisper = Whisper || {};
var ContactsTypeahead = Backbone.TypeaheadCollection.extend({ var ContactsTypeahead = Backbone.TypeaheadCollection.extend({
typeaheadAttributes: [ typeaheadAttributes: [
'name', 'name',
'e164_number', 'e164_number',
'national_number', 'national_number',
'international_number' 'international_number'
], ],
database: Whisper.Database, database: Whisper.Database,
storeName: 'conversations', storeName: 'conversations',
model: Whisper.Conversation model: Whisper.Conversation
}); });
Whisper.ContactPillView = Whisper.View.extend({ Whisper.ContactPillView = Whisper.View.extend({
tagName: 'span', tagName: 'span',
className: 'recipient', className: 'recipient',
events: { events: {
'click .remove': 'removeModel' 'click .remove': 'removeModel'
}, },
template: $('#contact_pill').html(), template: $('#contact_pill').html(),
initialize: function() { initialize: function() {
var error = this.model.validate(this.model.attributes); var error = this.model.validate(this.model.attributes);
if (error) { if (error) {
this.$el.addClass('error'); this.$el.addClass('error');
} }
}, },
removeModel: function() { removeModel: function() {
this.$el.trigger('remove', {modelId: this.model.id}); this.$el.trigger('remove', {modelId: this.model.id});
this.remove(); this.remove();
}, },
attributes: function() { attributes: function() {
return { name: this.model.getTitle() }; return { name: this.model.getTitle() };
} }
}); });
Whisper.RecipientListView = Whisper.ListView.extend({ Whisper.RecipientListView = Whisper.ListView.extend({
itemView: Whisper.ContactPillView itemView: Whisper.ContactPillView
}); });
Whisper.NewConversationView = Whisper.View.extend({ Whisper.NewConversationView = Whisper.View.extend({
className: 'new-conversation', className: 'new-conversation',
template: $('#new-conversation').html(), template: $('#new-conversation').html(),
initialize: function() { initialize: function() {
this.render(); this.render();
this.$group_update = this.$el.find('.new-group-update-form'); this.$group_update = this.$el.find('.new-group-update-form');
this.$buttons = this.$el.find('.buttons'); this.$buttons = this.$el.find('.buttons');
this.$input = this.$el.find('input.new-message'); this.$input = this.$el.find('input.new-message');
this.$new_contact = this.$el.find('.new-contact'); this.$new_contact = this.$el.find('.new-contact');
// Collection of contacts to match user input against // Collection of contacts to match user input against
this.typeahead = new ContactsTypeahead(); this.typeahead = new ContactsTypeahead();
this.typeahead.fetch({ conditions: { type: 'private' } }); this.typeahead.fetch({ conditions: { type: 'private' } });
// View to display the matched contacts from typeahead // View to display the matched contacts from typeahead
this.typeahead_view = new Whisper.ConversationListView({ this.typeahead_view = new Whisper.ConversationListView({
collection : new Whisper.ConversationCollection([], { collection : new Whisper.ConversationCollection([], {
comparator: function(m) { return m.getTitle(); } comparator: function(m) { return m.getTitle(); }
}) })
}); });
this.$el.find('.contacts').append(this.typeahead_view.el); this.$el.find('.contacts').append(this.typeahead_view.el);
this.initNewContact(); this.initNewContact();
// Group avatar file input // Group avatar file input
this.avatarInput = new Whisper.FileInputView({ this.avatarInput = new Whisper.FileInputView({
el: this.$el.find('.group-avatar') el: this.$el.find('.group-avatar')
}); });
// Collection of recipients selected for the new message // Collection of recipients selected for the new message
this.recipients = new Whisper.ConversationCollection([], { this.recipients = new Whisper.ConversationCollection([], {
comparator: false comparator: false
}); });
// View to display the selected recipients // View to display the selected recipients
this.recipients_view = new Whisper.RecipientListView({ this.recipients_view = new Whisper.RecipientListView({
collection: this.recipients, collection: this.recipients,
el: this.$el.find('.recipients') el: this.$el.find('.recipients')
}); });
}, },
events: { events: {
'change input.new-message': 'filterContacts', 'change input.new-message': 'filterContacts',
'keyup input.new-message': 'filterContacts', 'keyup input.new-message': 'filterContacts',
'select .new-contact': 'addNewRecipient', 'select .new-contact': 'addNewRecipient',
'select .contacts': 'addRecipient', 'select .contacts': 'addRecipient',
'remove .recipient': 'removeRecipient', 'remove .recipient': 'removeRecipient',
'click .create': 'create' 'click .create': 'create'
}, },
initNewContact: function() { initNewContact: function() {
if (this.new_contact) { if (this.new_contact) {
this.new_contact.undelegateEvents(); this.new_contact.undelegateEvents();
this.new_contact.$el.hide(); this.new_contact.$el.hide();
} }
// Creates a view to display a new contact // Creates a view to display a new contact
this.new_contact = new Whisper.ConversationListItemView({ this.new_contact = new Whisper.ConversationListItemView({
el: this.$new_contact, el: this.$new_contact,
model: new Whisper.Conversation({ model: new Whisper.Conversation({
active_at: null, active_at: null,
type: 'private', type: 'private',
newContact: true newContact: true
}) })
}).render(); }).render();
}, },
addNewRecipient: function(e, data) { addNewRecipient: function(e, data) {
this.recipients.add(this.new_contact.model); this.recipients.add(this.new_contact.model);
this.initNewContact(); this.initNewContact();
this.resetTypeahead(); this.resetTypeahead();
this.updateControls(); this.updateControls();
}, },
addRecipient: function(e, data) { addRecipient: function(e, data) {
this.recipients.add(this.typeahead.remove(data.modelId)); this.recipients.add(this.typeahead.remove(data.modelId));
this.filterContacts(); this.filterContacts();
this.updateControls(); this.updateControls();
}, },
removeRecipient: function(e, data) { removeRecipient: function(e, data) {
var model = this.recipients.remove(data.modelId); var model = this.recipients.remove(data.modelId);
if (!model.get('newContact')) { if (!model.get('newContact')) {
this.typeahead.add(model); this.typeahead.add(model);
} }
this.filterContacts(); this.filterContacts();
this.updateControls(); this.updateControls();
}, },
updateControls: function() { updateControls: function() {
if (this.recipients.length > 0) { if (this.recipients.length > 0) {
this.$buttons.slideDown(); this.$buttons.slideDown();
} else { } else {
this.$buttons.slideUp(); this.$buttons.slideUp();
} }
if (this.recipients.length > 1) { if (this.recipients.length > 1) {
this.$group_update.slideDown(); this.$group_update.slideDown();
} else { } else {
this.$group_update.slideUp(); this.$group_update.slideUp();
} }
this.$input.focus(); this.$input.focus();
}, },
create: function() { create: function() {
var errors = this.recipients_view.$el.find('.error'); var errors = this.recipients_view.$el.find('.error');
if (errors.length) { if (errors.length) {
// TODO: css animation or error notification // TODO: css animation or error notification
errors.removeClass('error'); errors.removeClass('error');
setTimeout(function(){ errors.addClass('error'); }, 300); setTimeout(function(){ errors.addClass('error'); }, 300);
return; return;
}
if (this.recipients.length > 1) {
this.createGroup();
} else {
this.createConversation();
}
},
createConversation: function() {
var conversation = new Whisper.Conversation({
active_at: null,
id: this.recipients.at(0).id,
type: 'private'
});
conversation.fetch().then(function() {
this.$el.trigger('open', { modelId: conversation.id });
}.bind(this)).fail(function() {
var saved = conversation.save(); // false or indexedDBRequest
if (saved) {
saved.then(function() {
this.$el.trigger('open', { modelId: conversation.id });
}.bind(this));
} }
}.bind(this)); if (this.recipients.length > 1) {
}, this.createGroup();
} else {
this.createConversation();
}
},
createGroup: function() { createConversation: function() {
var name = this.$el.find('.new-group-update-form .name').val(); var conversation = new Whisper.Conversation({
if (!name.trim().length) { active_at: null,
return; id: this.recipients.at(0).id,
} type: 'private'
});
conversation.fetch().then(function() {
this.$el.trigger('open', { modelId: conversation.id });
}.bind(this)).fail(function() {
var saved = conversation.save(); // false or indexedDBRequest
if (saved) {
saved.then(function() {
this.$el.trigger('open', { modelId: conversation.id });
}.bind(this));
}
}.bind(this));
},
createGroup: function() {
var name = this.$el.find('.new-group-update-form .name').val();
if (!name.trim().length) {
return;
}
return this.avatarInput.getFiles().then(function(avatarFiles) { return this.avatarInput.getFiles().then(function(avatarFiles) {
var attributes = { var attributes = {
type: 'group', type: 'group',
name: name, name: name,
avatar: avatarFiles[0], avatar: avatarFiles[0],
members: this.recipients.pluck('id') members: this.recipients.pluck('id')
}; };
return textsecure.messaging.createGroup( return textsecure.messaging.createGroup(
attributes.members, attributes.name, attributes.avatar attributes.members, attributes.name, attributes.avatar
).then(function(groupId) { ).then(function(groupId) {
var id = getString(groupId); var id = getString(groupId);
var group = new Whisper.Conversation(attributes); var group = new Whisper.Conversation(attributes);
group.save({ id: id, groupId: id }).then(function() { group.save({ id: id, groupId: id }).then(function() {
this.$el.trigger('open', {modelId: id}); this.$el.trigger('open', {modelId: id});
}.bind(this));
}.bind(this)); }.bind(this));
}.bind(this)); }.bind(this));
}.bind(this)); },
},
resetTypeahead: function() { resetTypeahead: function() {
this.new_contact.$el.hide(); this.new_contact.$el.hide();
this.$input.val('').focus(); this.$input.val('').focus();
this.typeahead_view.collection.reset(this.typeahead.models); this.typeahead_view.collection.reset(this.typeahead.models);
}, },
reset: function() { reset: function() {
this.$buttons.hide(); this.$buttons.hide();
this.$group_update.hide(); this.$group_update.hide();
this.typeahead.add( this.typeahead.add(
this.recipients.filter(function(model) { this.recipients.filter(function(model) {
return !model.get('newContact'); return !model.get('newContact');
}) })
); );
this.recipients.reset([]); this.recipients.reset([]);
this.resetTypeahead(); this.resetTypeahead();
}, },
filterContacts: function() { filterContacts: function() {
var query = this.$input.val(); var query = this.$input.val();
if (query.length) { if (query.length) {
if (this.maybeNumber(query)) { if (this.maybeNumber(query)) {
this.new_contact.model.set('id', query); this.new_contact.model.set('id', query);
this.new_contact.render().$el.show(); this.new_contact.render().$el.show();
} else {
this.new_contact.$el.hide();
}
this.typeahead_view.collection.reset(
this.typeahead.typeahead(query)
);
} else { } else {
this.new_contact.$el.hide(); this.resetTypeahead();
} }
this.typeahead_view.collection.reset( },
this.typeahead.typeahead(query)
);
} else {
this.resetTypeahead();
}
},
maybeNumber: function(number) { maybeNumber: function(number) {
return number.match(/^\+?[0-9]*$/); return number.match(/^\+?[0-9]*$/);
} }
}); });
})(); })();

Loading…
Cancel
Save