+++ /dev/null
-/*
- * - LGPL
- *
- * CheckBox
- *
- */
-
-/**
- * @class Roo.bootstrap.CheckBox
- * @extends Roo.bootstrap.Input
- * Bootstrap CheckBox class
- *
- * @cfg {String} valueOff The value that should go into the generated input element's value when unchecked.
- * @cfg {String} inputValue The value that should go into the generated input element's value when checked.
- * @cfg {String} boxLabel The text that appears beside the checkbox
- * @cfg {String} weight (primary|warning|info|danger|success) The text that appears beside the checkbox
- * @cfg {Boolean} checked initnal the element
- * @cfg {Boolean} inline inline the element (default false)
- * @cfg {String} groupId the checkbox group id // normal just use for checkbox
- * @cfg {String} tooltip label tooltip
- *
- * @constructor
- * Create a new CheckBox
- * @param {Object} config The config object
- */
-
-Roo.bootstrap.CheckBox = function(config){
- Roo.bootstrap.CheckBox.superclass.constructor.call(this, config);
-
- this.addEvents({
- /**
- * @event check
- * Fires when the element is checked or unchecked.
- * @param {Roo.bootstrap.CheckBox} this This input
- * @param {Boolean} checked The new checked value
- */
- check : true,
- /**
- * @event click
- * Fires when the element is click.
- * @param {Roo.bootstrap.CheckBox} this This input
- */
- 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 : '',
-
- // checkbox success does not make any sense really..
- 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; //input-group
-
- 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, //'form-box',
- 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) { // Validity check?
- 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',
- //'for': id, // box label is handled by onclick - so no for...
- cls: 'box-label',
- html: this.boxLabel
- };
- if(this.tooltip){
- boxLabelCfg.tooltip = this.tooltip;
- }
-
- }
-
-
- if (align ==='left' && this.fieldLabel.length) {
-// Roo.log("left and has label");
- 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) {
-// Roo.log(" label");
- cfg.cn = [
-
- {
- tag: this.boxLabel ? 'span' : 'label',
- 'for': id,
- cls: 'control-label box-input-label',
- //cls : 'input-group-addon',
- html : this.fieldLabel
- },
-
- inputblock
-
- ];
- if (boxLabelCfg) {
- cfg.cn.push(boxLabelCfg);
- }
-
- } else {
-
-// Roo.log(" no label && no align");
- cfg.cn = [ inputblock ] ;
- if (boxLabelCfg) {
- cfg.cn.push(boxLabelCfg);
- }
-
-
- }
-
-
-
- if(this.inputType != 'radio'){
- cfg.cn.push(hidden);
- }
-
- return cfg;
-
- },
-
- /**
- * return the real input element.
- */
- 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();
- },
- /* depricated... */
-
- label: function()
- {
- return this.labelEl();
- },
-
- boxLabelEl: function()
- {
- return this.el.select('label.box-label',true).first();
- },
-
- initEvents : function()
- {
-// Roo.bootstrap.CheckBox.superclass.initEvents.call(this);
-
- 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;
- //return (this.getValue() == this.inputValue) ? 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;
- },
-
- /**
- * Mark this field as valid
- */
- 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');
- }
- }
- },
-
- /**
- * Mark this field as invalid
- * @param {String} msg The validation message
- */
- 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);
-
- // this.el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]);
-
- 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 a CheckBox Group
- * @param {Roo.bootstrap.CheckBox} the CheckBox to add
- */
- 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;
-
- },
- /**
- * fetch a CheckBox Group based on the group ID
- * @param {string} the group ID
- * @returns {Roo.bootstrap.CheckBox} the CheckBox group
- */
- get: function(groupId) {
- if (typeof(this.groups[groupId]) == 'undefined') {
- return false;
- }
-
- return this.groups[groupId] ;
- }
-
-
-});
projects / roojs1 / blobdiff