git.roojs.org Git - roojs1/blob - Roo/bootstrap/FieldLabel.js

   1 /*
   2  * - LGPL
   3  *
   4  * FieldLabel
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.FieldLabel
  10  * @extends Roo.bootstrap.Component
  11  * Bootstrap FieldLabel class
  12  * @cfg {String} html contents of the element
  13  * @cfg {String} tag tag of the element default label
  14  * @cfg {String} cls class of the element
  15  * @cfg {String} target label target
  16  * @cfg {Boolean} allowBlank (true|false) target allowBlank default true
  17  * @cfg {String} invalidClass default "text-danger fa fa-lg fa-exclamation-triangle"
  18  * @cfg {String} validClass default "text-success fa fa-lg fa-check"
  19  * @cfg {String} iconTooltip default "This field is required"
  20  * @cfg {String} indicatorpos (left|right) default left
  21  *
  22  * @constructor
  23  * Create a new FieldLabel
  24  * @param {Object} config The config object
  25  */
  26
  27 Roo.bootstrap.FieldLabel = function(config){
  28     Roo.bootstrap.Element.superclass.constructor.call(this, config);
  29
  30     this.addEvents({
  31             /**
  32              * @event invalid
  33              * Fires after the field has been marked as invalid.
  34              * @param {Roo.form.FieldLabel} this
  35              * @param {String} msg The validation message
  36              */
  37             invalid : true,
  38             /**
  39              * @event valid
  40              * Fires after the field has been validated with no errors.
  41              * @param {Roo.form.FieldLabel} this
  42              */
  43             valid : true
  44         });
  45 };
  46
  47 Roo.extend(Roo.bootstrap.FieldLabel, Roo.bootstrap.Component,  {
  48
  49     tag: 'label',
  50     cls: '',
  51     html: '',
  52     target: '',
  53     allowBlank : true,
  54     invalidClass : 'has-warning',
  55     validClass : 'has-success',
  56     iconTooltip : 'This field is required',
  57     indicatorpos : 'left',
  58
  59     getAutoCreate : function(){
  60
  61         var cfg = {
  62             tag : this.tag,
  63             cls : 'roo-bootstrap-field-label ' + this.cls,
  64             for : this.target,
  65             cn : [
  66                 {
  67                     tag : 'i',
  68                     cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
  69                     tooltip : this.iconTooltip
  70                 },
  71                 {
  72                     tag : 'span',
  73                     html : this.html
  74                 }
  75             ]
  76         };
  77
  78         if(indicatorpos == 'right'){
  79             var cfg = {
  80                 tag : this.tag,
  81                 cls : 'roo-bootstrap-field-label ' + this.cls,
  82                 for : this.target,
  83                 cn : [
  84                     {
  85                         tag : 'span',
  86                         html : this.html
  87                     },
  88                     {
  89                         tag : 'i',
  90                         cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
  91                         tooltip : this.iconTooltip
  92                     }
  93                 ]
  94             };
  95         }
  96
  97         return cfg;
  98     },
  99
 100     initEvents: function()
 101     {
 102         Roo.bootstrap.Element.superclass.initEvents.call(this);
 103
 104         this.indicator = this.indicatorEl();
 105
 106         Roo.bootstrap.FieldLabel.register(this);
 107     },
 108
 109     indicatorEl : function()
 110     {
 111         var indicator = this.el.select('i.roo-required-indicator',true).first();
 112
 113         if(!indicator){
 114             return false;
 115         }
 116
 117         return indicator;
 118
 119     },
 120
 121     /**
 122      * Mark this field as valid
 123      */
 124     markValid : function()
 125     {
 126         if(this.indicator){
 127             this.indicator.removeClass('visible');
 128             this.indicator.addClass('invisible');
 129         }
 130
 131         this.el.removeClass(this.invalidClass);
 132
 133         this.el.addClass(this.validClass);
 134
 135         this.fireEvent('valid', this);
 136     },
 137
 138     /**
 139      * Mark this field as invalid
 140      * @param {String} msg The validation message
 141      */
 142     markInvalid : function(msg)
 143     {
 144         if(this.indicator){
 145             this.indicator.removeClass('invisible');
 146             this.indicator.addClass('visible');
 147         }
 148
 149         this.el.removeClass(this.validClass);
 150
 151         this.el.addClass(this.invalidClass);
 152
 153         this.fireEvent('invalid', this, msg);
 154     }
 155
 156
 157 });
 158
 159 Roo.apply(Roo.bootstrap.FieldLabel, {
 160
 161     groups: {},
 162
 163      /**
 164     * register a FieldLabel Group
 165     * @param {Roo.bootstrap.FieldLabel} the FieldLabel to add
 166     */
 167     register : function(label)
 168     {
 169         if(this.groups.hasOwnProperty(label.target)){
 170             return;
 171         }
 172
 173         this.groups[label.target] = label;
 174
 175     },
 176     /**
 177     * fetch a FieldLabel Group based on the target
 178     * @param {string} target
 179     * @returns {Roo.bootstrap.FieldLabel} the CheckBox group
 180     */
 181     get: function(target) {
 182         if (typeof(this.groups[target]) == 'undefined') {
 183             return false;
 184         }
 185
 186         return this.groups[target] ;
 187     }
 188 });
 189
 190
 191
 192