diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js index b53832ce5..c052e5aa1 100644 --- a/client/coral-embed-stream/src/CommentStream.js +++ b/client/coral-embed-stream/src/CommentStream.js @@ -90,7 +90,7 @@ class CommentStream extends Component { const rootItemId = this.props.items.assets && Object.keys(this.props.items.assets)[0]; const rootItem = this.props.items.assets && this.props.items.assets[rootItemId]; const {actions, users, comments} = this.props.items; - const {status, moderation, closedMessage} = this.props.config; + const {status, moderation, closedMessage, charCount, charCountEnable} = this.props.config; const {loggedIn, isAdmin, user, showSignInDialog, signInOffset} = this.props.auth; const {activeTab} = this.state; const banned = (this.props.userData.status === 'banned'); @@ -128,7 +128,7 @@ class CommentStream extends Component { currentUser={this.props.auth.user} banned={banned} author={user} - /> + charCount={charCountEnable && charCount}/> :
{closedMessage}
@@ -198,6 +198,7 @@ class CommentStream extends Component { parent_id={commentId} premod={moderation} currentUser={user} + charCount={charCountEnable && charCount} showReply={comment.showReply}/> { comment.children && @@ -257,6 +258,7 @@ class CommentStream extends Component { premod={moderation} banned={banned} currentUser={user} + charCount={charCountEnable && charCount} showReply={reply.showReply}/> ; }) diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css index c27baf406..463c8dc68 100644 --- a/client/coral-embed-stream/style/default.css +++ b/client/coral-embed-stream/style/default.css @@ -95,7 +95,7 @@ hr { margin-top: 10px; } -#coralStream .coral-plugin-commentbox-button { +.coral-plugin-commentbox-button { float: right; margin-top: 10px; padding: 5px 10px; @@ -111,6 +111,16 @@ hr { margin-bottom: 5px; } +.coral-plugin-commentbox-char-count { + color: #ccc; + text-align: right; + font-size: 12px; +} + +.coral-plugin-commentbox-char-max { + color: #d50000; +} + /* Comment styles */ .comment { margin-bottom: 10px; diff --git a/client/coral-plugin-commentbox/CommentBox.js b/client/coral-plugin-commentbox/CommentBox.js index 501d2ecc9..086a0cf36 100644 --- a/client/coral-plugin-commentbox/CommentBox.js +++ b/client/coral-plugin-commentbox/CommentBox.js @@ -23,7 +23,18 @@ class CommentBox extends Component { } postComment = () => { - const {postItem, updateItem, id, parent_id, child_id, addNotification, appendItemArray, premod, author} = this.props; + const { + postItem, + updateItem, + id, + parent_id, + child_id, + addNotification, + appendItemArray, + premod, + author + } = this.props; + let comment = { body: this.state.body, asset_id: id, @@ -42,6 +53,10 @@ class CommentBox extends Component { if (child_id || parent_id) { updateItem(child_id || parent_id, 'showReply', false, 'comments'); } + + if (this.props.charCount && this.state.body.length > this.props.charCount) { + return; + } postItem(comment, 'comments') .then((postedComment) => { const commentId = postedComment.id; @@ -59,8 +74,8 @@ class CommentBox extends Component { } render () { - const {styles, reply, author} = this.props; - // How to handle language in plugins? Should we have a dependency on our central translation file? + const {styles, reply, author, charCount} = this.props; + const length = this.state.body.length; return