collapse text after 700 chars or 5 line breaks

1 files changed, 57 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}