Added counter for input fields with maximum-length attribute

[sreichel]

Description (*)

Adds js-snippet to ...

• admin product edit page
• admin product attributes edit page
• admin config section

... to show how many chars are left for valid input.

Note: requires validate-length and maximum-length-XXX attribute

Contribution checklist (*)

• Pull request has a meaningful description of its purpose
• All commits are accompanied by meaningful commit messages
• All automated tests passed successfully (all builds are green)
• Add yourself to contributors list

[justinbeaty]

Nice quality of life feature! My only suggestion is to style it like this, which I think is more standard UI.

        // 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;
        }

I also changed the conditional to just > instead of >= because I was allowed to save an attribute with code with exactly 30 characters, despite the note: "Maximum length of attribute code must be less then 30 symbols" (unrelated, there's also a typo there, should be "than").

[fballiano]

merged and v20ed

[luigifab]

This create a bug: document.observe('dom:loaded',
This is a prototype way, if you merge and minify all js files in one, this will crash:
Uncaught TypeError: document.observe is not a function

(okay I got this with a custom module...)

[fballiano]

@luigifab if you change that line with Event.observe(window, 'load', function() { does it work?

[sreichel]

Changing to Event.observe(window, 'load', function() { works for me w/ merged JS files too.

@luigifab PR ready if confirmed.

[luigifab]

No, but with window.addEventListener('load', function() { it's ok, and it works on new product attribute page.