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 };
  40
  41 Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
  42
  43     inputType: 'checkbox',
  44     inputValue: 1,
  45     valueOff: 0,
  46     boxLabel: false,
  47     checked: false,
  48     weight : false,
  49     inline: false,
  50
  51     getAutoCreate : function()
  52     {
  53         var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
  54
  55         var id = Roo.id();
  56
  57         var cfg = {};
  58
  59         cfg.cls = 'form-group ' + this.inputType; //input-group
  60
  61         if(this.inline){
  62             cfg.cls += ' ' + this.inputType + '-inline';
  63         }
  64
  65         var input =  {
  66             tag: 'input',
  67             id : id,
  68             type : this.inputType,
  69             value : this.inputType == 'radio' ? this.inputValue : ((!this.checked) ? this.valueOff : this.inputValue),
  70             cls : 'roo-' + this.inputType, //'form-box',
  71             placeholder : this.placeholder || ''
  72
  73         };
  74
  75         if (this.weight) { // Validity check?
  76             cfg.cls += " " + this.inputType + "-" + this.weight;
  77         }
  78
  79         if (this.disabled) {
  80             input.disabled=true;
  81         }
  82
  83         if(this.checked){
  84             input.checked = this.checked;
  85         }
  86
  87         if (this.name) {
  88             input.name = this.name;
  89         }
  90
  91         if (this.size) {
  92             input.cls += ' input-' + this.size;
  93         }
  94
  95         var settings=this;
  96
  97         ['xs','sm','md','lg'].map(function(size){
  98             if (settings[size]) {
  99                 cfg.cls += ' col-' + size + '-' + settings[size];
 100             }
 101         });
 102
 103         var inputblock = input;
 104
 105         if (this.before || this.after) {
 106
 107             inputblock = {
 108                 cls : 'input-group',
 109                 cn :  []
 110             };
 111
 112             if (this.before) {
 113                 inputblock.cn.push({
 114                     tag :'span',
 115                     cls : 'input-group-addon',
 116                     html : this.before
 117                 });
 118             }
 119
 120             inputblock.cn.push(input);
 121
 122             if (this.after) {
 123                 inputblock.cn.push({
 124                     tag :'span',
 125                     cls : 'input-group-addon',
 126                     html : this.after
 127                 });
 128             }
 129
 130         }
 131
 132         if (align ==='left' && this.fieldLabel.length) {
 133 //                Roo.log("left and has label");
 134                 cfg.cn = [
 135
 136                     {
 137                         tag: 'label',
 138                         'for' :  id,
 139                         cls : 'control-label col-md-' + this.labelWidth,
 140                         html : this.fieldLabel
 141
 142                     },
 143                     {
 144                         cls : "col-md-" + (12 - this.labelWidth),
 145                         cn: [
 146                             inputblock
 147                         ]
 148                     }
 149
 150                 ];
 151         } else if ( this.fieldLabel.length) {
 152 //                Roo.log(" label");
 153                 cfg.cn = [
 154
 155                     {
 156                         tag: this.boxLabel ? 'span' : 'label',
 157                         'for': id,
 158                         cls: 'control-label box-input-label',
 159                         //cls : 'input-group-addon',
 160                         html : this.fieldLabel
 161
 162                     },
 163
 164                     inputblock
 165
 166                 ];
 167
 168         } else {
 169
 170 //                Roo.log(" no label && no align");
 171                 cfg.cn = [  inputblock ] ;
 172
 173
 174         }
 175
 176         if(this.boxLabel){
 177              var boxLabelCfg = {
 178                 tag: 'label',
 179                 //'for': id, // box label is handled by onclick - so no for...
 180                 cls: 'box-label',
 181                 html: this.boxLabel
 182             };
 183
 184             if(this.tooltip){
 185                 boxLabelCfg.tooltip = this.tooltip;
 186             }
 187
 188             cfg.cn.push(boxLabelCfg);
 189         }
 190
 191
 192
 193         return cfg;
 194
 195     },
 196
 197     /**
 198      * return the real input element.
 199      */
 200     inputEl: function ()
 201     {
 202         return this.el.select('input.roo-' + this.inputType,true).first();
 203     },
 204
 205     labelEl: function()
 206     {
 207         return this.el.select('label.control-label',true).first();
 208     },
 209     /* depricated... */
 210
 211     label: function()
 212     {
 213         return this.labelEl();
 214     },
 215
 216     boxLabelEl: function()
 217     {
 218         return this.el.select('label.box-label',true).first();
 219     },
 220
 221     initEvents : function()
 222     {
 223 //        Roo.bootstrap.CheckBox.superclass.initEvents.call(this);
 224
 225         this.inputEl().on('click', this.onClick,  this);
 226
 227         if (this.boxLabel) {
 228             this.el.select('label.box-label',true).first().on('click', this.onClick,  this);
 229         }
 230
 231         this.startValue = this.getValue();
 232
 233         if(this.groupId){
 234             Roo.bootstrap.CheckBox.register(this);
 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             this.validate();
 262
 263             return;
 264         }
 265
 266         this.checked = state;
 267
 268         this.inputEl().dom.checked = state;
 269
 270         this.inputEl().dom.value = state ? this.inputValue : this.valueOff;
 271
 272         if(suppressEvent !== true){
 273             this.fireEvent('check', this, state);
 274         }
 275
 276         this.validate();
 277     },
 278
 279     getValue : function()
 280     {
 281         if(this.inputType == 'radio'){
 282             return this.getGroupValue();
 283         }
 284
 285         return this.inputEl().getValue();
 286
 287     },
 288
 289     getGroupValue : function()
 290     {
 291         if(typeof(this.el.up('form').child('input[name='+this.name+']:checked', true)) == 'undefined'){
 292             return '';
 293         }
 294
 295         return this.el.up('form').child('input[name='+this.name+']:checked', true).value;
 296     },
 297
 298     setValue : function(v,suppressEvent)
 299     {
 300         if(this.inputType == 'radio'){
 301             this.setGroupValue(v, suppressEvent);
 302             return;
 303         }
 304
 305         this.setChecked(((typeof(v) == 'undefined') ? this.checked : (String(v) === String(this.inputValue))), suppressEvent);
 306
 307         this.validate();
 308     },
 309
 310     setGroupValue : function(v, suppressEvent)
 311     {
 312         this.startValue = this.getValue();
 313
 314         Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
 315             e.dom.checked = false;
 316
 317             if(e.dom.value == v){
 318                 e.dom.checked = true;
 319             }
 320         });
 321
 322         if(suppressEvent !== true){
 323             this.fireEvent('check', this, true);
 324         }
 325
 326         this.validate();
 327
 328         return;
 329     },
 330
 331     validate : function()
 332     {
 333         if(
 334                 this.disabled ||
 335                 (this.inputType == 'radio' && this.validateRadio()) ||
 336                 (this.inputType == 'checkbox' && this.validateCheckbox())
 337         ){
 338             this.markValid();
 339             return true;
 340         }
 341
 342         this.markInvalid();
 343         return false;
 344     },
 345
 346     validateRadio : function()
 347     {
 348         if(this.allowBlank){
 349             return true;
 350         }
 351
 352         var valid = false;
 353
 354         Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
 355             if(!e.dom.checked){
 356                 return;
 357             }
 358
 359             valid = true;
 360
 361             return false;
 362         });
 363
 364         return valid;
 365     },
 366
 367     validateCheckbox : function()
 368     {
 369         if(!this.groupId){
 370             return (this.getValue() == this.inputValue || this.allowBlank) ? true : false;
 371         }
 372
 373         var group = Roo.bootstrap.CheckBox.get(this.groupId);
 374
 375         if(!group){
 376             return false;
 377         }
 378
 379         var r = false;
 380
 381         for(var i in group){
 382             if(r){
 383                 break;
 384             }
 385
 386             r = (group[i].getValue() == group[i].inputValue) ? true : false;
 387         }
 388
 389         return r;
 390     },
 391
 392     /**
 393      * Mark this field as valid
 394      */
 395     markValid : function()
 396     {
 397         if(this.allowBlank){
 398             return;
 399         }
 400
 401         var _this = this;
 402
 403         this.fireEvent('valid', this);
 404
 405         var label = Roo.bootstrap.FieldLabel.get(this.name + '-group');
 406
 407         if(this.groupId){
 408             label = Roo.bootstrap.FieldLabel.get(this.groupId + '-group');
 409         }
 410
 411         if(label){
 412             label.markValid();
 413         }
 414
 415         if(this.inputType == 'radio'){
 416             Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
 417                 e.findParent('.form-group', false, true).removeClass([_this.invalidClass, _this.validClass]);
 418                 e.findParent('.form-group', false, true).addClass(_this.validClass);
 419             });
 420
 421             return;
 422         }
 423
 424         if(!this.groupId){
 425             this.el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]);
 426             this.el.findParent('.form-group', false, true).addClass(this.validClass);
 427             return;
 428         }
 429
 430         var group = Roo.bootstrap.CheckBox.get(this.groupId);
 431
 432         if(!group){
 433             return;
 434         }
 435
 436         for(var i in group){
 437             group[i].el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]);
 438             group[i].el.findParent('.form-group', false, true).addClass(this.validClass);
 439         }
 440     },
 441
 442      /**
 443      * Mark this field as invalid
 444      * @param {String} msg The validation message
 445      */
 446     markInvalid : function(msg)
 447     {
 448         if(this.allowBlank){
 449             return;
 450         }
 451
 452         var _this = this;
 453
 454         this.fireEvent('invalid', this, msg);
 455
 456         var label = Roo.bootstrap.FieldLabel.get(this.name + '-group');
 457
 458         if(this.groupId){
 459             label = Roo.bootstrap.FieldLabel.get(this.groupId + '-group');
 460         }
 461
 462         if(label){
 463             label.markInvalid();
 464         }
 465
 466         if(this.inputType == 'radio'){
 467             Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
 468                 e.findParent('.form-group', false, true).removeClass([_this.invalidClass, _this.validClass]);
 469                 e.findParent('.form-group', false, true).addClass(_this.invalidClass);
 470             });
 471
 472             return;
 473         }
 474
 475         if(!this.groupId){
 476             this.el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]);
 477             this.el.findParent('.form-group', false, true).addClass(this.invalidClass);
 478             return;
 479         }
 480
 481         var group = Roo.bootstrap.CheckBox.get(this.groupId);
 482
 483         if(!group){
 484             return;
 485         }
 486
 487         for(var i in group){
 488             group[i].el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]);
 489             group[i].el.findParent('.form-group', false, true).addClass(this.invalidClass);
 490         }
 491
 492     },
 493
 494     disable : function()
 495     {
 496         if(this.inputType != 'radio'){
 497             Roo.bootstrap.CheckBox.superclass.disable.call(this);
 498             return;
 499         }
 500
 501         var _this = this;
 502
 503         if(this.rendered){
 504             Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
 505                 _this.getActionEl().addClass(this.disabledClass);
 506                 e.dom.disabled = true;
 507             });
 508         }
 509
 510         this.disabled = true;
 511         this.fireEvent("disable", this);
 512         return this;
 513     },
 514
 515     enable : function()
 516     {
 517         if(this.inputType != 'radio'){
 518             Roo.bootstrap.CheckBox.superclass.enable.call(this);
 519             return;
 520         }
 521
 522         var _this = this;
 523
 524         if(this.rendered){
 525             Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
 526                 _this.getActionEl().removeClass(this.disabledClass);
 527                 e.dom.disabled = false;
 528             });
 529         }
 530
 531         this.disabled = false;
 532         this.fireEvent("enable", this);
 533         return this;
 534     }
 535
 536
 537 });
 538
 539 Roo.apply(Roo.bootstrap.CheckBox, {
 540
 541     groups: {},
 542
 543      /**
 544     * register a CheckBox Group
 545     * @param {Roo.bootstrap.CheckBox} the CheckBox to add
 546     */
 547     register : function(checkbox)
 548     {
 549         if(typeof(this.groups[checkbox.groupId]) == 'undefined'){
 550             this.groups[checkbox.groupId] = {};
 551         }
 552
 553         if(this.groups[checkbox.groupId].hasOwnProperty(checkbox.name)){
 554             return;
 555         }
 556
 557         this.groups[checkbox.groupId][checkbox.name] = checkbox;
 558
 559     },
 560     /**
 561     * fetch a CheckBox Group based on the group ID
 562     * @param {string} the group ID
 563     * @returns {Roo.bootstrap.CheckBox} the CheckBox group
 564     */
 565     get: function(groupId) {
 566         if (typeof(this.groups[groupId]) == 'undefined') {
 567             return false;
 568         }
 569
 570         return this.groups[groupId] ;
 571     }
 572
 573
 574 });