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-warning"
  18  * @cfg {String} validClass default "text-success"
  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 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.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
 141         this.el.removeClass(this.invalidClass);
 142
 143         this.el.addClass(this.validClass);
 144
 145         this.fireEvent('valid', this);
 146     },
 147
 148     /**
 149      * Mark this field as invalid
 150      * @param {String} msg The validation message
 151      */
 152     markInvalid : function(msg)
 153     {
 154         if(this.indicator){
 155             this.indicator.removeClass('invisible');
 156             this.indicator.addClass('visible');
 157         }
 158
 159         this.el.removeClass(this.validClass);
 160
 161         this.el.addClass(this.invalidClass);
 162
 163         this.fireEvent('invalid', this, msg);
 164     }
 165
 166
 167 });
 168
 169 Roo.apply(Roo.bootstrap.FieldLabel, {
 170
 171     groups: {},
 172
 173      /**
 174     * register a FieldLabel Group
 175     * @param {Roo.bootstrap.FieldLabel} the FieldLabel to add
 176     */
 177     register : function(label)
 178     {
 179         if(this.groups.hasOwnProperty(label.target)){
 180             return;
 181         }
 182
 183         this.groups[label.target] = label;
 184
 185     },
 186     /**
 187     * fetch a FieldLabel Group based on the target
 188     * @param {string} target
 189     * @returns {Roo.bootstrap.FieldLabel} the CheckBox group
 190     */
 191     get: function(target) {
 192         if (typeof(this.groups[target]) == 'undefined') {
 193             return false;
 194         }
 195
 196         return this.groups[target] ;
 197     }
 198 });
 199
 200
 201
 202