From e6744d17b69dcabcd19d2559e64613835bbbd03b Mon Sep 17 00:00:00 2001
From: Sven Reichel <github-sr@hotmail.com>
Date: Mon, 16 Jan 2023 10:44:49 +0100
Subject: [PATCH 1/3] Added counter for input fields with maximum-length
 attribute

---
 .../default/default/layout/admin.xml          | 20 ++++++++++
 js/mage/adminhtml/input-counter.js            | 40 +++++++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 js/mage/adminhtml/input-counter.js

diff --git a/app/design/adminhtml/default/default/layout/admin.xml b/app/design/adminhtml/default/default/layout/admin.xml
index 4abf96d925a..ffaaa7bd082 100644
--- a/app/design/adminhtml/default/default/layout/admin.xml
+++ b/app/design/adminhtml/default/default/layout/admin.xml
@@ -21,6 +21,14 @@
 -->
 
 <layout>
+    <adminhtml_input_counter_handle>
+        <reference name="head">
+            <action method="addJs">
+                <script>mage/adminhtml/input-counter.js</script>
+            </action>
+        </reference>
+    </adminhtml_input_counter_handle>
+
     <!-- admin acl users edit page -->
     <adminhtml_permissions_user_edit>
         <reference name="left">
@@ -87,4 +95,16 @@
             <block type="adminhtml/cache_additional" name="cache.additional" template="system/cache/additional.phtml"></block>
         </reference>
     </adminhtml_cache_index>
+
+    <adminhtml_catalog_product_attribute_edit>
+        <update handle="adminhtml_input_counter_handle"/>
+    </adminhtml_catalog_product_attribute_edit>
+
+    <adminhtml_catalog_product_edit>
+        <update handle="adminhtml_input_counter_handle"/>
+    </adminhtml_catalog_product_edit>
+
+    <adminhtml_system_config_edit>
+        <update handle="adminhtml_input_counter_handle"/>
+    </adminhtml_system_config_edit>
 </layout>
diff --git a/js/mage/adminhtml/input-counter.js b/js/mage/adminhtml/input-counter.js
new file mode 100644
index 00000000000..cf6affd2cc3
--- /dev/null
+++ b/js/mage/adminhtml/input-counter.js
@@ -0,0 +1,40 @@
+// https://stackoverflow.com/a/44436408/5703627
+document.observe('dom:loaded', function() {
+    Element.addMethods({
+        // setup once, memoize the counter element and maxLen
+        prepare_for_countdown: function(element) {
+            var elm = $(element);
+            // even if you call it multiple times, it only works once
+            if(!elm.retrieve('counter')) {
+                var counter = new Element('span');
+                elm.next('.note').insert(counter);
+                elm.store('counter', counter);
+                var maxLen = elm.className.match(/maximum-length-(\d+)/)[1];
+                elm.store('maxLen', maxLen);
+            }
+            return elm; // so you can chain
+        },
+        // display the value, run once at load and on each observed keyup
+        countdown: function(element) {
+            var elm = $(element);
+            var curLen = elm.getValue().length;
+            var maxLen = elm.retrieve('maxLen');
+            var count  = maxLen - curLen;
+            var counter = elm.retrieve('counter');
+            if (curLen >= maxLen) {
+                counter.update(' (' + count + ')').setStyle({'color': 'red'});
+            } else {
+                counter.update(' (+' + count + ')').setStyle({'color': 'green'});
+            }
+            return elm;
+        }
+    });
+
+    // run setup and call countdown once outside of listener to initialize
+    $$('.validate-length').invoke('prepare_for_countdown').invoke('countdown');
+
+    // deferred listener, only responds to keyups that issue from a matching element
+    document.on('keyup', '.validate-length', function(evt, elm) {
+        elm.countdown();
+    });
+});

From 927bcfd0e8215b47cc343ed66f73fd5ecba75ab2 Mon Sep 17 00:00:00 2001
From: Sven Reichel <github-sr@hotmail.com>
Date: Mon, 16 Jan 2023 23:07:11 +0100
Subject: [PATCH 2/3] Update

---
 js/mage/adminhtml/input-counter.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/js/mage/adminhtml/input-counter.js b/js/mage/adminhtml/input-counter.js
index cf6affd2cc3..da6bf07ee3e 100644
--- a/js/mage/adminhtml/input-counter.js
+++ b/js/mage/adminhtml/input-counter.js
@@ -21,10 +21,11 @@ document.observe('dom:loaded', function() {
             var maxLen = elm.retrieve('maxLen');
             var count  = maxLen - curLen;
             var counter = elm.retrieve('counter');
-            if (curLen >= maxLen) {
-                counter.update(' (' + count + ')').setStyle({'color': 'red'});
+            counter.update(' (' + curLen + '/' + maxLen + ')');
+            if (curLen > maxLen) {
+                counter.setStyle({'color': 'red'});
             } else {
-                counter.update(' (+' + count + ')').setStyle({'color': 'green'});
+                counter.setStyle({'color': 'inherit'});
             }
             return elm;
         }

From 04d69f353f52071b0d5fc6085cd42d883750c32d Mon Sep 17 00:00:00 2001
From: Sven Reichel <github-sr@hotmail.com>
Date: Wed, 18 Jan 2023 02:10:06 +0100
Subject: [PATCH 3/3] Update js/mage/adminhtml/input-counter.js

Co-authored-by: Ng Kiat Siong <kiatsiong.ng@gmail.com>
---
 js/mage/adminhtml/input-counter.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/mage/adminhtml/input-counter.js b/js/mage/adminhtml/input-counter.js
index da6bf07ee3e..aa74e3ffabd 100644
--- a/js/mage/adminhtml/input-counter.js
+++ b/js/mage/adminhtml/input-counter.js
@@ -1,7 +1,7 @@
 // https://stackoverflow.com/a/44436408/5703627
 document.observe('dom:loaded', function() {
     Element.addMethods({
-        // setup once, memoize the counter element and maxLen
+        // setup once, memorize the counter element and maxLen
         prepare_for_countdown: function(element) {
             var elm = $(element);
             // even if you call it multiple times, it only works once