From 656a88efdd2606ce8449097e740535f41aee9d64 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Tue, 25 Aug 2015 12:47:18 -0700 Subject: Fixed issue with carriage returns being counted improperly in non-ie browsers and updated error messages to be appropriate to what is being typed (message vs. post vs. edit) --- web/react/components/create_comment.jsx | 8 +++++--- web/react/components/create_post.jsx | 6 ++++-- web/react/components/edit_post_modal.jsx | 9 ++++++--- web/react/utils/utils.jsx | 28 ++++++++++++++++++++++++++++ 4 files changed, 43 insertions(+), 8 deletions(-) diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx index 59b0a5c2b..68bee800a 100644 --- a/web/react/components/create_comment.jsx +++ b/web/react/components/create_comment.jsx @@ -108,9 +108,11 @@ module.exports = React.createClass({ handleUserInput: function(messageText) { var newPostError = this.state.postError; - if (!this.state.postError && messageText.length >= Constants.MAX_POST_LEN) { - newPostError = 'Message length cannot exceed 4000 characters'; - } else if (this.state.postError === 'Message length cannot exceed 4000 characters' && messageText.length < Constants.MAX_POST_LEN) { + var len = utils.getLengthOfTextInTextarea(messageText); + + if (!this.state.postError && len >= Constants.MAX_POST_LEN) { + newPostError = 'Comment length cannot exceed 4000 characters'; + } else if (this.state.postError === 'Comment length cannot exceed 4000 characters' && len < Constants.MAX_POST_LEN) { newPostError = ''; } diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index 242513d07..387149b14 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -134,9 +134,11 @@ module.exports = React.createClass({ handleUserInput: function(messageText) { var newPostError = this.state.postError; - if (!this.state.postError && messageText.length >= Constants.MAX_POST_LEN) { + var len = utils.getLengthOfTextInTextarea(messageText); + + if (!this.state.postError && len >= Constants.MAX_POST_LEN) { newPostError = 'Message length cannot exceed 4000 characters'; - } else if (this.state.postError === 'Message length cannot exceed 4000 characters' && messageText.length < Constants.MAX_POST_LEN) { + } else if (this.state.postError === 'Message length cannot exceed 4000 characters' && len < Constants.MAX_POST_LEN) { newPostError = ''; } diff --git a/web/react/components/edit_post_modal.jsx b/web/react/components/edit_post_modal.jsx index 2dce889f8..39d058f30 100644 --- a/web/react/components/edit_post_modal.jsx +++ b/web/react/components/edit_post_modal.jsx @@ -4,6 +4,7 @@ var Client = require('../utils/client.jsx'); var AsyncClient = require('../utils/async_client.jsx'); var Constants = require('../utils/constants.jsx'); +var utils = require('../utils/utils.jsx'); var Textbox = require('./textbox.jsx'); var BrowserStore = require('../stores/browser_store.jsx'); @@ -40,9 +41,11 @@ module.exports = React.createClass({ handleEditInput: function(editText) { var newError = this.state.error; - if (!this.state.error && editText.length >= Constants.MAX_POST_LEN) { - newError = 'Message length cannot exceed 4000 characters'; - } else if (this.state.error === 'Message length cannot exceed 4000 characters' && editText.length < Constants.MAX_POST_LEN) { + var len = utils.getLengthOfTextInTextarea(editText); + + if (!this.state.error && len >= Constants.MAX_POST_LEN) { + newError = 'New message length cannot exceed 4000 characters'; + } else if (this.state.error === 'New message length cannot exceed 4000 characters' && len < Constants.MAX_POST_LEN) { newError = ''; } diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index f718f7435..33c103c2e 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -1004,6 +1004,34 @@ module.exports.isBrowserFirefox = function() { return navigator && navigator.userAgent && navigator.userAgent.toLowerCase().indexOf('firefox') > -1; }; +// Checks if browser is IE10 or IE11 +module.exports.isBrowserIE = function() { + if (window.navigator && window.navigator.userAgent) { + var ua = window.navigator.userAgent; + + return ua.indexOf('Trident/7.0') > 0 || ua.indexOf('Trident/6.0') > 0; + } + + return false; +}; + +module.exports.isBrowserEdge = function() { + return window.naviagtor && navigator.userAgent && navigator.userAgent.toLowerCase().indexOf('edge') > -1; +}; + +// Gets text length consistent with maxlength property of textarea html tag +module.exports.getLengthOfTextInTextarea = function(messageText) { + // Need to get length with carriage returns counting as two characters to match textbox maxlength behavior + // unless ie10/ie11/edge which already do + + var len = messageText.length; + if (!module.exports.isBrowserIE() && !module.exports.isBrowserEdge()) { + len = messageText.replace(/\r(?!\n)|\n(?!\r)/g, '--').length; + } + + return len; +}; + // Used to get the id of the other user from a DM channel module.exports.getUserIdFromChannelName = function(channel) { var ids = channel.name.split('__'); -- cgit v1.2.3-1-g7c22