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

   1 /*
   2  * - LGPL
   3  *
   4  * CheckBox
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.CheckBox
  10  * @extends Roo.bootstrap.Input
  11  * Bootstrap CheckBox class
  12  *
  13  * @cfg {String} valueOff The value that should go into the generated input element's value when unchecked.
  14  * @cfg {String} inputValue The value that should go into the generated input element's value when checked.
  15  * @cfg {String} boxLabel The text that appears beside the checkbox
  16  * @cfg {String} weight (primary|warning|info|danger|success) The text that appears beside the checkbox
  17  * @cfg {Boolean} checked initnal the element
  18  * @cfg {Boolean} inline inline the element (default false)
  19  *
  20  * @constructor
  21  * Create a new CheckBox
  22  * @param {Object} config The config object
  23  */
  24
  25 Roo.bootstrap.CheckBox = function(config){
  26     Roo.bootstrap.CheckBox.superclass.constructor.call(this, config);
  27
  28     this.addEvents({
  29         /**
  30         * @event check
  31         * Fires when the element is checked or unchecked.
  32         * @param {Roo.bootstrap.CheckBox} this This input
  33         * @param {Boolean} checked The new checked value
  34         * @param {String} oldValue The old value
  35         */
  36        check : true
  37     });
  38 };
  39
  40 Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
  41
  42     inputType: 'checkbox',
  43     inputValue: 1,
  44     valueOff: 0,
  45     boxLabel: false,
  46     checked: false,
  47     weight : false,
  48     inline: false,
  49
  50     getAutoCreate : function()
  51     {
  52         var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
  53
  54         var id = Roo.id();
  55
  56         var cfg = {};
  57
  58         cfg.cls = 'form-group ' + this.inputType; //input-group
  59
  60         if(this.inline){
  61             cfg.cls += ' ' + this.inputType + '-inline';
  62         }
  63
  64         var input =  {
  65             tag: 'input',
  66             id : id,
  67             type : this.inputType,
  68             value : this.inputType == 'radio' ? this.inputValue : ((!this.checked) ? this.valueOff : this.inputValue),
  69             cls : 'roo-' + this.inputType, //'form-box',
  70             placeholder : this.placeholder || ''
  71
  72         };
  73
  74         if (this.weight) { // Validity check?
  75             cfg.cls += " " + this.inputType + "-" + this.weight;
  76         }
  77
  78         if (this.disabled) {
  79             input.disabled=true;
  80         }
  81
  82         if(this.checked){
  83             input.checked = this.checked;
  84         }
  85
  86         if (this.name) {
  87             input.name = this.name;
  88         }
  89
  90         if (this.size) {
  91             input.cls += ' input-' + this.size;
  92         }
  93
  94         var settings=this;
  95
  96         ['xs','sm','md','lg'].map(function(size){
  97             if (settings[size]) {
  98                 cfg.cls += ' col-' + size + '-' + settings[size];
  99             }
 100         });
 101
 102
 103
 104         var inputblock = input;
 105
 106
 107
 108
 109         if (this.before || this.after) {
 110
 111             inputblock = {
 112                 cls : 'input-group',
 113                 cn :  []
 114             };
 115
 116             if (this.before) {
 117                 inputblock.cn.push({
 118                     tag :'span',
 119                     cls : 'input-group-addon',
 120                     html : this.before
 121                 });
 122             }
 123
 124             inputblock.cn.push(input);
 125
 126             if (this.after) {
 127                 inputblock.cn.push({
 128                     tag :'span',
 129                     cls : 'input-group-addon',
 130                     html : this.after
 131                 });
 132             }
 133
 134         }
 135
 136         if (align ==='left' && this.fieldLabel.length) {
 137                 Roo.log("left and has label");
 138                 cfg.cn = [
 139
 140                     {
 141                         tag: 'label',
 142                         'for' :  id,
 143                         cls : 'control-label col-md-' + this.labelWidth,
 144                         html : this.fieldLabel
 145
 146                     },
 147                     {
 148                         cls : "col-md-" + (12 - this.labelWidth),
 149                         cn: [
 150                             inputblock
 151                         ]
 152                     }
 153
 154                 ];
 155         } else if ( this.fieldLabel.length) {
 156                 Roo.log(" label");
 157                 cfg.cn = [
 158
 159                     {
 160                         tag: this.boxLabel ? 'span' : 'label',
 161                         'for': id,
 162                         cls: 'control-label box-input-label',
 163                         //cls : 'input-group-addon',
 164                         html : this.fieldLabel
 165
 166                     },
 167
 168                     inputblock
 169
 170                 ];
 171
 172         } else {
 173
 174                 Roo.log(" no label && no align");
 175                 cfg.cn = [  inputblock ] ;
 176
 177
 178         }
 179         if(this.boxLabel){
 180              var boxLabelCfg = {
 181                 tag: 'label',
 182                 //'for': id, // box label is handled by onclick - so no for...
 183                 cls: 'box-label',
 184                 html: this.boxLabel
 185             }
 186
 187             if(this.tooltip){
 188                 boxLabelCfg.tooltip = this.tooltip;
 189             }
 190
 191             cfg.cn.push(boxLabelCfg);
 192         }
 193
 194
 195
 196         return cfg;
 197
 198     },
 199
 200     /**
 201      * return the real input element.
 202      */
 203     inputEl: function ()
 204     {
 205         return this.el.select('input.roo-' + this.inputType,true).first();
 206     },
 207
 208     labelEl: function()
 209     {
 210         return this.el.select('label.control-label',true).first();
 211     },
 212     /* depricated... */
 213
 214     label: function()
 215     {
 216         return this.labelEl();
 217     },
 218
 219     initEvents : function()
 220     {
 221 //        Roo.bootstrap.CheckBox.superclass.initEvents.call(this);
 222
 223         this.inputEl().on('click', this.onClick,  this);
 224         if (this.boxLabel) {
 225             this.el.select('label.box-label',true).first().on('click', this.onClick,  this);
 226         }
 227
 228     },
 229
 230     onClick : function()
 231     {
 232         this.setChecked(!this.checked);
 233     },
 234
 235     setChecked : function(state,suppressEvent)
 236     {
 237         var old = this.inputEl().dom.checked;
 238
 239         if(this.inputType == 'radio'){
 240
 241             Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
 242                 e.dom.checked = false;
 243             });
 244
 245             this.inputEl().dom.checked = true;
 246
 247             this.inputEl().dom.value = this.inputValue;
 248
 249             if(suppressEvent !== true){
 250                 this.fireEvent('check', this, true, old);
 251             }
 252
 253             return;
 254         }
 255
 256         this.checked = state;
 257
 258         this.inputEl().dom.checked = state;
 259
 260         this.inputEl().dom.value = state ? this.inputValue : this.valueOff;
 261
 262         if(suppressEvent !== true){
 263             this.fireEvent('check', this, state, old);
 264         }
 265     },
 266
 267     getValue : function()
 268     {
 269         if(this.inputType == 'radio'){
 270             return this.getGroupValue();
 271         }
 272
 273         return this.inputEl().getValue();
 274
 275     },
 276
 277     getGroupValue : function()
 278     {
 279         if(typeof(this.el.up('form').child('input[name='+this.name+']:checked', true)) == 'undefined'){
 280             return '';
 281         }
 282
 283         return this.el.up('form').child('input[name='+this.name+']:checked', true).value;
 284     },
 285
 286     setValue : function(v,suppressEvent)
 287     {
 288         if(this.inputType == 'radio'){
 289             this.setGroupValue(v, suppressEvent);
 290             return;
 291         }
 292
 293         this.setChecked(((typeof(v) == 'undefined') ? this.checked : (String(v) === String(this.inputValue))), suppressEvent);
 294     },
 295
 296     setGroupValue : function(v, suppressEvent)
 297     {
 298         var old = this.inputEl().dom.checked;
 299
 300         Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
 301             e.dom.checked = false;
 302
 303             if(e.dom.value == v){
 304                 e.dom.checked = true;
 305             }
 306         });
 307
 308         if(suppressEvent !== true){
 309             this.fireEvent('check', this, true, old);
 310         }
 311
 312         return;
 313     }
 314
 315 });
 316
 317