From 1ac47f32fec72383fe2ba8a5a71f15fb9dd5b8d1 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 12 Nov 2015 17:18:22 +0000 Subject: [PATCH] Fix scrolling on browsers where gemini scrollbars don't kick in. --- src/controllers/organisms/RoomView.js | 64 +++++++++++--------- src/skins/vector/views/organisms/RoomView.js | 8 +-- 2 files changed, 41 insertions(+), 31 deletions(-) diff --git a/src/controllers/organisms/RoomView.js b/src/controllers/organisms/RoomView.js index 31bce9fe..5a76c1d6 100644 --- a/src/controllers/organisms/RoomView.js +++ b/src/controllers/organisms/RoomView.js @@ -60,12 +60,12 @@ module.exports = { }, componentWillUnmount: function() { - if (this.refs.messageWrapper) { - var messageWrapper = ReactDOM.findDOMNode(this.refs.messageWrapper); - messageWrapper.removeEventListener('drop', this.onDrop); - messageWrapper.removeEventListener('dragover', this.onDragOver); - messageWrapper.removeEventListener('dragleave', this.onDragLeaveOrEnd); - messageWrapper.removeEventListener('dragend', this.onDragLeaveOrEnd); + if (this.refs.messagePanel) { + var messagePanel = ReactDOM.findDOMNode(this.refs.messagePanel); + messagePanel.removeEventListener('drop', this.onDrop); + messagePanel.removeEventListener('dragover', this.onDragOver); + messagePanel.removeEventListener('dragleave', this.onDragLeaveOrEnd); + messagePanel.removeEventListener('dragend', this.onDragLeaveOrEnd); } dis.unregister(this.dispatcherRef); if (MatrixClientPeg.get()) { @@ -98,10 +98,9 @@ module.exports = { // Call state has changed so we may be loading video elements // which will obscure the message log. // scroll to bottom - var messageWrapper = this.refs.messageWrapper; - if (messageWrapper) { - var messageWrapperScroll = ReactDOM.findDOMNode(messageWrapper).children[2]; - messageWrapperScroll.scrollTop = messageWrapperScroll.scrollHeight; + var scrollNode = this._getScrollNode(); + if (scrollNode) { + scrollNode.scrollTop = scrollNode.scrollHeight; } } @@ -112,6 +111,17 @@ module.exports = { } }, + _getScrollNode: function() { + var panel = ReactDOM.findDOMNode(this.refs.messagePanel); + if (!panel) return null; + + if (panel.classList.contains('gm-prevented')) { + return panel; + } else { + return panel.children[2]; // XXX: Fragile! + } + }, + onSyncStateChange: function(state) { this.setState({ syncState: state @@ -138,11 +148,11 @@ module.exports = { if (this.state.joining) return; if (room.roomId != this.props.roomId) return; - if (this.refs.messageWrapper) { - var messageWrapperScroll = ReactDOM.findDOMNode(this.refs.messageWrapper).children[2]; + var scrollNode = this._getScrollNode(); + if (scrollNode) { this.atBottom = ( - messageWrapperScroll.scrollHeight - messageWrapperScroll.scrollTop <= - (messageWrapperScroll.clientHeight + 150) + scrollNode.scrollHeight - scrollNode.scrollTop <= + (scrollNode.clientHeight + 150) // 150? ); } @@ -225,15 +235,15 @@ module.exports = { }, componentDidMount: function() { - if (this.refs.messageWrapper) { - var messageWrapper = ReactDOM.findDOMNode(this.refs.messageWrapper); + if (this.refs.messagePanel) { + var messagePanel = ReactDOM.findDOMNode(this.refs.messagePanel); - messageWrapper.addEventListener('drop', this.onDrop); - messageWrapper.addEventListener('dragover', this.onDragOver); - messageWrapper.addEventListener('dragleave', this.onDragLeaveOrEnd); - messageWrapper.addEventListener('dragend', this.onDragLeaveOrEnd); + messagePanel.addEventListener('drop', this.onDrop); + messagePanel.addEventListener('dragover', this.onDragOver); + messagePanel.addEventListener('dragleave', this.onDragLeaveOrEnd); + messagePanel.addEventListener('dragend', this.onDragLeaveOrEnd); - var messageWrapperScroll = messageWrapper.children[2]; + var messageWrapperScroll = this._getScrollNode(); messageWrapperScroll.scrollTop = messageWrapperScroll.scrollHeight; @@ -244,9 +254,9 @@ module.exports = { }, componentDidUpdate: function() { - if (!this.refs.messageWrapper) return; + if (!this.refs.messagePanel) return; - var messageWrapperScroll = ReactDOM.findDOMNode(this.refs.messageWrapper).children[2]; + var messageWrapperScroll = this._getScrollNode(); if (this.state.paginating && !this.waiting_for_paginate) { var heightGained = messageWrapperScroll.scrollHeight - this.oldScrollHeight; @@ -264,8 +274,8 @@ module.exports = { }, fillSpace: function() { - if (!this.refs.messageWrapper) return; - var messageWrapperScroll = ReactDOM.findDOMNode(this.refs.messageWrapper).children[2]; + if (!this.refs.messagePanel) return; + var messageWrapperScroll = this._getScrollNode(); if (messageWrapperScroll.scrollTop < messageWrapperScroll.clientHeight && this.state.room.oldState.paginationToken) { this.setState({paginating: true}); @@ -322,8 +332,8 @@ module.exports = { }, onMessageListScroll: function(ev) { - if (this.refs.messageWrapper) { - var messageWrapperScroll = ReactDOM.findDOMNode(this.refs.messageWrapper).children[2]; + if (this.refs.messagePanel) { + var messageWrapperScroll = this._getScrollNode(); var wasAtBottom = this.atBottom; this.atBottom = messageWrapperScroll.scrollHeight - messageWrapperScroll.scrollTop <= messageWrapperScroll.clientHeight - 1; if (this.atBottom && !wasAtBottom) { diff --git a/src/skins/vector/views/organisms/RoomView.js b/src/skins/vector/views/organisms/RoomView.js index 2169fb4f..a3213a12 100644 --- a/src/skins/vector/views/organisms/RoomView.js +++ b/src/skins/vector/views/organisms/RoomView.js @@ -101,9 +101,9 @@ module.exports = React.createClass({ }, scrollToBottom: function() { - if (!this.refs.messageWrapper) return; - var messageWrapper = ReactDOM.findDOMNode(this.refs.messageWrapper).children[2]; - messageWrapper.scrollTop = messageWrapper.scrollHeight; + var scrollNode = this._getScrollNode(); + if (!scrollNode) return; + scrollNode.scrollTop = scrollNode.scrollHeight; }, render: function() { @@ -299,7 +299,7 @@ module.exports = React.createClass({ { conferenceCallNotification } { aux } - +
{ fileDropTarget }