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

   1 /*
   2  * - LGPL
   3  *
   4  * FieldLabel
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.form.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 DEPRICATED - BS4 uses is-invalid
  18  * @cfg {String} validClass DEPRICATED - BS4 uses is-valid
  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.form.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.form.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 cls = "";
  62         if (!this.allowBlank) {
  63             cls  = "visible";
  64         }
  65
  66         var cfg = {
  67             tag : this.tag,
  68             cls : 'roo-bootstrap-field-label ' + this.cls,
  69             for : this.target,
  70             cn : [
  71                 {
  72                     tag : 'i',
  73                     cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star ' + cls,
  74                     tooltip : this.iconTooltip
  75                 },
  76                 {
  77                     tag : 'span',
  78                     html : this.html
  79                 }
  80             ]
  81         };
  82
  83         if(this.indicatorpos == 'right'){
  84             var cfg = {
  85                 tag : this.tag,
  86                 cls : 'roo-bootstrap-field-label ' + this.cls,
  87                 for : this.target,
  88                 cn : [
  89                     {
  90                         tag : 'span',
  91                         html : this.html
  92                     },
  93                     {
  94                         tag : 'i',
  95                         cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star '+ cls,
  96                         tooltip : this.iconTooltip
  97                     }
  98                 ]
  99             };
 100         }
 101
 102         return cfg;
 103     },
 104
 105     initEvents: function()
 106     {
 107         Roo.bootstrap.Element.superclass.initEvents.call(this);
 108
 109         this.indicator = this.indicatorEl();
 110
 111         if(this.indicator){
 112             this.indicator.removeClass('visible');
 113             this.indicator.addClass('invisible');
 114         }
 115
 116         Roo.bootstrap.form.FieldLabel.register(this);
 117     },
 118
 119     indicatorEl : function()
 120     {
 121         var indicator = this.el.select('i.roo-required-indicator',true).first();
 122
 123         if(!indicator){
 124             return false;
 125         }
 126
 127         return indicator;
 128
 129     },
 130
 131     /**
 132      * Mark this field as valid
 133      */
 134     markValid : function()
 135     {
 136         if(this.indicator){
 137             this.indicator.removeClass('visible');
 138             this.indicator.addClass('invisible');
 139         }
 140         if (Roo.bootstrap.version == 3) {
 141             this.el.removeClass(this.invalidClass);
 142             this.el.addClass(this.validClass);
 143         } else {
 144             this.el.removeClass('is-invalid');
 145             this.el.addClass('is-valid');
 146         }
 147
 148
 149         this.fireEvent('valid', this);
 150     },
 151
 152     /**
 153      * Mark this field as invalid
 154      * @param {String} msg The validation message
 155      */
 156     markInvalid : function(msg)
 157     {
 158         if(this.indicator){
 159             this.indicator.removeClass('invisible');
 160             this.indicator.addClass('visible');
 161         }
 162           if (Roo.bootstrap.version == 3) {
 163             this.el.removeClass(this.validClass);
 164             this.el.addClass(this.invalidClass);
 165         } else {
 166             this.el.removeClass('is-valid');
 167             this.el.addClass('is-invalid');
 168         }
 169
 170
 171         this.fireEvent('invalid', this, msg);
 172     }
 173
 174
 175 });
 176
 177 Roo.apply(Roo.bootstrap.form.FieldLabel, {
 178
 179     groups: {},
 180
 181      /**
 182     * register a FieldLabel Group
 183     * @param {Roo.bootstrap.form.FieldLabel} the FieldLabel to add
 184     */
 185     register : function(label)
 186     {
 187         if(this.groups.hasOwnProperty(label.target)){
 188             return;
 189         }
 190
 191         this.groups[label.target] = label;
 192
 193     },
 194     /**
 195     * fetch a FieldLabel Group based on the target
 196     * @param {string} target
 197     * @returns {Roo.bootstrap.form.FieldLabel} the CheckBox group
 198     */
 199     get: function(target) {
 200         if (typeof(this.groups[target]) == 'undefined') {
 201             return false;
 202         }
 203
 204         return this.groups[target] ;
 205     }
 206 });
 207
 208
 209
 210