2fc78ddd7d
Messages with images or media were causing the scroll position to jump around when they loaded, because rendering them changed the height of their elements from 0 to full-height sometime after they were inserted into the DOM. Now when rendering attachments, we wait for them to load so they can render at full height immediately, then warn our parent message list before and after a potential height change, so the scroll position can be saved and reset. // FREEBIE
64 lines
2.5 KiB
JavaScript
64 lines
2.5 KiB
JavaScript
/*
|
|
* vim: ts=4:sw=4:expandtab
|
|
*/
|
|
(function () {
|
|
'use strict';
|
|
window.Whisper = window.Whisper || {};
|
|
|
|
Whisper.MessageListView = Whisper.ListView.extend({
|
|
tagName: 'ul',
|
|
className: 'message-list',
|
|
itemView: Whisper.MessageView,
|
|
events: {
|
|
'scroll': 'onScroll',
|
|
'reset-scroll': 'resetScrollPosition'
|
|
},
|
|
onScroll: function() {
|
|
this.measureScrollPosition();
|
|
if (this.$el.scrollTop() === 0) {
|
|
this.$el.trigger('loadMore');
|
|
}
|
|
},
|
|
measureScrollPosition: function() {
|
|
if (this.el.scrollHeight === 0) { // hidden
|
|
return;
|
|
}
|
|
this.scrollPosition = this.$el.scrollTop() + this.$el.outerHeight();
|
|
this.scrollHeight = this.el.scrollHeight;
|
|
this.shouldStickToBottom = this.scrollPosition === this.scrollHeight;
|
|
if (this.shouldStickToBottom) {
|
|
this.bottomOffset = 0;
|
|
} else {
|
|
this.bottomOffset = this.scrollHeight - this.$el.scrollTop();
|
|
}
|
|
},
|
|
resetScrollPosition: function() {
|
|
var scrollPosition = this.scrollPosition;
|
|
if (this.scrollHeight !== this.el.scrollHeight) {
|
|
scrollPosition = this.el.scrollHeight * this.scrollPosition / this.scrollHeight;
|
|
}
|
|
this.$el.scrollTop(scrollPosition - this.$el.outerHeight());
|
|
},
|
|
scrollToBottomIfNeeded: function() {
|
|
this.$el.scrollTop(this.el.scrollHeight - this.bottomOffset);
|
|
},
|
|
addOne: function(model) {
|
|
if (this.itemView) {
|
|
var view = new this.itemView({model: model}).render();
|
|
this.listenTo(view, 'beforeChangeHeight', this.measureScrollPosition);
|
|
this.listenTo(view, 'afterChangeHeight', this.scrollToBottomIfNeeded);
|
|
if (this.collection.indexOf(model) === this.collection.length - 1) {
|
|
// add to the bottom.
|
|
this.$el.append(view.el);
|
|
this.$el.scrollTop(this.el.scrollHeight); // TODO: Avoid scrolling if user has manually scrolled up?
|
|
this.measureScrollPosition();
|
|
} else {
|
|
// add to the top.
|
|
this.measureScrollPosition();
|
|
this.$el.prepend(view.el);
|
|
this.scrollToBottomIfNeeded();
|
|
}
|
|
}
|
|
},
|
|
});
|
|
})();
|