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

   1 /*
   2  * - LGPL
   3  *
   4  * RadioSet
   5  *
   6  *
   7  */
   8
   9 /**
  10  * @class Roo.bootstrap.RadioSet
  11  * @extends Roo.bootstrap.Input
  12  * Bootstrap RadioSet class
  13  * @cfg {String} indicatorpos (left|right) default left
  14  * @cfg {Boolean} inline (true|false) inline the element (default true)
  15  * @cfg {String} weight (primary|warning|info|danger|success) The text that appears beside the radio
  16  * @constructor
  17  * Create a new RadioSet
  18  * @param {Object} config The config object
  19  */
  20
  21 Roo.bootstrap.RadioSet = function(config){
  22
  23     Roo.bootstrap.RadioSet.superclass.constructor.call(this, config);
  24
  25     this.radioes = [];
  26
  27     Roo.bootstrap.RadioSet.register(this);
  28
  29     this.addEvents({
  30         /**
  31         * @event check
  32         * Fires when the element is checked or unchecked.
  33         * @param {Roo.bootstrap.RadioSet} this This radio
  34         * @param {Roo.bootstrap.Radio} item The checked item
  35         */
  36        check : true,
  37        /**
  38         * @event click
  39         * Fires when the element is click.
  40         * @param {Roo.bootstrap.RadioSet} this This radio set
  41         * @param {Roo.bootstrap.Radio} item The checked item
  42         * @param {Roo.EventObject} e The event object
  43         */
  44        click : true
  45     });
  46
  47 };
  48
  49 Roo.extend(Roo.bootstrap.RadioSet, Roo.bootstrap.Input,  {
  50
  51     radioes : false,
  52
  53     inline : true,
  54
  55     weight : '',
  56
  57     indicatorpos : 'left',
  58
  59     getAutoCreate : function()
  60     {
  61         var label = {
  62             tag : 'label',
  63             cls : 'roo-radio-set-label',
  64             cn : [
  65                 {
  66                     tag : 'span',
  67                     html : this.fieldLabel
  68                 }
  69             ]
  70         };
  71         if (Roo.bootstrap.version == 3) {
  72
  73
  74             if(this.indicatorpos == 'left'){
  75                 label.cn.unshift({
  76                     tag : 'i',
  77                     cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
  78                     tooltip : 'This field is required'
  79                 });
  80             } else {
  81                 label.cn.push({
  82                     tag : 'i',
  83                     cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
  84                     tooltip : 'This field is required'
  85                 });
  86             }
  87         }
  88         var items = {
  89             tag : 'div',
  90             cls : 'roo-radio-set-items'
  91         };
  92
  93         var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
  94
  95         if (align === 'left' && this.fieldLabel.length) {
  96
  97             items = {
  98                 cls : "roo-radio-set-right",
  99                 cn: [
 100                     items
 101                 ]
 102             };
 103
 104             if(this.labelWidth > 12){
 105                 label.style = "width: " + this.labelWidth + 'px';
 106             }
 107
 108             if(this.labelWidth < 13 && this.labelmd == 0){
 109                 this.labelmd = this.labelWidth;
 110             }
 111
 112             if(this.labellg > 0){
 113                 label.cls += ' col-lg-' + this.labellg;
 114                 items.cls += ' col-lg-' + (12 - this.labellg);
 115             }
 116
 117             if(this.labelmd > 0){
 118                 label.cls += ' col-md-' + this.labelmd;
 119                 items.cls += ' col-md-' + (12 - this.labelmd);
 120             }
 121
 122             if(this.labelsm > 0){
 123                 label.cls += ' col-sm-' + this.labelsm;
 124                 items.cls += ' col-sm-' + (12 - this.labelsm);
 125             }
 126
 127             if(this.labelxs > 0){
 128                 label.cls += ' col-xs-' + this.labelxs;
 129                 items.cls += ' col-xs-' + (12 - this.labelxs);
 130             }
 131         }
 132
 133         var cfg = {
 134             tag : 'div',
 135             cls : 'roo-radio-set',
 136             cn : [
 137                 {
 138                     tag : 'input',
 139                     cls : 'roo-radio-set-input',
 140                     type : 'hidden',
 141                     name : this.name,
 142                     value : this.value ? this.value :  ''
 143                 },
 144                 label,
 145                 items
 146             ]
 147         };
 148
 149         if(this.weight.length){
 150             cfg.cls += ' roo-radio-' + this.weight;
 151         }
 152
 153         if(this.inline) {
 154             cfg.cls += ' roo-radio-set-inline';
 155         }
 156
 157         var settings=this;
 158         ['xs','sm','md','lg'].map(function(size){
 159             if (settings[size]) {
 160                 cfg.cls += ' col-' + size + '-' + settings[size];
 161             }
 162         });
 163
 164         return cfg;
 165
 166     },
 167
 168     initEvents : function()
 169     {
 170         this.labelEl = this.el.select('.roo-radio-set-label', true).first();
 171         this.labelEl.setVisibilityMode(Roo.Element.DISPLAY);
 172
 173         if(!this.fieldLabel.length){
 174             this.labelEl.hide();
 175         }
 176
 177         this.itemsEl = this.el.select('.roo-radio-set-items', true).first();
 178         this.itemsEl.setVisibilityMode(Roo.Element.DISPLAY);
 179
 180         this.indicator = this.indicatorEl();
 181
 182         if(this.indicator){
 183             this.indicator.addClass('invisible');
 184         }
 185
 186         this.originalValue = this.getValue();
 187
 188     },
 189
 190     inputEl: function ()
 191     {
 192         return this.el.select('.roo-radio-set-input', true).first();
 193     },
 194
 195     getChildContainer : function()
 196     {
 197         return this.itemsEl;
 198     },
 199
 200     register : function(item)
 201     {
 202         this.radioes.push(item);
 203
 204     },
 205
 206     validate : function()
 207     {
 208         if(this.getVisibilityEl().hasClass('hidden')){
 209             return true;
 210         }
 211
 212         var valid = false;
 213
 214         Roo.each(this.radioes, function(i){
 215             if(!i.checked){
 216                 return;
 217             }
 218
 219             valid = true;
 220             return false;
 221         });
 222
 223         if(this.allowBlank) {
 224             return true;
 225         }
 226
 227         if(this.disabled || valid){
 228             this.markValid();
 229             return true;
 230         }
 231
 232         this.markInvalid();
 233         return false;
 234
 235     },
 236
 237     markValid : function()
 238     {
 239         if(this.labelEl.isVisible(true) && this.indicatorEl()){
 240             this.indicatorEl().removeClass('visible');
 241             this.indicatorEl().addClass('invisible');
 242         }
 243
 244
 245         if (Roo.bootstrap.version == 3) {
 246             this.el.removeClass([this.invalidClass, this.validClass]);
 247             this.el.addClass(this.validClass);
 248         } else {
 249             this.el.removeClass(['is-invalid','is-valid']);
 250             this.el.addClass(['is-valid']);
 251         }
 252         this.fireEvent('valid', this);
 253     },
 254
 255     markInvalid : function(msg)
 256     {
 257         if(this.allowBlank || this.disabled){
 258             return;
 259         }
 260
 261         if(this.labelEl.isVisible(true) && this.indicatorEl()){
 262             this.indicatorEl().removeClass('invisible');
 263             this.indicatorEl().addClass('visible');
 264         }
 265         if (Roo.bootstrap.version == 3) {
 266             this.el.removeClass(['is-invalid','is-valid']);
 267             this.el.addClass(['is-invalid']);
 268         } else {
 269             this.el.removeClass([this.invalidClass, this.validClass]);
 270             this.el.addClass(this.invalidClass);
 271         }
 272
 273
 274         this.fireEvent('invalid', this, msg);
 275
 276     },
 277
 278     setValue : function(v, suppressEvent)
 279     {
 280         if(this.value === v){
 281             return;
 282         }
 283
 284         this.value = v;
 285
 286         if(this.rendered){
 287             this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
 288         }
 289
 290         Roo.each(this.radioes, function(i){
 291             i.checked = false;
 292             i.el.removeClass('checked');
 293         });
 294
 295         Roo.each(this.radioes, function(i){
 296
 297             if(i.value === v || i.value.toString() === v.toString()){
 298                 i.checked = true;
 299                 i.el.addClass('checked');
 300
 301                 if(suppressEvent !== true){
 302                     this.fireEvent('check', this, i);
 303                 }
 304
 305                 return false;
 306             }
 307
 308         }, this);
 309
 310         this.validate();
 311     },
 312
 313     clearInvalid : function(){
 314
 315         if(!this.el || this.preventMark){
 316             return;
 317         }
 318
 319         this.el.removeClass([this.invalidClass]);
 320
 321         this.fireEvent('valid', this);
 322     }
 323
 324 });
 325
 326 Roo.apply(Roo.bootstrap.RadioSet, {
 327
 328     groups: {},
 329
 330     register : function(set)
 331     {
 332         this.groups[set.name] = set;
 333     },
 334
 335     get: function(name)
 336     {
 337         if (typeof(this.groups[name]) == 'undefined') {
 338             return false;
 339         }
 340
 341         return this.groups[name] ;
 342     }
 343
 344 });