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  * @cfg {String} groupId the checkbox group id // normal just use for checkbox
  20  *
  21  * @constructor
  22  * Create a new CheckBox
  23  * @param {Object} config The config object
  24  */
  25
  26 Roo.bootstrap.CheckBox = function(config){
  27     Roo.bootstrap.CheckBox.superclass.constructor.call(this, config);
  28
  29     this.addEvents({
  30         /**
  31         * @event check
  32         * Fires when the element is checked or unchecked.
  33         * @param {Roo.bootstrap.CheckBox} this This input
  34         * @param {Boolean} checked The new checked value
  35         */
  36        check : true
  37     });
  38
  39     if(this.groupId){
  40         Roo.bootstrap.CheckBox.register(this);
  41     }
  42
  43 };
  44
  45 Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
  46
  47     inputType: 'checkbox',
  48     inputValue: 1,
  49     valueOff: 0,
  50     boxLabel: false,
  51     checked: false,
  52     weight : false,
  53     inline: false,
  54
  55     getAutoCreate : function()
  56     {
  57         var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
  58
  59         var id = Roo.id();
  60
  61         var cfg = {};
  62
  63         cfg.cls = 'form-group ' + this.inputType; //input-group
  64
  65         if(this.inline){
  66             cfg.cls += ' ' + this.inputType + '-inline';
  67         }
  68
  69         var input =  {
  70             tag: 'input',
  71             id : id,
  72             type : this.inputType,
  73             value : this.inputType == 'radio' ? this.inputValue : ((!this.checked) ? this.valueOff : this.inputValue),
  74             cls : 'roo-' + this.inputType, //'form-box',
  75             placeholder : this.placeholder || ''
  76
  77         };
  78
  79         if (this.weight) { // Validity check?
  80             cfg.cls += " " + this.inputType + "-" + this.weight;
  81         }
  82
  83         if (this.disabled) {
  84             input.disabled=true;
  85         }
  86
  87         if(this.checked){
  88             input.checked = this.checked;
  89         }
  90
  91         if (this.name) {
  92             input.name = this.name;
  93         }
  94
  95         if (this.size) {
  96             input.cls += ' input-' + this.size;
  97         }
  98
  99         var settings=this;
 100
 101         ['xs','sm','md','lg'].map(function(size){
 102             if (settings[size]) {
 103                 cfg.cls += ' col-' + size + '-' + settings[size];
 104             }
 105         });
 106
 107
 108
 109         var inputblock = input;
 110
 111
 112
 113
 114         if (this.before || this.after) {
 115
 116             inputblock = {
 117                 cls : 'input-group',
 118                 cn :  []
 119             };
 120
 121             if (this.before) {
 122                 inputblock.cn.push({
 123                     tag :'span',
 124                     cls : 'input-group-addon',
 125                     html : this.before
 126                 });
 127             }
 128
 129             inputblock.cn.push(input);
 130
 131             if (this.after) {
 132                 inputblock.cn.push({
 133                     tag :'span',
 134                     cls : 'input-group-addon',
 135                     html : this.after
 136                 });
 137             }
 138
 139         }
 140
 141         if (align ==='left' && this.fieldLabel.length) {
 142                 Roo.log("left and has label");
 143                 cfg.cn = [
 144
 145                     {
 146                         tag: 'label',
 147                         'for' :  id,
 148                         cls : 'control-label col-md-' + this.labelWidth,
 149                         html : this.fieldLabel
 150
 151                     },
 152                     {
 153                         cls : "col-md-" + (12 - this.labelWidth),
 154                         cn: [
 155                             inputblock
 156                         ]
 157                     }
 158
 159                 ];
 160         } else if ( this.fieldLabel.length) {
 161                 Roo.log(" label");
 162                 cfg.cn = [
 163
 164                     {
 165                         tag: this.boxLabel ? 'span' : 'label',
 166                         'for': id,
 167                         cls: 'control-label box-input-label',
 168                         //cls : 'input-group-addon',
 169                         html : this.fieldLabel
 170
 171                     },
 172
 173                     inputblock
 174
 175                 ];
 176
 177         } else {
 178
 179                 Roo.log(" no label && no align");
 180                 cfg.cn = [  inputblock ] ;
 181
 182
 183         }
 184         if(this.boxLabel){
 185              var boxLabelCfg = {
 186                 tag: 'label',
 187                 //'for': id, // box label is handled by onclick - so no for...
 188                 cls: 'box-label',
 189                 html: this.boxLabel
 190             }
 191
 192             if(this.tooltip){
 193                 boxLabelCfg.tooltip = this.tooltip;
 194             }
 195
 196             cfg.cn.push(boxLabelCfg);
 197         }
 198
 199
 200
 201         return cfg;
 202
 203     },
 204
 205     /**
 206      * return the real input element.
 207      */
 208     inputEl: function ()
 209     {
 210         return this.el.select('input.roo-' + this.inputType,true).first();
 211     },
 212
 213     labelEl: function()
 214     {
 215         return this.el.select('label.control-label',true).first();
 216     },
 217     /* depricated... */
 218
 219     label: function()
 220     {
 221         return this.labelEl();
 222     },
 223
 224     initEvents : function()
 225     {
 226 //        Roo.bootstrap.CheckBox.superclass.initEvents.call(this);
 227
 228         this.inputEl().on('click', this.onClick,  this);
 229
 230         if (this.boxLabel) {
 231             this.el.select('label.box-label',true).first().on('click', this.onClick,  this);
 232         }
 233
 234         this.startValue = this.getValue();
 235
 236     },
 237
 238     onClick : function()
 239     {
 240         this.setChecked(!this.checked);
 241     },
 242
 243     setChecked : function(state,suppressEvent)
 244     {
 245         this.startValue = this.getValue();
 246
 247         if(this.inputType == 'radio'){
 248
 249             Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
 250                 e.dom.checked = false;
 251             });
 252
 253             this.inputEl().dom.checked = true;
 254
 255             this.inputEl().dom.value = this.inputValue;
 256
 257             if(suppressEvent !== true){
 258                 this.fireEvent('check', this, true);
 259             }
 260
 261             return;
 262         }
 263
 264         this.checked = state;
 265
 266         this.inputEl().dom.checked = state;
 267
 268         this.inputEl().dom.value = state ? this.inputValue : this.valueOff;
 269
 270         if(suppressEvent !== true){
 271             this.fireEvent('check', this, state);
 272         }
 273     },
 274
 275     getValue : function()
 276     {
 277         if(this.inputType == 'radio'){
 278             return this.getGroupValue();
 279         }
 280
 281         return this.inputEl().getValue();
 282
 283     },
 284
 285     getGroupValue : function()
 286     {
 287         if(typeof(this.el.up('form').child('input[name='+this.name+']:checked', true)) == 'undefined'){
 288             return '';
 289         }
 290
 291         return this.el.up('form').child('input[name='+this.name+']:checked', true).value;
 292     },
 293
 294     setValue : function(v,suppressEvent)
 295     {
 296         if(this.inputType == 'radio'){
 297             this.setGroupValue(v, suppressEvent);
 298             return;
 299         }
 300
 301         this.setChecked(((typeof(v) == 'undefined') ? this.checked : (String(v) === String(this.inputValue))), suppressEvent);
 302     },
 303
 304     setGroupValue : function(v, suppressEvent)
 305     {
 306         this.startValue = this.getValue();
 307
 308         Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
 309             e.dom.checked = false;
 310
 311             if(e.dom.value == v){
 312                 e.dom.checked = true;
 313             }
 314         });
 315
 316         if(suppressEvent !== true){
 317             this.fireEvent('check', this, true);
 318         }
 319
 320         return;
 321     },
 322
 323     validate : function()
 324     {
 325         if(
 326                 this.disabled ||
 327                 (this.inputType == 'radio' && this.getValue().length) ||
 328                 (this.inputType == 'checkbox' && this.getValue() == this.inputValue)
 329         ){
 330             return true;
 331         }
 332
 333         return false;
 334     }
 335
 336 });
 337
 338 Roo.apply(Roo.bootstrap.CheckBox, {
 339
 340     groups: {},
 341      /**
 342     * register a CheckBox Group
 343     * @param {Roo.bootstrap.CheckBox} the CheckBox to add
 344     */
 345     register : function(checkbox)
 346     {
 347         this.groups[checkbox.groupId] = checkbox;
 348
 349     },
 350     /**
 351     * fetch a CheckBox Group based on the group ID
 352     * if one does not exist , it will get created.
 353     * @param {string} the group ID
 354     * @returns {Roo.bootstrap.CheckBox} the CheckBox group
 355     */
 356     get: function(groupId) {
 357         if (typeof(this.groups[groupId]) == 'undefined') {
 358             this.register(new Roo.bootstrap.CheckBox({ groupId : groupId }));
 359         }
 360
 361         return this.groups[groupId] ;
 362     }
 363
 364
 365 });