Bug #1588608: Check message length on the fly for textarea elements

Added a behat test - Robert

Change-Id: I67dd8f5e144d2bfbee2f71c5c3d7c9ac640fa206

htdocs/js/mahara.js

@@ -31,7 +31,7 @@ function get_string(s) {
         str = str[index];
     }
     var i = 0;
-    return str.replace(/%((%)|s)/g, function (m) { return m[2] || args[i++]; });
+    return str.replace(/%((%)|s|d)/g, function (m) { return m[2] || args[i++]; });
 }
 
 /**

htdocs/js/textareamaxlengthchecker.js

+/**
+ * Check form elements maxlength attribute and display relevant error.
+ *
+ * @package    mahara
+ * @subpackage core
+ * @author     Catalyst IT Ltd
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL version 3 or later
+ * @copyright  For copyright information on Mahara, please see the README file distributed with this software.
+ *
+ */
+
+jQuery(document).ready(function() {
+    jQuery(this).find('textarea').each(function(i, textarea) {
+        var textarea = jQuery(textarea);
+        var maxlength = textarea.attr('maxlength');
+        var elementName = textarea.attr('id');
+        var isWysiwyg = textarea.hasClass('wysiwyg');
+
+        // Fields used for tinymce wysiwyg will be ignored here.
+        // Please have a look at setup part of tinymce initialisation in web.php
+        if (isElementDefined(maxlength) && isWysiwyg == false) {
+            textarea.removeAttr('maxlength');
+            textarea.on('keyup keypress paste', function () {
+                checkTextareaMaxLength(elementName, isWysiwyg, maxlength);
+            });
+        }
+    });
+});
+
+/*
+ * Check if an element is defined.
+ */
+function isElementDefined(element) {
+    if (typeof element !== typeof undefined) {
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+
+/*
+ * Check maxlength of the text area and add/remove error message.
+ */
+function checkTextareaMaxLength(elementName, isWysiwyg, maxlength) {
+    var textareaId = '#' + elementName;
+    var textarea = jQuery(textareaId);
+    var textareaContainerId = '#' + elementName + '_container';
+    var textareaContainer = jQuery(textareaContainerId);
+    var errorClass = "errmsg";
+
+    isWysiwyg = typeof isWysiwyg !== 'undefined' ? isWysiwyg : true;
+    maxlength = typeof maxlength !== 'undefined' ? maxlength : textarea.attr('maxlength');
+
+    if (isElementDefined(maxlength)) {
+
+        var triggerLimit = parseInt(maxlength) + 1;
+        var errorMessage = get_string('rule.maxlength.maxlength', maxlength);
+        var errorElementsInContainer = textareaContainer.find('.' + errorClass);
+        var isElementsHasError = errorElementsInContainer.hasClass(errorClass);
+
+        if (isWysiwyg == true) {
+            var body = tinymce.get(elementName).getBody();
+            var content = tinymce.trim(body.innerText || body.textContent);
+            var textLength = content.length;
+            var htmlLength = body.innerHTML.length;
+        }
+        else {
+             var textLength = htmlLength = parseInt(textarea.val().length);
+        }
+
+        var charactersLeft = triggerLimit - htmlLength;
+
+        // If a user typed more than the limit and there is no error message related
+        // to the field, then set the error.
+        if (charactersLeft <= 0 && isElementsHasError == false && textLength > 0) {
+            textarea.addClass('error');
+            textareaContainer.addClass('has-error');
+            textareaContainer.append(function() {
+                return jQuery('<div></div>').text(errorMessage).attr('class', errorClass);
+            });
+        }
+
+        // If a user removed characters and now the number of them is less than limit,
+        // then remove the error.
+        if (charactersLeft > 0 && isElementsHasError == true || textLength <= 0) {
+            errorElementsInContainer.remove();
+            textarea.removeClass('error');
+            textareaContainer.removeClass('has-error');
+        }
+    }
+}

htdocs/lib/form/elements/wysiwyg.php

@@ -69,7 +69,7 @@ function pieform_element_wysiwyg(Pieform $form, $element) {
     return '<textarea'
         . (($rows) ? ' rows="' . $rows . '"' : '')
         . (($cols) ? ' cols="' . $cols . '"' : '')
-        . $form->element_attributes($element, array('maxlength', 'size'))
+        . $form->element_attributes($element, array('size'))
         . '>' . $value . '</textarea>';
 }
 

htdocs/lib/pieforms/pieform/elements/textarea.php

@@ -69,7 +69,7 @@ function pieform_element_textarea(Pieform $form, $element) {/*{{{*/
     return '<textarea'
         . (($rows) ? ' rows="' . $rows . '"' : '')
         . (($cols) ? ' cols="' . $cols . '"' : '')
-        . $form->element_attributes($element, array('maxlength', 'size'))
+        . $form->element_attributes($element, array('size'))
         . '>' . Pieform::hsc($form->get_value($element)) . '</textarea>';
 }/*}}}*/
 

htdocs/lib/web.php

@@ -318,6 +318,9 @@ tinyMCE.init({
                 ed.focus();
             }
         });
+        ed.on('keyup change', function (e) {
+            checkTextareaMaxLength(ed.settings.id);
+        });
         ed.on('LoadContent', function(e) {
             // Hide all the 2nd/3rd row menu buttons
             jQuery('.mce-toolbar.mce-first').siblings().toggleClass('hidden');
@@ -514,6 +517,7 @@ EOF;
 
     $javascript_array[] = $jsroot . 'mahara.js';
     $javascript_array[] = $jsroot . 'formchangechecker.js';
+    $javascript_array[] = $jsroot . 'textareamaxlengthchecker.js';
 
     foreach ($jsstrings['mahara'] as $section => $tags) {
         foreach ($tags as $tag) {
@@ -1326,7 +1330,8 @@ function jsstrings() {
                 'imagexofy',
             ),
             'pieforms' => array(
-                'element.calendar.opendatepicker'
+                'element.calendar.opendatepicker',
+                'rule.maxlength.maxlength'
             )
         ),
         'tablerenderer' => array(

test/behat/features/messages/send_multiple_messages.feature

@@ -39,6 +39,15 @@ Scenario: Sending messages between user and admin (Bug 1426983)
    | Subject   | Hi there3 |
    | Message   | This is a test message3   |
    And I press "Send message"
+   And I choose "Find friends" in "Groups"
+   And I follow "Bob"
+   And I follow "Request friendship"
+   And I fill in the following:
+   | Message   | I shot an arrow into the air, it fell to earth, I knew not where; For, so swiftly it flew, the sight could not follow it in its flight. Long, long afterward, in an oak I found the arrow, still unbroke; And the song, from beginning to end, I found again in the heart of a friend. |
+   Then I should see "This field must be at most 255 characters long"
+   And I fill in the following:
+   | Message   | Written with a pen, sealed with a kiss, if you are my friend, please answer me this |
+   And I press "Request friendship"
    # Log out as "Admin" user
    And I follow "Logout"
    # Log in as user 1