From: Alan Knowles Date: Thu, 5 Dec 2019 08:44:56 +0000 (+0800) Subject: adjust boxlabel for checkbox left X-Git-Url: http://git.roojs.org/?p=roojs1;a=commitdiff_plain;h=c4633a766e848fbed06920500905341051489777 adjust boxlabel for checkbox left --- diff --git a/Roo/bootstrap/CheckBox.js b/Roo/bootstrap/CheckBox.js index c2978b3c16..7e86ad0afb 100644 --- a/Roo/bootstrap/CheckBox.js +++ b/Roo/bootstrap/CheckBox.js @@ -156,6 +156,22 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, { } } + 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"); @@ -174,6 +190,10 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, { } ]; + if (boxLabelCfg) { + cfg.cn[1].cn.push(boxLabelCfg); + } + if(this.labelWidth > 12){ cfg.cn[0].style = "width: " + this.labelWidth + 'px'; } @@ -217,29 +237,22 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, { 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.boxLabel){ - var 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; - } - - cfg.cn.push(boxLabelCfg); - } + if(this.inputType != 'radio'){ cfg.cn.push(hidden); diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index f00827f9d0..ac39933d54 100644 --- a/roojs-bootstrap-debug.js +++ b/roojs-bootstrap-debug.js @@ -20999,6 +20999,22 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, { } } + 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"); @@ -21017,6 +21033,10 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, { } ]; + if (boxLabelCfg) { + cfg.cn[1].cn.push(boxLabelCfg); + } + if(this.labelWidth > 12){ cfg.cn[0].style = "width: " + this.labelWidth + 'px'; } @@ -21060,29 +21080,22 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input, { 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.boxLabel){ - var 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; - } - - cfg.cn.push(boxLabelCfg); - } + if(this.inputType != 'radio'){ cfg.cn.push(hidden); diff --git a/roojs-bootstrap.js b/roojs-bootstrap.js index ac93520804..8cdad192e6 100644 --- a/roojs-bootstrap.js +++ b/roojs-bootstrap.js @@ -875,18 +875,19 @@ Roo.bootstrap.CheckBox=function(A){Roo.bootstrap.CheckBox.superclass.constructor var id=Roo.id();var B={};B.cls='form-group '+this.inputType;if(this.inline){B.cls+=' '+this.inputType+'-inline';}var C={tag:'input',id:id,type:this.inputType,value:this.inputValue,cls:'roo-'+this.inputType,placeholder:this.placeholder||''};if(this.inputType!='radio'){var D={tag:'input',type:'hidden',cls:'roo-hidden-value',value:this.checked?this.inputValue:this.valueOff} ;}if(this.weight){B.cls+=" "+this.inputType+"-"+this.weight;}if(this.disabled){C.disabled=true;}if(this.checked){C.checked=this.checked;}if(this.name){C.name=this.name;if(this.inputType!='radio'){D.name=this.name;C.name='_hidden_'+this.name;}}if(this.size){C.cls+=' input-'+this.size; }var E=this;['xs','sm','md','lg'].map(function(H){if(E[H]){B.cls+=' col-'+H+'-'+E[H];}});var F=C;if(this.before||this.after){F={cls:'input-group',cn:[]};if(this.before){F.cn.push({tag:'span',cls:'input-group-addon',html:this.before});}F.cn.push(C);if(this.inputType!='radio'){F.cn.push(D); -}if(this.after){F.cn.push({tag:'span',cls:'input-group-addon',html:this.after});}}if(A==='left'&&this.fieldLabel.length){B.cn=[{tag:'label','for':id,cls:'control-label',html:this.fieldLabel},{cls:"",cn:[F]}];if(this.labelWidth>12){B.cn[0].style="width: "+this.labelWidth+'px'; -}if(this.labelWidth<13&&this.labelmd==0){this.labelmd=this.labelWidth;}if(this.labellg>0){B.cn[0].cls+=' col-lg-'+this.labellg;B.cn[1].cls+=' col-lg-'+(12-this.labellg);}if(this.labelmd>0){B.cn[0].cls+=' col-md-'+this.labelmd;B.cn[1].cls+=' col-md-'+(12-this.labelmd); -}if(this.labelsm>0){B.cn[0].cls+=' col-sm-'+this.labelsm;B.cn[1].cls+=' col-sm-'+(12-this.labelsm);}if(this.labelxs>0){B.cn[0].cls+=' col-xs-'+this.labelxs;B.cn[1].cls+=' col-xs-'+(12-this.labelxs);}}else if(this.fieldLabel.length){B.cn=[{tag:this.boxLabel?'span':'label','for':id,cls:'control-label box-input-label',html:this.fieldLabel} -,F];}else{B.cn=[F];}if(this.boxLabel){var G={tag:'label',cls:'box-label',html:this.boxLabel};if(this.tooltip){G.tooltip=this.tooltip;}B.cn.push(G);}if(this.inputType!='radio'){B.cn.push(D);}return B;},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(A,B){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(B!==true){this.fireEvent('check',this,true);}this.validate();return;}this.checked=A;this.inputEl().dom.checked=A;this.hiddenEl().dom.value=A?this.inputValue:this.valueOff;if(B!==true){this.fireEvent('check',this,A);}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,A){if(this.inputType=='radio'){this.setGroupValue(v,A); -return;}this.setChecked(((typeof(v)=='undefined')?this.checked:(String(v)===String(this.inputValue))),A);this.validate();},setGroupValue:function(v,A){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(A!==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 A=false;Roo.each(this.el.up('form').select('input[name='+this.name+']',true).elements,function(e){if(!e.dom.checked){return; +}if(this.after){F.cn.push({tag:'span',cls:'input-group-addon',html:this.after});}}var G=false;if(this.boxLabel){G={tag:'label',cls:'box-label',html:this.boxLabel};if(this.tooltip){G.tooltip=this.tooltip;}}if(A==='left'&&this.fieldLabel.length){B.cn=[{tag:'label','for':id,cls:'control-label',html:this.fieldLabel} +,{cls:"",cn:[F]}];if(G){B.cn[1].cn.push(G);}if(this.labelWidth>12){B.cn[0].style="width: "+this.labelWidth+'px';}if(this.labelWidth<13&&this.labelmd==0){this.labelmd=this.labelWidth;}if(this.labellg>0){B.cn[0].cls+=' col-lg-'+this.labellg;B.cn[1].cls+=' col-lg-'+(12-this.labellg); +}if(this.labelmd>0){B.cn[0].cls+=' col-md-'+this.labelmd;B.cn[1].cls+=' col-md-'+(12-this.labelmd);}if(this.labelsm>0){B.cn[0].cls+=' col-sm-'+this.labelsm;B.cn[1].cls+=' col-sm-'+(12-this.labelsm);}if(this.labelxs>0){B.cn[0].cls+=' col-xs-'+this.labelxs; +B.cn[1].cls+=' col-xs-'+(12-this.labelxs);}}else if(this.fieldLabel.length){B.cn=[{tag:this.boxLabel?'span':'label','for':id,cls:'control-label box-input-label',html:this.fieldLabel},F];if(G){B.cn.push(G);}}else{B.cn=[F];if(G){B.cn.push(G);}}if(this.inputType!='radio'){B.cn.push(D); +}return B;},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(A,B){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(B!==true){this.fireEvent('check',this,true);}this.validate();return;}this.checked=A;this.inputEl().dom.checked=A;this.hiddenEl().dom.value=A?this.inputValue:this.valueOff;if(B!==true){this.fireEvent('check',this,A); +}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,A){if(this.inputType=='radio'){this.setGroupValue(v,A);return;}this.setChecked(((typeof(v)=='undefined')?this.checked:(String(v)===String(this.inputValue))),A); +this.validate();},setGroupValue:function(v,A){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(A!==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 A=false;Roo.each(this.el.up('form').select('input[name='+this.name+']',true).elements,function(e){if(!e.dom.checked){return; }A=true;return false;});return A;},validateCheckbox:function(){if(!this.groupId){return (this.getValue()==this.inputValue||this.allowBlank)?true:false;}var A=Roo.bootstrap.CheckBox.get(this.groupId);if(!A){return false;}var r=false;for(var i in A){if(A[i].el.isVisible(true)){r=false; break;}r=true;}for(var i in A){if(r){break;}r=(A[i].getValue()==A[i].inputValue)?true:false;}return r;},markValid:function(){var A=this;this.fireEvent('valid',this);var B=Roo.bootstrap.FieldLabel.get(this.name+'-group');if(this.groupId){B=Roo.bootstrap.FieldLabel.get(this.groupId+'-group'); }if(B){B.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([A.invalidClass,A.validClass]);