New layout/design
Two column layout and style tweaks. Templatized conversation views. Generalized list view.pull/749/head
lilia
11 years ago
parent
6d5e32bca8
commit
def32f42d4
@ -0,0 +1,29 @@
|
||||
var Whisper = Whisper || {};
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
Whisper.ConversationListView = Whisper.ListView.extend({
|
||||
tagName: 'ul',
|
||||
id: 'contacts',
|
||||
itemView: Whisper.ConversationView,
|
||||
collection: Whisper.Threads,
|
||||
|
||||
events: {
|
||||
'select .conversation': 'select',
|
||||
'deselect': 'deselect'
|
||||
},
|
||||
|
||||
select: function(e) {
|
||||
var target = $(e.target).closest('.conversation');
|
||||
target.siblings().addClass('closed');
|
||||
target.addClass('selected').trigger('open');
|
||||
return false;
|
||||
},
|
||||
|
||||
deselect: function() {
|
||||
this.$el.find('.selected').removeClass('selected').trigger('close');
|
||||
this.$el.find('.conversation').show();
|
||||
}
|
||||
});
|
||||
})();
|
||||
@ -1,46 +0,0 @@
|
||||
var Whisper = Whisper || {};
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
Whisper.ConversationListView = Backbone.View.extend({
|
||||
tagName: 'ul',
|
||||
id: 'conversations',
|
||||
initialize: function() {
|
||||
this.views = {};
|
||||
this.threads = Whisper.Threads;
|
||||
this.listenTo(this.threads, 'change:completed', this.render); // auto update
|
||||
this.listenTo(this.threads, 'add', this.addThread);
|
||||
this.listenTo(this.threads, 'reset', this.addAll);
|
||||
this.listenTo(this.threads, 'all', this.render);
|
||||
this.listenTo(Whisper.Messages, 'add', this.addMessage);
|
||||
|
||||
// Suppresses 'add' events with {reset: true} and prevents the app view
|
||||
// from being re-rendered for every model. Only renders when the 'reset'
|
||||
// event is triggered at the end of the fetch.
|
||||
//this.messages.threads({reset: true});
|
||||
Whisper.Threads.fetch({reset: true});
|
||||
Whisper.Messages.fetch();
|
||||
|
||||
this.$el.appendTo($('#inbox'));
|
||||
},
|
||||
|
||||
addThread: function(thread) {
|
||||
this.views[thread.id] = new Whisper.ConversationView({model: thread});
|
||||
this.$el.prepend(this.views[thread.id].render().el);
|
||||
},
|
||||
|
||||
addAll: function() {
|
||||
this.$el.html('');
|
||||
_.each(this.threads.where({'active': true}), this.addThread, this);
|
||||
},
|
||||
|
||||
addMessage: function(message) {
|
||||
var thread = message.thread();
|
||||
if (!_.has(this.views, thread.id)) {
|
||||
this.addThread(thread);
|
||||
}
|
||||
thread.trigger('message', message);
|
||||
}
|
||||
});
|
||||
})();
|
||||
@ -0,0 +1,36 @@
|
||||
var Whisper = Whisper || {};
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
/*
|
||||
* Generic list view that watches a given collection, wraps its members in
|
||||
* a given child view and adds the child view elements to its own element.
|
||||
*/
|
||||
Whisper.ListView = Backbone.View.extend({
|
||||
tagName: 'ul',
|
||||
initialize: function() {
|
||||
this.listenTo(this.collection, 'change', this.render); // auto update
|
||||
this.listenTo(this.collection, 'add', this.addOne);
|
||||
this.listenTo(this.collection, 'reset', this.addAll);
|
||||
this.listenTo(this.collection, 'all', this.render);
|
||||
this.collection.fetch({reset: true});
|
||||
},
|
||||
|
||||
addOne: function(model) {
|
||||
if (this.itemView) {
|
||||
var view = new this.itemView({model: model});
|
||||
this.$el.append(view.render().el);
|
||||
}
|
||||
},
|
||||
|
||||
addAll: function() {
|
||||
this.$el.html('');
|
||||
this.collection.each(this.addOne, this);
|
||||
},
|
||||
|
||||
last: function() {
|
||||
this.collection.at(this.collection.length - 1);
|
||||
}
|
||||
});
|
||||
})();
|
||||
@ -0,0 +1,15 @@
|
||||
var Whisper = Whisper || {};
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
Whisper.MessageListView = Whisper.ListView.extend({
|
||||
tagName: 'ul',
|
||||
className: 'messages',
|
||||
itemView: Whisper.MessageView,
|
||||
|
||||
render: function() {
|
||||
$('#main').html('').append(this.el);
|
||||
}
|
||||
});
|
||||
})();
|
||||
Loading…
Reference in New Issue