2
\$\begingroup\$

This class creates dynamic input labels. You give it a pair of elements and it sets up the event listeners and CSS toggles to accomplish this.

Looking for feedback on code structure and correctness.

Toggle classes do what they say, they toggle one class on and another class off.

/***************************************************************************************************
**SDynInput - provides dynamic input for labels and borders
*/
    var SDynInput = $A.Class.create({
        Name: 'SDynInput',
        A: {

            // CSS classes used to toggle the label
            toggle_label_hide:       'toggle_label_hide',
            toggle_label_obscure:    'toggle_label_obscure',
            toggle_label_show:       'toggle_label_show',

            // CSS classes used to toggle the border
            toggle_border_hide:      'toggle_border_hide',
            toggle_border_obscure:   'toggle_border_obscure',
            toggle_border_show:      'toggle_border_show',

            // speed of label expanding
            speed:                   200
        },

        // elements are passed in as input/label pairs
        set: function (pair_array) {
            var index;
            for (index = 0; index < pair_array.length; index += 2) {
                this.applyEL(pair_array[index], pair_array[index + 1]);
            }
        },

        // apply event listeners to the input elements
        applyEL: function (input_element, label_element) {
            var self = this;
            input_element.addEventListener("blur", function () {
                if (input_element.value === '') {
                    $A.addClass(input_element, self.A.toggle_border_show);
                    $A.addClass(label_element, self.A.toggle_label_show);
                    $A.expandFont(label_element, 'up', self.A.speed);
                }
            }, false);
            input_element.addEventListener("focus", function () {
                if (input_element.value === '') {
                    $A.addClass(input_element, self.A.toggle_border_obscure);
                    $A.addClass(label_element, self.A.toggle_label_obscure);
                }
            }, false);
            input_element.addEventListener("paste", function () {
                $A.addClass(label_element, self.A.toggle_label_hide);
                $A.addClass(input_element, self.A.toggle_border_hide);
            }, false);
            input_element.addEventListener("keypress", function () {
                $A.addClass(label_element, self.A.toggle_label_hide);
                $A.addClass(input_element, self.A.toggle_border_hide);
            }, false);
            input_element.addEventListener("drop", function () {
                $A.setTimeout(function () {
                    $A.addClass(label_element, self.A.toggle_label_hide);
                    $A.addClass(input_element, self.A.toggle_border_hide);
                }, 0);
            }, false);
        }
    }, true);
\$\endgroup\$

1 Answer 1

3
\$\begingroup\$

The code is not bad;

  • Quite configurable
  • Helper functions

However,

  • There is quite a bit of copy paste code
  • Placing the style classes in self.A. makes for verbose code
  • The css classes themselves are lengthy as well
  • onBlur keeps making the font larger, but focus does not make the font smaller, which could cause comically large labels
  • applyEL -> applyEventListeners reads/parses better

This could be done instead:

/*****************************************************************************************
 **SDynInput - provides dynamic input for labels and borders
 */
var SDynInput = $A.Class.create({
    Name: 'SDynInput',
    // elements are passed in as input/label pairs
    set: function (inputLabelPairs) {
        var index;
        for (index = 0; index < inputLabelPairs.length; index += 2) {
            this.applyEventListeners(inputLabelPairs[index], inputLabelPairs[index + 1]);
        }
    },
    // apply event listeners to the input elements
    applyEventListeners: function (input, label) {
        var self = this,
            labelSpeed = 200,
            // CSS classes used to toggle the label
            hideLabel = 'toggle_label_hide',
            obscureLabel = 'toggle_label_obscure',
            showLabel = 'toggle_label_show',
            // CSS classes used to toggle the input border
            hideBorder = 'toggle_border_hide',
            obscureBorder = 'toggle_border_obscure',
            showBorder = 'toggle_border_show',
            applyClasses = function (inputClass, labelClass) {
                $A.addClass(input, inputClass);
                $A.addClass(label, labelClass);
            },
            applyHidingClasses = function () {
                applyClasses(hideBorder, hideLabel);
            };
        input.addEventListener("blur", function () {
            if (input.value === '') {
                applyClasses(borderShow, labelShow);
                $A.expandFont(label, 'up', labelSpeed);
            }
        }, false);
        input.addEventListener("focus", function () {
            if (input.value === '') {
                applyClasses(borderObscure, labelObscure);
            }
        }, false);
        input.addEventListener("paste", applyHidingClasses false);
        input.addEventListener("keypress", applyHidingClasses, false);
        input.addEventListener("drop", function () {
            $A.setTimeout(applyHidingClasses, 0);
        }, false);
    }
}, true);
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.