From 21f27e6579af4bdadb063a4500cfe86cc5b24a1f Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Tue, 8 Jan 2019 21:21:46 +0100 Subject: [PATCH] [Glitch] Temporarily hold timeline if mouse moved recently Port 6a1216d2cd1c26c22baf86ae618a62aa66817239 to glitch-soc --- .../glitch/components/scrollable_list.js | 50 ++++++++++++++++++- 1 file changed, 48 insertions(+), 2 deletions(-) diff --git a/app/javascript/flavours/glitch/components/scrollable_list.js b/app/javascript/flavours/glitch/components/scrollable_list.js index 21d717b8167..006c2a899a9 100644 --- a/app/javascript/flavours/glitch/components/scrollable_list.js +++ b/app/javascript/flavours/glitch/components/scrollable_list.js @@ -10,6 +10,8 @@ import classNames from 'classnames'; import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from 'flavours/glitch/util/fullscreen'; import LoadingIndicator from './loading_indicator'; +const MOUSE_IDLE_DELAY = 300; + export default class ScrollableList extends PureComponent { static contextTypes = { @@ -38,6 +40,8 @@ export default class ScrollableList extends PureComponent { state = { fullscreen: null, + mouseMovedRecently: false, + scrollToTopOnMouseIdle: false, }; intersectionObserverWrapper = new IntersectionObserverWrapper(); @@ -61,6 +65,47 @@ export default class ScrollableList extends PureComponent { trailing: true, }); + mouseIdleTimer = null; + + clearMouseIdleTimer = () => { + if (this.mouseIdleTimer === null) { + return; + } + clearTimeout(this.mouseIdleTimer); + this.mouseIdleTimer = null; + }; + + handleMouseMove = throttle(() => { + // As long as the mouse keeps moving, clear and restart the idle timer. + this.clearMouseIdleTimer(); + this.mouseIdleTimer = + setTimeout(this.handleMouseIdle, MOUSE_IDLE_DELAY); + + this.setState(({ + mouseMovedRecently, + scrollToTopOnMouseIdle, + }) => ({ + mouseMovedRecently: true, + // Only set scrollToTopOnMouseIdle if we just started moving and were + // scrolled to the top. Otherwise, just retain the previous state. + scrollToTopOnMouseIdle: + mouseMovedRecently + ? scrollToTopOnMouseIdle + : (this.node.scrollTop === 0), + })); + }, MOUSE_IDLE_DELAY / 2); + + handleMouseIdle = () => { + if (this.state.scrollToTopOnMouseIdle) { + this.node.scrollTop = 0; + this.props.onScrollToTop(); + } + this.setState({ + mouseMovedRecently: false, + scrollToTopOnMouseIdle: false, + }); + } + componentDidMount () { this.attachScrollListener(); this.attachIntersectionObserver(); @@ -90,7 +135,7 @@ export default class ScrollableList extends PureComponent { const someItemInserted = React.Children.count(prevProps.children) > 0 && React.Children.count(prevProps.children) < React.Children.count(this.props.children) && this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props); - if (someItemInserted && this.node.scrollTop > 0) { + if ((someItemInserted && this.node.scrollTop > 0) || this.state.mouseMovedRecently) { return this.node.scrollHeight - this.node.scrollTop; } else { return null; @@ -104,6 +149,7 @@ export default class ScrollableList extends PureComponent { } componentWillUnmount () { + this.clearMouseIdleTimer(); this.detachScrollListener(); this.detachIntersectionObserver(); detachFullscreenListener(this.onFullScreenChange); @@ -181,7 +227,7 @@ export default class ScrollableList extends PureComponent { ); } else if (isLoading || childrenCount > 0 || hasMore || !emptyMessage) { scrollableArea = ( -
+
{prepend}