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

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