[4.0] Implement char counter for input field, too

build/build-modules-js/init/patches.es6.js

@@ -27,7 +27,11 @@ module.exports.patchPackages = async (options) => {
   dest = join(mediaVendorPath, 'short-and-sweet');
   const shortandsweetPath = `${dest}/${options.settings.vendors['short-and-sweet'].js['dist/short-and-sweet.min.js']}`;
   let ShortandsweetJs = await readFile(shortandsweetPath, { encoding: 'utf8' });
-  ShortandsweetJs = ShortandsweetJs.concat('shortAndSweet(\'textarea.charcount\', {counterClassName: \'small text-muted\'});');
+  ShortandsweetJs = ShortandsweetJs.concat(`
+    shortAndSweet('textarea.charcount,input.charcount', {counterClassName: 'small text-muted'});
+    /** Repeatable */
+    document.addEventListener("joomla:updated", (event) => [].slice.call(event.target.querySelectorAll('textarea.charcount,input.charcount)).map((el) => shortAndSweet(el, {counterClassName: 'small text-muted'})));
+  `);
   await writeFile(shortandsweetPath, ShortandsweetJs, { encoding: 'utf8', mode: 0o644 });
 
   // Patch the Font Awesome math.div sass deprecations

layouts/joomla/form/field/text.php

@@ -10,6 +10,7 @@
 
 defined('_JEXEC') or die;
 
+use Joomla\CMS\Factory;
 use Joomla\CMS\Language\Text;
 
 extract($displayData);
@@ -50,6 +51,7 @@
  * @var   string   $dirname         The directory name
  * @var   string   $addonBefore     The text to use in a bootstrap input group prepend
  * @var   string   $addonAfter      The text to use in a bootstrap input group append
+ * @var   boolean  $charcounter     Does this field support a character counter?
  */
 
 $list = '';
@@ -58,8 +60,23 @@
     $list = 'list="' . $id . '_datalist"';
 }
 
+$charcounterclass = '';
+
+if ($charcounter) {
+    // Load the js file
+    /** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
+    $wa = Factory::getApplication()->getDocument()->getWebAssetManager();
+    $wa->useScript('short-and-sweet');
+
+    // Set the css class to be used as the trigger
+    $charcounterclass = ' charcount';
+
+    // Set the text
+    $counterlabel = 'data-counter-label="' . $this->escape(Text::_('JFIELD_META_DESCRIPTION_COUNTER')) . '"';
+}
+
 $attributes = array(
-    !empty($class) ? 'class="form-control ' . $class . '"' : 'class="form-control"',
+    !empty($class) ? 'class="form-control ' . $class . $charcounterclass . '"' : 'class="form-control' . $charcounterclass . '"',
     !empty($size) ? 'size="' . $size . '"' : '',
     !empty($description) ? 'aria-describedby="' . ($id ?: $name) . '-desc"' : '',
     $disabled ? 'disabled' : '',
@@ -74,6 +91,7 @@
     $autofocus ? ' autofocus' : '',
     $spellcheck ? '' : 'spellcheck="false"',
     !empty($inputmode) ? $inputmode : '',
+    !empty($counterlabel) ? $counterlabel : '',
     !empty($pattern) ? 'pattern="' . $pattern . '"' : '',
 
     // @TODO add a proper string here!!!

libraries/src/Form/Field/TextField.php

@@ -41,6 +41,14 @@ class TextField extends FormField
      */
     protected $maxLength;
 
+    /**
+     * Does this field support a character counter?
+     *
+     * @var    boolean
+     * @since  __DEPLOY_VERSION__
+     */
+    protected $charcounter = false;
+
     /**
      * The mode of input associated with the field.
      *
@@ -98,6 +106,7 @@ public function __get($name)
             case 'addonBefore':
             case 'addonAfter':
             case 'inputmode':
+            case 'charcounter':
                 return $this->$name;
         }
 
@@ -138,6 +147,10 @@ public function __set($name, $value)
                 $this->addonAfter = (string) $value;
                 break;
 
+            case 'charcounter':
+                $this->charcounter = strtolower($value) === 'true';
+                break;
+
             default:
                 parent::__set($name, $value);
         }
@@ -184,6 +197,7 @@ public function setup(\SimpleXMLElement $element, $value, $group = null)
             $this->dirname = $dirname ? $this->getName($this->fieldname . '_dir') : false;
 
             $this->maxLength = (int) $this->element['maxlength'];
+            $this->charcounter = isset($this->element['charcounter']) ? strtolower($this->element['charcounter']) === 'true' : false;
 
             $this->addonBefore = (string) $this->element['addonBefore'];
             $this->addonAfter  = (string) $this->element['addonAfter'];
@@ -291,6 +305,7 @@ protected function getLayoutData()
             'addonBefore' => $this->addonBefore,
             'addonAfter'  => $this->addonAfter,
             'options'     => $options,
+            'charcounter' => $this->charcounter,
         );
 
         return array_merge($data, $extraData);