Fix list view scrolling
Resize handlers are ugly. But not as ugly as scroll handlers. :p Normalized some whitespace along the way.
This commit is contained in:
parent
ec01d33b50
commit
db5e7fd6b6
9 changed files with 75 additions and 54 deletions
|
@ -42,6 +42,7 @@
|
|||
if (this.model.id) {
|
||||
this.model.fetchMessages({reset: true});
|
||||
}
|
||||
window.addEventListener('resize', this.view.resize.bind(this.view));
|
||||
},
|
||||
|
||||
events: {
|
||||
|
|
|
@ -45,6 +45,7 @@
|
|||
this.conversations.get(message.conversationId).fetchMessages();
|
||||
}.bind(this));
|
||||
}.bind(this));
|
||||
window.addEventListener('resize', this.inbox.resize.bind(this.inbox));
|
||||
},
|
||||
events: {
|
||||
'keyup': 'keyup',
|
||||
|
|
|
@ -16,33 +16,45 @@
|
|||
var Whisper = Whisper || {};
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
'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',
|
||||
itemView: Backbone.View,
|
||||
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);
|
||||
},
|
||||
/*
|
||||
* 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',
|
||||
itemView: Backbone.View,
|
||||
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);
|
||||
},
|
||||
|
||||
addOne: function(model) {
|
||||
if (this.itemView) {
|
||||
var view = new this.itemView({model: model});
|
||||
this.$el.append(view.render().el);
|
||||
this.$el.trigger('add');
|
||||
}
|
||||
},
|
||||
addOne: function(model) {
|
||||
if (this.itemView) {
|
||||
var view = new this.itemView({model: model});
|
||||
this.$el.append(view.render().el);
|
||||
this.$el.trigger('add');
|
||||
}
|
||||
},
|
||||
|
||||
addAll: function() {
|
||||
this.$el.html('');
|
||||
this.collection.each(this.addOne, this);
|
||||
}
|
||||
});
|
||||
addAll: function() {
|
||||
this.$el.html('');
|
||||
this.collection.each(this.addOne, this);
|
||||
this.resize();
|
||||
},
|
||||
|
||||
resize: function() {
|
||||
var height = window.innerHeight - $('#header').height() - $('#footer').height();
|
||||
if (this.$el.height() > height) {
|
||||
this.$el.css('height', height + 'px');
|
||||
this.$el.css('overflow-y', 'scroll');
|
||||
} else {
|
||||
this.$el.css('height', 'auto');
|
||||
this.$el.css('overflow-y', 'auto');
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
|
|
@ -16,23 +16,23 @@
|
|||
var Whisper = Whisper || {};
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
'use strict';
|
||||
|
||||
Whisper.MessageListView = Whisper.ListView.extend({
|
||||
tagName: 'ul',
|
||||
className: 'message-list',
|
||||
itemView: Whisper.MessageView,
|
||||
events: {
|
||||
'add': 'scrollToBottom',
|
||||
'update *': 'scrollToBottom'
|
||||
},
|
||||
scrollToBottom: function() {
|
||||
// TODO: Avoid scrolling if user has manually scrolled up?
|
||||
this.$el.scrollTop(this.el.scrollHeight);
|
||||
},
|
||||
addAll: function() {
|
||||
Whisper.ListView.prototype.addAll.apply(this, arguments); // super()
|
||||
this.scrollToBottom();
|
||||
},
|
||||
});
|
||||
Whisper.MessageListView = Whisper.ListView.extend({
|
||||
tagName: 'ul',
|
||||
className: 'message-list',
|
||||
itemView: Whisper.MessageView,
|
||||
events: {
|
||||
'add': 'scrollToBottom',
|
||||
'update *': 'scrollToBottom'
|
||||
},
|
||||
scrollToBottom: function() {
|
||||
// TODO: Avoid scrolling if user has manually scrolled up?
|
||||
this.$el.scrollTop(this.el.scrollHeight);
|
||||
},
|
||||
addAll: function() {
|
||||
Whisper.ListView.prototype.addAll.apply(this, arguments); // super()
|
||||
this.scrollToBottom();
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue