Roo.bootstrap.CheckBox = function(config){
Roo.bootstrap.CheckBox.superclass.constructor.call(this, config);
this.addEvents({
check : true,
click : true
});
};
Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, {
inputType: 'checkbox',
inputValue: 1,
valueOff: 0,
boxLabel: false,
checked: false,
weight : false,
inline: false,
tooltip : '',
invalidClass : "",
validClass : "",
getAutoCreate : function()
{
var align = (!this.labelAlign) ? this.parentLabelAlign() : this.labelAlign;
var id = Roo.id();
var cfg = {};
cfg.cls = 'form-group form-check ' + this.inputType; if(this.inline){
cfg.cls += ' ' + this.inputType + '-inline form-check-inline';
}
var input = {
tag: 'input',
id : id,
type : this.inputType,
value : this.inputValue,
cls : 'roo-' + this.inputType, placeholder : this.placeholder || ''
};
if(this.inputType != 'radio'){
var hidden = {
tag: 'input',
type : 'hidden',
cls : 'roo-hidden-value',
value : this.checked ? this.inputValue : this.valueOff
};
}
if (this.weight) { cfg.cls += " " + this.inputType + "-" + this.weight;
}
if (this.disabled) {
input.disabled=true;
}
if(this.checked){
input.checked = this.checked;
}
if (this.name) {
input.name = this.name;
if(this.inputType != 'radio'){
hidden.name = this.name;
input.name = '_hidden_' + this.name;
}
}
if (this.size) {
input.cls += ' input-' + this.size;
}
var settings=this;
['xs','sm','md','lg'].map(function(size){
if (settings[size]) {
cfg.cls += ' col-' + size + '-' + settings[size];
}
});
var inputblock = input;
if (this.before || this.after) {
inputblock = {
cls : 'input-group',
cn : []
};
if (this.before) {
inputblock.cn.push({
tag :'span',
cls : 'input-group-addon',
html : this.before
});
}
inputblock.cn.push(input);
if(this.inputType != 'radio'){
inputblock.cn.push(hidden);
}
if (this.after) {
inputblock.cn.push({
tag :'span',
cls : 'input-group-addon',
html : this.after
});
}
}
var boxLabelCfg = false;
if(this.boxLabel){
boxLabelCfg = {
tag: 'label',
cls: 'box-label',
html: this.boxLabel
};
if(this.tooltip){
boxLabelCfg.tooltip = this.tooltip;
}
}
if (align ==='left' && this.fieldLabel.length) {
cfg.cn = [
{
tag: 'label',
'for' : id,
cls : 'control-label',
html : this.fieldLabel
},
{
cls : "",
cn: [
inputblock
]
}
];
if (boxLabelCfg) {
cfg.cn[1].cn.push(boxLabelCfg);
}
if(this.labelWidth > 12){
cfg.cn[0].style = "width: " + this.labelWidth + 'px';
}
if(this.labelWidth < 13 && this.labelmd == 0){
this.labelmd = this.labelWidth;
}
if(this.labellg > 0){
cfg.cn[0].cls += ' col-lg-' + this.labellg;
cfg.cn[1].cls += ' col-lg-' + (12 - this.labellg);
}
if(this.labelmd > 0){
cfg.cn[0].cls += ' col-md-' + this.labelmd;
cfg.cn[1].cls += ' col-md-' + (12 - this.labelmd);
}
if(this.labelsm > 0){
cfg.cn[0].cls += ' col-sm-' + this.labelsm;
cfg.cn[1].cls += ' col-sm-' + (12 - this.labelsm);
}
if(this.labelxs > 0){
cfg.cn[0].cls += ' col-xs-' + this.labelxs;
cfg.cn[1].cls += ' col-xs-' + (12 - this.labelxs);
}
} else if ( this.fieldLabel.length) {
cfg.cn = [
{
tag: this.boxLabel ? 'span' : 'label',
'for': id,
cls: 'control-label box-input-label',
html : this.fieldLabel
},
inputblock
];
if (boxLabelCfg) {
cfg.cn.push(boxLabelCfg);
}
} else {
cfg.cn = [ inputblock ] ;
if (boxLabelCfg) {
cfg.cn.push(boxLabelCfg);
}
}
if(this.inputType != 'radio'){
cfg.cn.push(hidden);
}
return cfg;
},
inputEl: function ()
{
return this.el.select('input.roo-' + this.inputType,true).first();
},
hiddenEl: function ()
{
return this.el.select('input.roo-hidden-value',true).first();
},
labelEl: function()
{
return this.el.select('label.control-label',true).first();
},
label: function()
{
return this.labelEl();
},
boxLabelEl: function()
{
return this.el.select('label.box-label',true).first();
},
initEvents : function()
{
this.inputEl().on('click', this.onClick, this);
if (this.boxLabel) {
this.el.select('label.box-label',true).first().on('click', this.onClick, this);
}
this.startValue = this.getValue();
if(this.groupId){
Roo.bootstrap.CheckBox.register(this);
}
},
onClick : function(e)
{
if(this.fireEvent('click', this, e) !== false){
this.setChecked(!this.checked);
}
},
setChecked : function(state,suppressEvent)
{
this.startValue = this.getValue();
if(this.inputType == 'radio'){
Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
e.dom.checked = false;
});
this.inputEl().dom.checked = true;
this.inputEl().dom.value = this.inputValue;
if(suppressEvent !== true){
this.fireEvent('check', this, true);
}
this.validate();
return;
}
this.checked = state;
this.inputEl().dom.checked = state;
this.hiddenEl().dom.value = state ? this.inputValue : this.valueOff;
if(suppressEvent !== true){
this.fireEvent('check', this, state);
}
this.validate();
},
getValue : function()
{
if(this.inputType == 'radio'){
return this.getGroupValue();
}
return this.hiddenEl().dom.value;
},
getGroupValue : function()
{
if(typeof(this.el.up('form').child('input[name='+this.name+']:checked', true)) == 'undefined'){
return '';
}
return this.el.up('form').child('input[name='+this.name+']:checked', true).value;
},
setValue : function(v,suppressEvent)
{
if(this.inputType == 'radio'){
this.setGroupValue(v, suppressEvent);
return;
}
this.setChecked(((typeof(v) == 'undefined') ? this.checked : (String(v) === String(this.inputValue))), suppressEvent);
this.validate();
},
setGroupValue : function(v, suppressEvent)
{
this.startValue = this.getValue();
Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
e.dom.checked = false;
if(e.dom.value == v){
e.dom.checked = true;
}
});
if(suppressEvent !== true){
this.fireEvent('check', this, true);
}
this.validate();
return;
},
validate : function()
{
if(this.getVisibilityEl().hasClass('hidden')){
return true;
}
if(
this.disabled ||
(this.inputType == 'radio' && this.validateRadio()) ||
(this.inputType == 'checkbox' && this.validateCheckbox())
){
this.markValid();
return true;
}
this.markInvalid();
return false;
},
validateRadio : function()
{
if(this.getVisibilityEl().hasClass('hidden')){
return true;
}
if(this.allowBlank){
return true;
}
var valid = false;
Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
if(!e.dom.checked){
return;
}
valid = true;
return false;
});
return valid;
},
validateCheckbox : function()
{
if(!this.groupId){
return (this.getValue() == this.inputValue || this.allowBlank) ? true : false;
}
var group = Roo.bootstrap.CheckBox.get(this.groupId);
if(!group){
return false;
}
var r = false;
for(var i in group){
if(group[i].el.isVisible(true)){
r = false;
break;
}
r = true;
}
for(var i in group){
if(r){
break;
}
r = (group[i].getValue() == group[i].inputValue) ? true : false;
}
return r;
},
markValid : function()
{
var _this = this;
this.fireEvent('valid', this);
var label = Roo.bootstrap.FieldLabel.get(this.name + '-group');
if(this.groupId){
label = Roo.bootstrap.FieldLabel.get(this.groupId + '-group');
}
if(label){
label.markValid();
}
if(this.inputType == 'radio'){
Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
var fg = e.findParent('.form-group', false, true);
if (Roo.bootstrap.version == 3) {
fg.removeClass([_this.invalidClass, _this.validClass]);
fg.addClass(_this.validClass);
} else {
fg.removeClass(['is-valid', 'is-invalid']);
fg.addClass('is-valid');
}
});
return;
}
if(!this.groupId){
var fg = this.el.findParent('.form-group', false, true);
if (Roo.bootstrap.version == 3) {
fg.removeClass([this.invalidClass, this.validClass]);
fg.addClass(this.validClass);
} else {
fg.removeClass(['is-valid', 'is-invalid']);
fg.addClass('is-valid');
}
return;
}
var group = Roo.bootstrap.CheckBox.get(this.groupId);
if(!group){
return;
}
for(var i in group){
var fg = group[i].el.findParent('.form-group', false, true);
if (Roo.bootstrap.version == 3) {
fg.removeClass([this.invalidClass, this.validClass]);
fg.addClass(this.validClass);
} else {
fg.removeClass(['is-valid', 'is-invalid']);
fg.addClass('is-valid');
}
}
},
markInvalid : function(msg)
{
if(this.allowBlank){
return;
}
var _this = this;
this.fireEvent('invalid', this, msg);
var label = Roo.bootstrap.FieldLabel.get(this.name + '-group');
if(this.groupId){
label = Roo.bootstrap.FieldLabel.get(this.groupId + '-group');
}
if(label){
label.markInvalid();
}
if(this.inputType == 'radio'){
Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
var fg = e.findParent('.form-group', false, true);
if (Roo.bootstrap.version == 3) {
fg.removeClass([_this.invalidClass, _this.validClass]);
fg.addClass(_this.invalidClass);
} else {
fg.removeClass(['is-invalid', 'is-valid']);
fg.addClass('is-invalid');
}
});
return;
}
if(!this.groupId){
var fg = this.el.findParent('.form-group', false, true);
if (Roo.bootstrap.version == 3) {
fg.removeClass([_this.invalidClass, _this.validClass]);
fg.addClass(_this.invalidClass);
} else {
fg.removeClass(['is-invalid', 'is-valid']);
fg.addClass('is-invalid');
}
return;
}
var group = Roo.bootstrap.CheckBox.get(this.groupId);
if(!group){
return;
}
for(var i in group){
var fg = group[i].el.findParent('.form-group', false, true);
if (Roo.bootstrap.version == 3) {
fg.removeClass([_this.invalidClass, _this.validClass]);
fg.addClass(_this.invalidClass);
} else {
fg.removeClass(['is-invalid', 'is-valid']);
fg.addClass('is-invalid');
}
}
},
clearInvalid : function()
{
Roo.bootstrap.Input.prototype.clearInvalid.call(this);
var label = Roo.bootstrap.FieldLabel.get(this.name + '-group');
if (label && label.iconEl) {
label.iconEl.removeClass([ label.validClass, label.invalidClass ]);
label.iconEl.removeClass(['is-invalid', 'is-valid']);
}
},
disable : function()
{
if(this.inputType != 'radio'){
Roo.bootstrap.CheckBox.superclass.disable.call(this);
return;
}
var _this = this;
if(this.rendered){
Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
_this.getActionEl().addClass(this.disabledClass);
e.dom.disabled = true;
});
}
this.disabled = true;
this.fireEvent("disable", this);
return this;
},
enable : function()
{
if(this.inputType != 'radio'){
Roo.bootstrap.CheckBox.superclass.enable.call(this);
return;
}
var _this = this;
if(this.rendered){
Roo.each(this.el.up('form').select('input[name='+this.name+']', true).elements, function(e){
_this.getActionEl().removeClass(this.disabledClass);
e.dom.disabled = false;
});
}
this.disabled = false;
this.fireEvent("enable", this);
return this;
},
setBoxLabel : function(v)
{
this.boxLabel = v;
if(this.rendered){
this.el.select('label.box-label',true).first().dom.innerHTML = (v === null || v === undefined ? '' : v);
}
}
});
Roo.apply(Roo.bootstrap.CheckBox, {
groups: {},
register : function(checkbox)
{
if(typeof(this.groups[checkbox.groupId]) == 'undefined'){
this.groups[checkbox.groupId] = {};
}
if(this.groups[checkbox.groupId].hasOwnProperty(checkbox.name)){
return;
}
this.groups[checkbox.groupId][checkbox.name] = checkbox;
},
get: function(groupId) {
if (typeof(this.groups[groupId]) == 'undefined') {
return false;
}
return this.groups[groupId] ;
}
});