PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix infinite scrolling

Browse source
This commit is contained in:
David Baker 2015-07-07 11:00:02 +01:00
parent ba8751bb75
commit 9f37196eb7
2 changed files with 31 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
skins/base/views/organisms/RoomView.js
View file

@ -70,8 +70,8 @@ module.exports = React.createClass({
<RoomHeader room={this.state.room} /> <RoomHeader room={this.state.room} />
<div className="mx_RoomView_roomWrapper"> <div className="mx_RoomView_roomWrapper">
<div className="mx_RoomView_messagePanel"> <div className="mx_RoomView_messagePanel">
<div className="mx_RoomView_messageListWrapper"> <div ref="messageWrapper" className="mx_RoomView_messageListWrapper" onScroll={this.onMessageListScroll}>
<div className="mx_RoomView_MessageList" ref="messageList" aria-live="polite" onScroll={this.onMessageListScroll}> <div className="mx_RoomView_MessageList" aria-live="polite">
<div className={scrollheader_classes}> <div className={scrollheader_classes}>
</div> </div>
{this.getEventTiles()} {this.getEventTiles()}

47
src/controllers/organisms/RoomView.js
View file

@ -46,6 +46,10 @@ module.exports = {
}, },
componentWillUnmount: function() { componentWillUnmount: function() {
if (this.refs.messageWrapper) {
var messageWrapper = this.refs.messageWrapper.getDOMNode();
messageWrapper.removeEventListener('drop', this.handleDrop);
}
dis.unregister(this.dispatcherRef); dis.unregister(this.dispatcherRef);
if (MatrixClientPeg.get()) { if (MatrixClientPeg.get()) {
MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline); MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
@ -82,9 +86,9 @@ module.exports = {
if (this.state.joining) return; if (this.state.joining) return;
if (room.roomId != this.props.roomId) return; if (room.roomId != this.props.roomId) return;
if (this.refs.messageList) { if (this.refs.messageWrapper) {
var messageUl = this.refs.messageList.getDOMNode(); var messageWrapper = this.refs.messageWrapper.getDOMNode();
this.atBottom = messageUl.scrollHeight - messageUl.scrollTop <= messageUl.clientHeight; this.atBottom = messageWrapper.scrollHeight - messageWrapper.scrollTop <= messageWrapper.clientHeight;
} }
this.setState({ this.setState({
room: MatrixClientPeg.get().getRoom(this.props.roomId) room: MatrixClientPeg.get().getRoom(this.props.roomId)
@ -96,40 +100,40 @@ module.exports = {
}, },
componentDidMount: function() { componentDidMount: function() {
if (this.refs.messageList) { if (this.refs.messageWrapper) {
var messageUl = this.refs.messageList.getDOMNode(); var messageWrapper = this.refs.messageWrapper.getDOMNode();
messageUl.addEventListener('drop', handleDrop); messageWrapper.addEventListener('drop', this.handleDrop);
messageUl.scrollTop = messageUl.scrollHeight; messageWrapper.scrollTop = messageWrapper.scrollHeight;
this.fillSpace(); this.fillSpace();
} }
}, },
componentDidUpdate: function() { componentDidUpdate: function() {
if (!this.refs.messageList) return; if (!this.refs.messageWrapper) return;
var messageUl = this.refs.messageList.getDOMNode(); var messageWrapper = this.refs.messageWrapper.getDOMNode();
if (this.state.paginating && !this.waiting_for_paginate) { if (this.state.paginating && !this.waiting_for_paginate) {
var heightGained = messageUl.scrollHeight - this.oldScrollHeight; var heightGained = messageWrapper.scrollHeight - this.oldScrollHeight;
messageUl.scrollTop += heightGained; messageWrapper.scrollTop += heightGained;
this.oldScrollHeight = undefined; this.oldScrollHeight = undefined;
if (!this.fillSpace()) { if (!this.fillSpace()) {
this.setState({paginating: false}); this.setState({paginating: false});
} }
} else if (this.atBottom) { } else if (this.atBottom) {
messageUl.scrollTop = messageUl.scrollHeight; messageWrapper.scrollTop = messageWrapper.scrollHeight;
} }
}, },
fillSpace: function() { fillSpace: function() {
var messageUl = this.refs.messageList.getDOMNode(); var messageWrapper = this.refs.messageWrapper.getDOMNode();
if (messageUl.scrollTop < messageUl.clientHeight && this.state.room.oldState.paginationToken) { if (messageWrapper.scrollTop < messageWrapper.clientHeight && this.state.room.oldState.paginationToken) {
this.setState({paginating: true}); this.setState({paginating: true});
this.oldScrollHeight = messageUl.scrollHeight; this.oldScrollHeight = messageWrapper.scrollHeight;
if (this.state.messageCap < this.state.room.timeline.length) { if (this.state.messageCap < this.state.room.timeline.length) {
this.waiting_for_paginate = false; this.waiting_for_paginate = false;
@ -175,13 +179,20 @@ module.exports = {
}, },
onMessageListScroll: function(ev) { onMessageListScroll: function(ev) {
if (this.refs.messageList) { if (this.refs.messageWrapper) {
var messageUl = this.refs.messageList.getDOMNode(); var messageWrapper = this.refs.messageWrapper.getDOMNode();
this.atBottom = messageUl.scrollHeight - messageUl.scrollTop <= messageUl.clientHeight; this.atBottom = messageWrapper.scrollHeight - messageWrapper.scrollTop <= messageWrapper.clientHeight;
} }
if (!this.state.paginating) this.fillSpace(); if (!this.state.paginating) this.fillSpace();
}, },
handleDrop: function(ev) {
ev.stopPropagation();
var files = evt.dataTransfer.files;
},
getEventTiles: function() { getEventTiles: function() {
var ret = []; var ret = [];
var count = 0; var count = 0;