From b78b221e32990df7823b355bc988981e413a3905 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Mon, 7 Jun 2021 17:00:19 +0200
Subject: [PATCH] Add characters count and limit to textarea questions

---
 www/form/inner.js | 38 +++++++++++++++++++++++++++++++-------
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/www/form/inner.js b/www/form/inner.js
index 2acedba23..cda2fbfd8 100644
--- a/www/form/inner.js
+++ b/www/form/inner.js
@@ -111,6 +111,7 @@ define([
 
     Messages.form_duplicates = "Duplicate entries have been removed";
     Messages.form_maxOptions = "{0} answer(s) max";
+    Messages.form_maxLength = "Characters limit: {0}/{1}";
 
     Messages.form_submit = "Submit";
     Messages.form_update = "Update";
@@ -922,23 +923,46 @@ define([
             },
             get: function (opts, a, n, evOnChange) {
                 if (!opts) { opts = TYPES.textarea.defaultOpts; }
-                var tag = h('textarea', {maxlength: opts.maxLength});
-                var $tag = $(tag);
-                $tag.on('change keypress', Util.throttle(function () {
+                var text = h('textarea', {maxlength: opts.maxLength});
+                var $text = $(text);
+                var charCount = h('div.cp-form-type-textarea-charcount');
+                var updateChar = function () {
+                    var l = $text.val().length;
+                    if (l > opts.maxLength) {
+                        $text.val($text.val().slice(0, opts.maxLength));
+                        l = $text.val().length;
+                    }
+                    $(charCount).text(Messages._getKey('form_maxLength', [
+                        $text.val().length,
+                        opts.maxLength
+                    ]));
+                };
+                updateChar();
+                var tag = h('div.cp-form-type-textarea', [
+                    text,
+                    charCount
+                ]);
+
+                var evChange = Util.throttle(function () {
                     evOnChange.fire();
-                }, 500));
+                }, 500);
+
+                $text.on('change keypress', function () {
+                    setTimeout(updateChar);
+                    evChange();
+                });
                 var cursorGetter;
                 var setCursorGetter = function (f) { cursorGetter = f; };
                 return {
                     tag: tag,
-                    getValue: function () { return $tag.val(); },
-                    setValue: function (val) { $tag.val(val); },
+                    getValue: function () { return $text.val().slice(0, opts.maxLength); },
+                    setValue: function (val) { $text.val(val); },
                     edit: function (cb, tmp) {
                         var v = Util.clone(opts);
                         return editTextOptions(v, setCursorGetter, cb, tmp);
                     },
                     getCursor: function () { return cursorGetter(); },
-                    reset: function () { $tag.val(''); }
+                    reset: function () { $text.val(''); }
                 };
             },
             printResults: function (answers, uid) {