Added counter for input fields with maximum-length attribute (#2950)

Author: sreichel

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>

js/mage/adminhtml/input-counter.js

@@ -0,0 +1,41 @@
+// https://stackoverflow.com/a/44436408/5703627
+document.observe('dom:loaded', function() {
+    Element.addMethods({
+        // 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
+            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');
+            counter.update(' (' + curLen + '/' + maxLen + ')');
+            if (curLen > maxLen) {
+                counter.setStyle({'color': 'red'});
+            } else {
+                counter.setStyle({'color': 'inherit'});
+            }
+            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();
+    });
+});