diff options
author | Eugen <eugen@zeonfederated.com> | 2017-01-24 21:56:06 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-01-24 21:56:06 +0100 |
commit | f8da0dd4907490f57cb14b052b767c66c95c4db3 (patch) | |
tree | 871a1b902872d22d0c28e96dbc733533d33ac397 /app/assets/javascripts/components/components | |
parent | bf0f6eb62d0f5bd1f0d8e4e2a6e9e8fd3b297b6c (diff) | |
parent | 8a880a3d464daf486a10d85b8ee49305aa6b1e5b (diff) |
Merge branch 'master' into master
Diffstat (limited to 'app/assets/javascripts/components/components')
-rw-r--r-- | app/assets/javascripts/components/components/status_content.jsx | 33 | ||||
-rw-r--r-- | app/assets/javascripts/components/components/status_list.jsx | 37 |
2 files changed, 54 insertions, 16 deletions
diff --git a/app/assets/javascripts/components/components/status_content.jsx b/app/assets/javascripts/components/components/status_content.jsx index 7287aa836..74b52e485 100644 --- a/app/assets/javascripts/components/components/status_content.jsx +++ b/app/assets/javascripts/components/components/status_content.jsx @@ -37,8 +37,6 @@ const StatusContent = React.createClass({ link.setAttribute('target', '_blank'); link.setAttribute('rel', 'noopener'); } - - link.addEventListener('click', this.onNormalClick, false); } }, @@ -70,16 +68,39 @@ const StatusContent = React.createClass({ } }, - onNormalClick (e) { - e.stopPropagation(); + handleMouseDown (e) { + this.startXY = [e.clientX, e.clientY]; + }, + + handleMouseUp (e) { + const [ startX, startY ] = this.startXY; + const [ deltaX, deltaY ] = [Math.abs(e.clientX - startX), Math.abs(e.clientY - startY)]; + + if (e.target.localName === 'a' || (e.target.parentNode && e.target.parentNode.localName === 'a')) { + return; + } + + if (deltaX + deltaY < 5) { + this.props.onClick(); + } + + this.startXY = null; }, render () { - const { status, onClick } = this.props; + const { status } = this.props; const content = { __html: emojify(status.get('content')) }; - return <div className='status__content' style={{ cursor: 'pointer' }} dangerouslySetInnerHTML={content} onClick={onClick} />; + return ( + <div + className='status__content' + style={{ cursor: 'pointer' }} + dangerouslySetInnerHTML={content} + onMouseDown={this.handleMouseDown} + onMouseUp={this.handleMouseUp} + /> + ); }, }); diff --git a/app/assets/javascripts/components/components/status_list.jsx b/app/assets/javascripts/components/components/status_list.jsx index e0a73435f..69cc013f2 100644 --- a/app/assets/javascripts/components/components/status_list.jsx +++ b/app/assets/javascripts/components/components/status_list.jsx @@ -11,7 +11,8 @@ const StatusList = React.createClass({ onScrollToBottom: React.PropTypes.func, onScrollToTop: React.PropTypes.func, onScroll: React.PropTypes.func, - trackScroll: React.PropTypes.bool + trackScroll: React.PropTypes.bool, + isLoading: React.PropTypes.bool }, getDefaultProps () { @@ -24,10 +25,10 @@ const StatusList = React.createClass({ handleScroll (e) { const { scrollTop, scrollHeight, clientHeight } = e.target; - + const offset = scrollHeight - scrollTop - clientHeight; this._oldScrollPosition = scrollHeight - scrollTop; - if (scrollTop === scrollHeight - clientHeight && this.props.onScrollToBottom) { + if (250 > offset && this.props.onScrollToBottom && !this.props.isLoading) { this.props.onScrollToBottom(); } else if (scrollTop < 100 && this.props.onScrollToTop) { this.props.onScrollToTop(); @@ -36,21 +37,37 @@ const StatusList = React.createClass({ } }, - componentDidUpdate (prevProps) { - if (prevProps.statusIds.size < this.props.statusIds.size && prevProps.statusIds.first() !== this.props.statusIds.first() && this._oldScrollPosition) { - const node = ReactDOM.findDOMNode(this); + componentDidMount () { + this.attachScrollListener(); + }, - if (node.scrollTop > 0) { - node.scrollTop = node.scrollHeight - this._oldScrollPosition; - } + componentDidUpdate (prevProps) { + if (this.node.scrollTop > 0 && (prevProps.statusIds.size < this.props.statusIds.size && prevProps.statusIds.first() !== this.props.statusIds.first() && !!this._oldScrollPosition)) { + this.node.scrollTop = this.node.scrollHeight - this._oldScrollPosition; } }, + componentWillUnmount () { + this.detachScrollListener(); + }, + + attachScrollListener () { + this.node.addEventListener('scroll', this.handleScroll); + }, + + detachScrollListener () { + this.node.removeEventListener('scroll', this.handleScroll); + }, + + setRef (c) { + this.node = c; + }, + render () { const { statusIds, onScrollToBottom, trackScroll } = this.props; const scrollableArea = ( - <div className='scrollable' onScroll={this.handleScroll}> + <div className='scrollable' ref={this.setRef}> <div> {statusIds.map((statusId) => { return <StatusContainer key={statusId} id={statusId} />; |