From 29fb98759e4ff0f8043d995c1655a887b4538fa2 Mon Sep 17 00:00:00 2001
From: Erik Sommer <Erik.Sommer@slub-dresden.de>
Date: Thu, 16 Jul 2020 13:13:52 +0200
Subject: [PATCH] Add visible character count info and limit (#187)

* Add character count markup to textareas

* Add logic to determine character limit breaks

* Add styling to character count information

* Add character count JS to backend
  The backend already has text in the fields so the count should be set earlier. I changed this for the frontend as well to keep it consistent.
---
 .../Private/Partials/DocumentForm/Field.html  |  4 +++
 Resources/Public/CSS/qucosa.css               | 23 ++++++++++++
 Resources/Public/JavaScript/QucosaBe.js       | 31 ++++++++++++++++
 Resources/Public/JavaScript/qucosa.js         | 35 +++++++++++++++++++
 4 files changed, 93 insertions(+)

diff --git a/Resources/Private/Partials/DocumentForm/Field.html b/Resources/Private/Partials/DocumentForm/Field.html
index 11d88ec60..512590138 100644
--- a/Resources/Private/Partials/DocumentForm/Field.html
+++ b/Resources/Private/Partials/DocumentForm/Field.html
@@ -83,6 +83,10 @@
                              property="metadata.{formPageUid}-{formGroupUid}-{groupIndex}-{fieldItem.uid}-{fieldIndex}"
                              value="{fieldItem.value}" class="input-field form-control {fieldItem.fillOutService}"
                              additionalAttributes="{data-field:fieldItem.uid,data-index:fieldIndex,data-mandatory:fieldItem.mandatory,data-group:formGroupUid,data-groupindex:groupIndex,data-default:fieldItem.hasDefaultValue,data-regexp:fieldItem.validation,data-datatype:fieldItem.dataType,data-label:fieldItem.displayName,data-maxlength:fieldItem.maxInputLength}"/>
+             <f:if condition="{fieldItem.maxInputLength}">
+                 <div class="countwrapper"><span class="count">0</span>/<span class="limit">{fieldItem.maxInputLength}</span></div>
+             </f:if>
+
         </f:case>
         <f:case value="2">
             <div class="form-control has-select {f:if(condition: '{fieldItem.maxIteration} == 0', then: 'has-button', else: '')}">
diff --git a/Resources/Public/CSS/qucosa.css b/Resources/Public/CSS/qucosa.css
index 496ee94a9..c23ef53ea 100644
--- a/Resources/Public/CSS/qucosa.css
+++ b/Resources/Public/CSS/qucosa.css
@@ -142,6 +142,7 @@
 .tx-dpf .form-group {
     position: relative;
     display: table;
+    background: #eee;
 }
 
 .tx-dpf .fe-form-group {
@@ -258,6 +259,28 @@
     min-height: 220px;
 }
 
+.tx-dpf .countwrapper {
+  border: solid #ccc;
+  border-width: 0px 1px 1px 0px;
+  text-align: right;
+  padding: 5px 8px;
+  margin-top: -7px;
+}
+
+.tx-dpf .countwrapper .count {
+  color: green;
+}
+
+.tx-dpf .countwrapper .count.limit {
+  color: darkorange;
+  font-weight: bold;
+}
+
+.tx-dpf .countwrapper .count.limitbreak {
+  color: red;
+  font-weight: bold;
+}
+
 .tx-dpf .fs_file_group .form-control-static {
     margin-bottom: 15px;
 }
diff --git a/Resources/Public/JavaScript/QucosaBe.js b/Resources/Public/JavaScript/QucosaBe.js
index 8d8f23644..f9014ffb1 100644
--- a/Resources/Public/JavaScript/QucosaBe.js
+++ b/Resources/Public/JavaScript/QucosaBe.js
@@ -38,6 +38,36 @@ define(['jquery', 'TYPO3/CMS/Dpf/jquery-ui','twbs/bootstrap-datetimepicker'], fu
         });
     }
 
+    var initTextareaLimit = function(){
+
+        $(".tx-dpf textarea").each(function(){
+            var count = $(this).siblings("div.countwrapper").find(".count");
+            count.html($(this).val().length);
+
+            $(this).bind("focus change keyup paste", function() {
+                var limit = $(this).attr('data-maxlength');
+                var difference = limit - $(this).val().length;
+
+                count.html($(this).val().length);
+                count.removeClass("limit limitbreak");
+
+                if(difference >= 100) {
+                    return;
+                }
+
+                if (difference < 100 && difference >= 0) {
+                    count.addClass("limit");
+                    return;
+                }
+
+                if (difference < 0){
+                    count.addClass("limitbreak");
+                    return;
+                }
+            });
+        });
+    }
+
     var buttonFillOutServiceUrn = function() {
         $('input.urn').each(function() {
             var fieldUid = $(this).attr('data-field');
@@ -661,6 +691,7 @@ define(['jquery', 'TYPO3/CMS/Dpf/jquery-ui','twbs/bootstrap-datetimepicker'], fu
         documentListConfirmDialog('#confirmTemplate');
 
         datepicker();
+        initTextareaLimit();
 
         $('[data-toggle="tooltip"]').tooltip();
         var $disableForm = $('form[data-disabled]').attr('data-disabled');
diff --git a/Resources/Public/JavaScript/qucosa.js b/Resources/Public/JavaScript/qucosa.js
index c8484720e..6395527f1 100644
--- a/Resources/Public/JavaScript/qucosa.js
+++ b/Resources/Public/JavaScript/qucosa.js
@@ -20,6 +20,7 @@ $(document).ready(function() {
     documentListConfirmDialog('#confirmRestore');
     documentListConfirmDialog('#confirmDelete');
     datepicker();
+    initTextareaLimit();
     jQuery('[data-toggle="tooltip"]').tooltip();
     var $disableForm = jQuery('form[data-disabled]').attr('data-disabled');
     if ($disableForm) {
@@ -487,6 +488,40 @@ var datepicker = function() {
         }
     });
 }
+
+var initTextareaLimit = function(){
+
+    $(".tx-dpf textarea").each(function() {
+
+        var count = $(this).siblings("div.countwrapper").find(".count");
+        count.html($(this).val().length);
+
+        $(this).bind("focus change keyup paste", function() {
+            var limit = $(this).attr('data-maxlength');
+            var difference = limit - $(this).val().length;
+
+            var count = $(this).siblings("div.countwrapper").find(".count");
+
+            count.html($(this).val().length);
+            count.removeClass("limit limitbreak");
+
+            if(difference >= 100) {
+                 return;
+            }
+
+            if (difference < 100 && difference >= 0) {
+                 count.addClass("limit");
+                 return;
+            }
+
+            if (difference < 0){
+                count.addClass("limitbreak");
+                return;
+            }
+        });
+    });
+}
+
 var isDate = function(value) {
     if (value == '') return false;
     var rxDatePattern = /^(\d{1,2})(\.)(\d{1,2})(\.)(\d{4})$/; //Declare Regex