Show And Hide Labels methods added to form elements

[willf1976]

Hi All

I have been going through the classes we have developed over the last few years and sharing back with the community some of them that I think will be useful to others. These components have been tested extensively in ext-3.2.1.

One problem we have run into is the need to be able to show and hide field labels dynamically. This block of code will add this functionality to several different types of form fields using over rides.

/**
 * @author Will Ferrer, Ethan Brooks
 * @copyright (c) 2012, Intellectual Property Private Equity Group
 * @licensee 2012 developed under license for Switchsoft LLC http://www.switchsoft.com a "Direct response telephony company" as part of it's "VOIP Call distribution, ROI analysis platform, call recording, and IVR for inbound and outbound sales" and Run the Business Systems LLC a "Technology development investment group" as part of it's "PHP, Javascript rapid application development framework and MySQL analysis tools"
 * @license licensed under the terms of
 * the Open Source LGPL 3.0 license.  Commercial use is permitted to the extent
 * that the code/component(s) do NOT become part of another Open
Source or Commercially
 * licensed development library or toolkit without explicit permission.
 * <p>License details: <a href="http://www.gnu.org/licenses/lgpl.html"
 * target="_blank">http://www.gnu.org/licenses/lgpl.html</a></p>
* We are pretty nice just ask. We want to meet our licensees
*/


var showHideLabelMethods = {
    /**
     * Sets the visibility of the element label (see details). If the visibilityMode is set to Element.DISPLAY, it will use
     * the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.
     * @param {Boolean} visible Whether the element is visible
     * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
     * @return {Ext.Element} this
     */
    setLabelVisible : function(visible, animate){
        var VISIBILITY = "visibility",
            DISPLAY = "display",
            HIDDEN = "hidden",
            OFFSETS = "offsets",
            NONE = "none",
            ORIGINALDISPLAY = 'originalDisplay',
            VISMODE = 'visibilityMode',
            ELDISPLAY = Ext.Element.DISPLAY,
            data = Ext.Element.data,
            me = this, isDisplay, isVisible, isOffsets,
            dom = me.label.dom;

        // hideMode string override
        if (typeof animate == 'string'){
            isDisplay = animate == DISPLAY;
            isVisible = animate == VISIBILITY;
            isOffsets = animate == OFFSETS;
            animate = false;
        } else {
            isDisplay = me.getVisMode(this.label.dom) == ELDISPLAY;
            isVisible = !isDisplay;
        }

        if (!animate || !me.anim) {
            if (isDisplay){
                me.setLabelDisplayed(visible);
            } else if (isOffsets){
                if (!visible){
                    me.hideModeStyles = {
                        position: me.label.getStyle('position'),
                        top: me.label.getStyle('top'),
                        left: me.label.getStyle('left')
                    };

                    me.label.applyStyles({position: 'absolute', top: '-10000px', left: '-10000px'});
                } else {
                    me.label.applyStyles(me.hideModeStyles || {position: '', top: '', left: ''});
                }
            }else{
                me.fixLabelDisplay();
                dom.style.visibility = visible ? "visible" : HIDDEN;
            }
        }else{
            // closure for composites
            if (visible){
                me.label.setOpacity(.01);
                me.label.setVisible(true);
            }
            me.label.anim({opacity: { to: (visible?1:0) }},
                    me.preanim(arguments, 1),
                    null,
                    .35,
                    'easeIn',
                    function(){
                         if(!visible){
                             dom.style[isDisplay ? DISPLAY : VISIBILITY] = (isDisplay) ? NONE : HIDDEN;
                             Ext.fly(dom).setOpacity(1);
                         }
                    });
        }
        return me;
    },
    
    /**
     * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.
     * @param {Mixed} value Boolean value to display the element using its default display, or a string to set the display directly.
     * @return {Ext.Element} this
     */
    setLabelDisplayed : function(value) {
        var VISIBILITY = "visibility",
            DISPLAY = "display",
            HIDDEN = "hidden",
            OFFSETS = "offsets",
            NONE = "none",
            ORIGINALDISPLAY = 'originalDisplay',
            VISMODE = 'visibilityMode',
            ELDISPLAY = Ext.Element.DISPLAY,
            data = Ext.Element.data;
        if(typeof value == "boolean"){
           value = value ? me.label.getDisplay(this.label.dom) : NONE;
        }
        this.label.setStyle(DISPLAY, value);
        return this;
    },
    
    // private
    fixLabelDisplay : function(){
        var VISIBILITY = "visibility",
            DISPLAY = "display",
            HIDDEN = "hidden",
            OFFSETS = "offsets",
            NONE = "none",
            ORIGINALDISPLAY = 'originalDisplay',
            VISMODE = 'visibilityMode',
            ELDISPLAY = Ext.Element.DISPLAY,
            data = Ext.Element.data,
            me = this;
        if(me.label.isStyle(DISPLAY, NONE)){
            me.label.setStyle(VISIBILITY, HIDDEN);
            me.label.setStyle(DISPLAY, me.getDisplay(this.label.dom)); // first try reverting to default
            if(me.label.isStyle(DISPLAY, NONE)){ // if that fails, default to block
                me.label.setStyle(DISPLAY, "block");
            }
        }
    },
    // private legacy anim prep
    preanim : function(a, i){
        return !a[i] ? false : (typeof a[i] == 'object' ? a[i]: {duration: a[i+1], callback: a[i+2], easing: a[i+3]});
    },
    // @private
    getDisplay : function(dom){
        var VISIBILITY = "visibility",
            DISPLAY = "display",
            HIDDEN = "hidden",
            OFFSETS = "offsets",
            NONE = "none",
            ORIGINALDISPLAY = 'originalDisplay',
            VISMODE = 'visibilityMode',
            ELDISPLAY = Ext.Element.DISPLAY,
            data = Ext.Element.data,
            d = data(dom, ORIGINALDISPLAY);
        if(d === undefined){
            data(dom, ORIGINALDISPLAY, d = '');
        }
        return d;
    },
    // @private
    getVisMode : function(dom){
        var VISIBILITY = "visibility",
            DISPLAY = "display",
            HIDDEN = "hidden",
            OFFSETS = "offsets",
            NONE = "none",
            ORIGINALDISPLAY = 'originalDisplay',
            VISMODE = 'visibilityMode',
            ELDISPLAY = Ext.Element.DISPLAY,
            data = Ext.Element.data,
            m = data(dom, VISMODE);
        if(m === undefined){
            data(dom, VISMODE, m = 1);
        }
        return m;
    }
};

// Add more overrides here to add this functionality to more types of fields:

Ext.override(Ext.form.TextField, showHideLabelMethods);
Ext.override(Ext.ux.Spinner, showHideLabelMethods);
Ext.override(Ext.ux.form.DaysSpinnerField, showHideLabelMethods);

Best regards

Will Ferrer (Run the Business)

[mitchellsimoens]

Thanks for the contribution