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
  72         if(this.indicatorpos == 'left'){
  73             label.cn.unshift({
  74                 tag : 'i',
  75                 cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
  76                 tooltip : 'This field is required'
  77             });
  78         } else {
  79             label.cn.push({
  80                 tag : 'i',
  81                 cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
  82                 tooltip : 'This field is required'
  83             });
  84         }
  85
  86         var items = {
  87             tag : 'div',
  88             cls : 'roo-radio-set-items'
  89         };
  90
  91         var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
  92
  93         if (align === 'left' && this.fieldLabel.length) {
  94
  95             items = {
  96                 cls : "roo-radio-set-right",
  97                 cn: [
  98                     items
  99                 ]
 100             };
 101
 102             if(this.labelWidth > 12){
 103                 label.style = "width: " + this.labelWidth + 'px';
 104             }
 105
 106             if(this.labelWidth < 13 && this.labelmd == 0){
 107                 this.labelmd = this.labelWidth;
 108             }
 109
 110             if(this.labellg > 0){
 111                 label.cls += ' col-lg-' + this.labellg;
 112                 items.cls += ' col-lg-' + (12 - this.labellg);
 113             }
 114
 115             if(this.labelmd > 0){
 116                 label.cls += ' col-md-' + this.labelmd;
 117                 items.cls += ' col-md-' + (12 - this.labelmd);
 118             }
 119
 120             if(this.labelsm > 0){
 121                 label.cls += ' col-sm-' + this.labelsm;
 122                 items.cls += ' col-sm-' + (12 - this.labelsm);
 123             }
 124
 125             if(this.labelxs > 0){
 126                 label.cls += ' col-xs-' + this.labelxs;
 127                 items.cls += ' col-xs-' + (12 - this.labelxs);
 128             }
 129         }
 130
 131         var cfg = {
 132             tag : 'div',
 133             cls : 'roo-radio-set',
 134             cn : [
 135                 {
 136                     tag : 'input',
 137                     cls : 'roo-radio-set-input',
 138                     type : 'hidden',
 139                     name : this.name,
 140                     value : this.value ? this.value :  ''
 141                 },
 142                 label,
 143                 items
 144             ]
 145         };
 146
 147         if(this.weight.length){
 148             cfg.cls += ' roo-radio-' + this.weight;
 149         }
 150
 151         if(this.inline) {
 152             cfg.cls += ' roo-radio-set-inline';
 153         }
 154
 155         var settings=this;
 156         ['xs','sm','md','lg'].map(function(size){
 157             if (settings[size]) {
 158                 cfg.cls += ' col-' + size + '-' + settings[size];
 159             }
 160         });
 161
 162         return cfg;
 163
 164     },
 165
 166     initEvents : function()
 167     {
 168         this.labelEl = this.el.select('.roo-radio-set-label', true).first();
 169         this.labelEl.setVisibilityMode(Roo.Element.DISPLAY);
 170
 171         if(!this.fieldLabel.length){
 172             this.labelEl.hide();
 173         }
 174
 175         this.itemsEl = this.el.select('.roo-radio-set-items', true).first();
 176         this.itemsEl.setVisibilityMode(Roo.Element.DISPLAY);
 177
 178         this.indicator = this.indicatorEl();
 179
 180         if(this.indicator){
 181             this.indicator.addClass('invisible');
 182         }
 183
 184         this.originalValue = this.getValue();
 185
 186     },
 187
 188     inputEl: function ()
 189     {
 190         return this.el.select('.roo-radio-set-input', true).first();
 191     },
 192
 193     getChildContainer : function()
 194     {
 195         return this.itemsEl;
 196     },
 197
 198     register : function(item)
 199     {
 200         this.radioes.push(item);
 201
 202     },
 203
 204     validate : function()
 205     {
 206         if(this.getVisibilityEl().hasClass('hidden')){
 207             return true;
 208         }
 209
 210         var valid = false;
 211
 212         Roo.each(this.radioes, function(i){
 213             if(!i.checked){
 214                 return;
 215             }
 216
 217             valid = true;
 218             return false;
 219         });
 220
 221         if(this.allowBlank) {
 222             return true;
 223         }
 224
 225         if(this.disabled || valid){
 226             this.markValid();
 227             return true;
 228         }
 229
 230         this.markInvalid();
 231         return false;
 232
 233     },
 234
 235     markValid : function()
 236     {
 237         if(this.labelEl.isVisible(true)){
 238             this.indicatorEl().removeClass('visible');
 239             this.indicatorEl().addClass('invisible');
 240         }
 241
 242         this.el.removeClass([this.invalidClass, this.validClass]);
 243         this.el.addClass(this.validClass);
 244
 245         this.fireEvent('valid', this);
 246     },
 247
 248     markInvalid : function(msg)
 249     {
 250         if(this.allowBlank || this.disabled){
 251             return;
 252         }
 253
 254         if(this.labelEl.isVisible(true)){
 255             this.indicatorEl().removeClass('invisible');
 256             this.indicatorEl().addClass('visible');
 257         }
 258
 259         this.el.removeClass([this.invalidClass, this.validClass]);
 260         this.el.addClass(this.invalidClass);
 261
 262         this.fireEvent('invalid', this, msg);
 263
 264     },
 265
 266     setValue : function(v, suppressEvent)
 267     {
 268         if(this.value === v){
 269             return;
 270         }
 271
 272         this.value = v;
 273
 274         if(this.rendered){
 275             this.inputEl().dom.value = (v === null || v === undefined ? '' : v);
 276         }
 277
 278         Roo.each(this.radioes, function(i){
 279             i.checked = false;
 280             i.el.removeClass('checked');
 281         });
 282
 283         Roo.each(this.radioes, function(i){
 284
 285             if(i.value === v || i.value.toString() === v.toString()){
 286                 i.checked = true;
 287                 i.el.addClass('checked');
 288
 289                 if(suppressEvent !== true){
 290                     this.fireEvent('check', this, i);
 291                 }
 292
 293                 return false;
 294             }
 295
 296         }, this);
 297
 298         this.validate();
 299     },
 300
 301     clearInvalid : function(){
 302
 303         if(!this.el || this.preventMark){
 304             return;
 305         }
 306
 307         this.el.removeClass([this.invalidClass]);
 308
 309         this.fireEvent('valid', this);
 310     }
 311
 312 });
 313
 314 Roo.apply(Roo.bootstrap.RadioSet, {
 315
 316     groups: {},
 317
 318     register : function(set)
 319     {
 320         this.groups[set.name] = set;
 321     },
 322
 323     get: function(name)
 324     {
 325         if (typeof(this.groups[name]) == 'undefined') {
 326             return false;
 327         }
 328
 329         return this.groups[name] ;
 330     }
 331
 332 });