Roo/bootstrap/FieldLabel.js

/*
 * - LGPL
 *
 * FieldLabel
 * 
 */

/**
 * @class Roo.bootstrap.FieldLabel
 * @extends Roo.bootstrap.Component
 * Bootstrap FieldLabel class
 * @cfg {String} html contents of the element
 * @cfg {String} tag tag of the element default label
 * @cfg {String} cls class of the element
 * @cfg {String} target label target 
 * @cfg {Boolean} allowBlank (true|false) target allowBlank default true
 * @cfg {String} invalidClass DEPRICATED - BS4 uses is-invalid
 * @cfg {String} validClass DEPRICATED - BS4 uses is-valid
 * @cfg {String} iconTooltip default "This field is required"
 * @cfg {String} indicatorpos (left|right) default left
 * 
 * @constructor
 * Create a new FieldLabel
 * @param {Object} config The config object
 */

Roo.bootstrap.FieldLabel = function(config){
    Roo.bootstrap.Element.superclass.constructor.call(this, config);

    this.addEvents({
            /**
             * @event invalid
             * Fires after the field has been marked as invalid.
             * @param {Roo.form.FieldLabel} this
             * @param {String} msg The validation message
             */
            invalid : true,
            /**
             * @event valid
             * Fires after the field has been validated with no errors.
             * @param {Roo.form.FieldLabel} this
             */
            valid : true
        });
};

Roo.extend(Roo.bootstrap.FieldLabel, Roo.bootstrap.Component,  {

    tag: 'label',
    cls: '',
    html: '',
    target: '',
    allowBlank : true,
    invalidClass : 'has-warning',
    validClass : 'has-success',
    iconTooltip : 'This field is required',
    indicatorpos : 'left',

    getAutoCreate : function(){

	var cls = "";
	if (!this.allowBlank) {
	    cls  = "visible";
	}

        var cfg = {
            tag : this.tag,
            cls : 'roo-bootstrap-field-label ' + this.cls,
            for : this.target,
            cn : [
                {
                    tag : 'i',
                    cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star ' + cls,
                    tooltip : this.iconTooltip
                },
                {
                    tag : 'span',
                    html : this.html
                }
            ]
        };

        if(this.indicatorpos == 'right'){
            var cfg = {
                tag : this.tag,
                cls : 'roo-bootstrap-field-label ' + this.cls,
                for : this.target,
                cn : [
                    {
                        tag : 'span',
                        html : this.html
                    },
                    {
                        tag : 'i',
                        cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star '+ cls,
                        tooltip : this.iconTooltip
                    }
                ]
            };
        }

        return cfg;
    },

    initEvents: function()
    {
        Roo.bootstrap.Element.superclass.initEvents.call(this);

        this.indicator = this.indicatorEl();

        if(this.indicator){
            this.indicator.removeClass('visible');
            this.indicator.addClass('invisible');
        }

        Roo.bootstrap.FieldLabel.register(this);
    },

    indicatorEl : function()
    {
        var indicator = this.el.select('i.roo-required-indicator',true).first();

        if(!indicator){
            return false;
        }

        return indicator;

    },

    /**
     * Mark this field as valid
     */
    markValid : function()
    {
        if(this.indicator){
            this.indicator.removeClass('visible');
            this.indicator.addClass('invisible');
        }
        if (Roo.bootstrap.version == 3) {
	    this.el.removeClass(this.invalidClass);
	    this.el.addClass(this.validClass);
	} else {
	    this.el.removeClass('is-invalid');
            this.el.addClass('is-valid');
	}


        this.fireEvent('valid', this);
    },

    /**
     * Mark this field as invalid
     * @param {String} msg The validation message
     */
    markInvalid : function(msg)
    {
        if(this.indicator){
            this.indicator.removeClass('invisible');
            this.indicator.addClass('visible');
        }
          if (Roo.bootstrap.version == 3) {
	    this.el.removeClass(this.validClass);
	    this.el.addClass(this.invalidClass);
	} else {
	    this.el.removeClass('is-valid');
            this.el.addClass('is-invalid');
	}


        this.fireEvent('invalid', this, msg);
    }


});

Roo.apply(Roo.bootstrap.FieldLabel, {

    groups: {},

     /**
    * register a FieldLabel Group
    * @param {Roo.bootstrap.FieldLabel} the FieldLabel to add
    */
    register : function(label)
    {
        if(this.groups.hasOwnProperty(label.target)){
            return;
        }

        this.groups[label.target] = label;

    },
    /**
    * fetch a FieldLabel Group based on the target
    * @param {string} target
    * @returns {Roo.bootstrap.FieldLabel} the CheckBox group
    */
    get: function(target) {
        if (typeof(this.groups[target]) == 'undefined') {
            return false;
        }

        return this.groups[target] ;
    }
});