diff options
Diffstat (limited to 'app/assets/javascripts/components/components/status_content.jsx')
-rw-r--r-- | app/assets/javascripts/components/components/status_content.jsx | 62 |
1 files changed, 55 insertions, 7 deletions
diff --git a/app/assets/javascripts/components/components/status_content.jsx b/app/assets/javascripts/components/components/status_content.jsx index f2c88cee0..521b557f0 100644 --- a/app/assets/javascripts/components/components/status_content.jsx +++ b/app/assets/javascripts/components/components/status_content.jsx @@ -1,6 +1,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import PureRenderMixin from 'react-addons-pure-render-mixin'; import emojify from '../emoji'; +import { FormattedMessage } from 'react-intl'; const StatusContent = React.createClass({ @@ -13,6 +14,12 @@ const StatusContent = React.createClass({ onClick: React.PropTypes.func }, + getInitialState () { + return { + hidden: true + }; + }, + mixins: [PureRenderMixin], componentDidMount () { @@ -31,8 +38,6 @@ const StatusContent = React.createClass({ link.setAttribute('target', '_blank'); link.setAttribute('rel', 'noopener'); } - - link.addEventListener('click', this.onNormalClick, false); } }, @@ -52,16 +57,59 @@ 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 && e.button === 0) { + this.props.onClick(); + } + + this.startXY = null; + }, + + handleSpoilerClick () { + this.setState({ hidden: !this.state.hidden }); }, render () { - const { status, onClick } = this.props; + const { status } = this.props; + const { hidden } = this.state; const content = { __html: emojify(status.get('content')) }; - - return <div className='status__content' style={{ cursor: 'pointer' }} dangerouslySetInnerHTML={content} onClick={onClick} />; + const spoilerContent = { __html: emojify(status.get('spoiler_text', '')) }; + + if (status.get('spoiler_text').length > 0) { + const toggleText = hidden ? <FormattedMessage id='status.show_more' defaultMessage='Show more' /> : <FormattedMessage id='status.show_less' defaultMessage='Show less' />; + + return ( + <div className='status__content' style={{ cursor: 'pointer' }} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}> + <p style={{ marginBottom: hidden ? '0px' : '' }} > + <span dangerouslySetInnerHTML={spoilerContent} /> <a onClick={this.handleSpoilerClick}>{toggleText}</a> + </p> + + <div style={{ display: hidden ? 'none' : 'block' }} dangerouslySetInnerHTML={content} /> + </div> + ); + } else { + return ( + <div + className='status__content' + style={{ cursor: 'pointer' }} + onMouseDown={this.handleMouseDown} + onMouseUp={this.handleMouseUp} + dangerouslySetInnerHTML={content} + /> + ); + } }, }); |