Merge pull request #272 from City-of-Helsinki/UHF-9690

UHF-9690: Character counter

.nvmrc

@@ -1 +1 @@
-20.11.0
+20.11.1

hdbt_admin.theme

@@ -5,6 +5,8 @@
  * Contains HDBT Admin theme.
  */
 
+declare(strict_types=1);
+
 use Drupal\Core\Entity\EntityFormInterface;
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\Core\Language\LanguageInterface;
@@ -84,12 +86,6 @@ function _hdbt_admin_form_template_suggestions(array &$suggestions, array &$vari
   if (in_array('koro', $variables['element']['#parents'], TRUE)) {
     $suggestions[] = $variables['theme_hook_original'] . '__koro';
   }
-  if (
-    in_array('field_hero_title', $variables['element']['#parents'], TRUE) ||
-    in_array('field_hero_desc', $variables['element']['#parents'], TRUE)
-  ) {
-    $suggestions[] = $variables['theme_hook_original'] . '__character_count';
-  }
 }
 
 /**
@@ -455,34 +451,3 @@ function hdbt_admin_preprocess_field_multiple_value_form(&$variables) {
     }
   }
 }
-
-/**
- * Implements hook_preprocess_HOOK().
- */
-function hdbt_admin_preprocess_form_element(array &$variables) {
-  // Map the counter input tag, step value and total value to variables.
-  $counter_elements = [
-    'field_hero_title' => [
-      'counter_input_tag' => 'input',
-      'counter_step' => 0,
-      'counter_total' => 55,
-    ],
-    'field_hero_desc' => [
-      'counter_input_tag' => 'textarea',
-      'counter_step' => 160,
-      'counter_total' => 200,
-    ],
-  ];
-
-  // Set the mapped values to corresponding fields.
-  foreach ($counter_elements as $counter_element => $counter_values) {
-    if (
-      array_key_exists('name', $variables) &&
-      str_contains($variables['name'], $counter_element)
-    ) {
-      foreach ($counter_values as $key => $value) {
-        $variables[$key] = $value;
-      }
-    }
-  }
-}

src/js/characterCounter.js

@@ -70,7 +70,7 @@
       // Get all character counter instances using once().
       const counterInstances = once('character-counter', '[data-character-counter]', context);
 
-      if (!counterInstances) {
+      if (counterInstances.length === 0) {
         return;
       }
 
@@ -110,21 +110,23 @@
             .insertAdjacentElement('afterend', counterInstance);
         }
 
+        const updateCharacterCounter = (charCount) => {
+          warningType = processWarningType(charCount, counterStepChars, counterTotalChars);
+          charCounter.textContent = characterCounter(charCount, counterTotalChars);
+          charWarning.textContent = characterWarning(warningType, counterStepChars, counterTotalChars, counterInputTag, counterWarning);
+        };
+
         // Set initial value for the character counter.
         if (textInput.value.length > 0) {
-          warningType = processWarningType(textInput.value.length, counterStepChars, counterTotalChars);
-          charCounter.textContent = characterCounter(textInput.value.length, counterTotalChars);
-          charWarning.textContent = characterWarning(warningType, counterStepChars, counterTotalChars, counterInputTag, counterWarning);
+          updateCharacterCounter(textInput.value.length);
         }
 
         // Handle input tag and textarea tags separately.
         if (counterInputTag === 'input') {
           // Add event listener to the input tag and process
           // the charCounter and charWarning.
           textInput.addEventListener('input', function () {
-            warningType = processWarningType(textInput.value.length, counterStepChars, counterTotalChars);
-            charCounter.textContent = characterCounter(textInput.value.length, counterTotalChars);
-            charWarning.textContent = characterWarning(warningType, counterStepChars, counterTotalChars, counterInputTag, counterWarning);
+            updateCharacterCounter(textInput.value.length);
           });
         } else {
           setTimeout(function () {
@@ -136,9 +138,16 @@
               const editor = ckeditorEditable.ckeditorInstance;
               editor.model.document.on('change:data', () => {
                 // Output the number of words to the counter.
-                warningType  = processWarningType(convertHtmlTags(editor.getData()), counterStepChars, counterTotalChars);
-                charCounter.textContent = characterCounter(convertHtmlTags(editor.getData()), counterTotalChars);
-                charWarning.textContent = characterWarning(warningType, counterStepChars, counterTotalChars, counterInputTag, counterWarning);
+                updateCharacterCounter(convertHtmlTags(editor.getData()));
+              });
+            }
+            // The CKEditor is not used in this textarea. Handle current text
+            // input normally.
+            else {
+              // Add event listener to the input tag and process
+              // the charCounter and charWarning.
+              textInput.addEventListener('input', function () {
+                updateCharacterCounter(textInput.value.length);
               });
             }
           });

src/scss/06_components/forms/_character-counter.scss

@@ -1,5 +1,6 @@
 .character-counter {
-  margin-top: -$spacing-quarter;
+  line-height: calc(17rem / 16);
+  margin-block: calc(6rem / 16);
 }
 
 .character-counter__count {
@@ -24,3 +25,7 @@
   color: $color-black;
   margin-inline-start: $spacing-half;
 }
+
+.form-item__description + .character-counter {
+  margin-top: -$spacing-quarter;
+}

src/scss/06_components/layout/_page.scss

@@ -35,6 +35,7 @@
   }
 
   // Hide "About text formats" link from text-area fields on node form.
+  .field--widget-formatted-text-character-counter,
   .node-form .field--widget-text-textarea {
     .form-type--textarea + .filter-wrapper {
       display: none;

templates/form/form-element--character-count.html.twig

@@ -94,6 +94,7 @@ js-form-type-[something] exists on form items. We have to keep them.
         <div class="character-counter__warning-text" data-warning-id="form-item--{{ name|clean_class }}"></div>
       </div>
       {{ attach_library('hdbt_admin/character-counter')}}
+      {{ attach_library('hdbt/hdbt-icons')}}
     </div>
   {% endif %}
 </div>