diff options
author | Florian Orben <florian.orben@gmail.com> | 2015-10-31 04:46:35 +0100 |
---|---|---|
committer | Florian Orben <florian.orben@gmail.com> | 2015-11-05 23:33:21 +0100 |
commit | 4b6eb56415c2085bc9078836b70b833b1e01a60d (patch) | |
tree | 0f07051ef1bf98b3ca14fa7a4b65b36001590eb7 /web | |
parent | d3ed791ab52eaddb7690869bb1cd982453badd95 (diff) | |
download | chat-4b6eb56415c2085bc9078836b70b833b1e01a60d.tar.gz chat-4b6eb56415c2085bc9078836b70b833b1e01a60d.tar.bz2 chat-4b6eb56415c2085bc9078836b70b833b1e01a60d.zip |
collapse text after 700 chars or 5 line breaks
Diffstat (limited to 'web')
-rw-r--r-- | web/react/components/post_attachment.jsx | 59 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_post.scss | 3 |
2 files changed, 60 insertions, 2 deletions
diff --git a/web/react/components/post_attachment.jsx b/web/react/components/post_attachment.jsx index 6bc9ade47..2d6b47f03 100644 --- a/web/react/components/post_attachment.jsx +++ b/web/react/components/post_attachment.jsx @@ -8,6 +8,60 @@ export default class PostAttachment extends React.Component { super(props); this.getFieldsTable = this.getFieldsTable.bind(this); + this.getInitState = this.getInitState.bind(this); + this.shouldCollapse = this.shouldCollapse.bind(this); + this.toggleCollapseState = this.toggleCollapseState.bind(this); + } + + componentDidMount() { + $(this.refs.attachment).on('click', '.attachment-link-more', this.toggleCollapseState); + } + + componentWillUnmount() { + $(this.refs.attachment).off('click', '.attachment-link-more', this.toggleCollapseState); + } + + componentWillMount() { + this.setState(this.getInitState()); + } + + getInitState() { + const shouldCollapse = this.shouldCollapse(); + const text = TextFormatting.formatText(this.props.attachment.text || ''); + const uncollapsedText = text + (shouldCollapse ? '<a class="attachment-link-more" href="#">▲ collapse text</a>' : ''); + const collapsedText = shouldCollapse ? this.getCollapsedText() : text; + + return { + shouldCollapse, + collapsedText, + uncollapsedText, + text: shouldCollapse ? collapsedText : uncollapsedText, + collapsed: shouldCollapse + }; + } + + toggleCollapseState(e) { + e.preventDefault(); + + let state = this.state; + state.text = state.collapsed ? state.uncollapsedText : state.collapsedText; + state.collapsed = !state.collapsed; + this.setState(state); + } + + shouldCollapse() { + return (this.props.attachment.text.match(/\n/g) || []).length >= 5 || this.props.attachment.text.length > 700; + } + + getCollapsedText() { + let text = this.props.attachment.text || ''; + if ((text.match(/\n/g) || []).length >= 5) { + text = text.split('\n').splice(0, 5).join('\n'); + } else if (text.length > 700) { + text = text.substr(0, 700); + } + + return TextFormatting.formatText(text) + '<a class="attachment-link-more" href="#">▼ read more</a>'; } getFieldsTable() { @@ -169,7 +223,7 @@ export default class PostAttachment extends React.Component { text = ( <div className='attachment__text' - dangerouslySetInnerHTML={{__html: TextFormatting.formatText(data.text || '')}} + dangerouslySetInnerHTML={{__html: this.state.text}} > </div> ); @@ -208,11 +262,12 @@ export default class PostAttachment extends React.Component { return ( <div className='attachment' + ref='attachment' > {preText} <div className='attachment__content'> <div - className={useBorderStyle ? 'attachment__container' : 'attachment__container attachment__container--' + data.color} + className={useBorderStyle ? 'clearfix attachment__container' : 'clearfix attachment__container attachment__container--' + data.color} style={useBorderStyle} > {author} diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index dd88e6e16..db03a1578 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -645,6 +645,9 @@ body.ios { width: 100%; } } + .attachment__text p:last-of-type { + display: inline-block; + } .attachment__thumb-pretext { margin-left: 5px; } |