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