X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=docs%2Fsymbols%2Fsrc%2FRoo_bootstrap_Form.js.html;h=26743246eaccace1ad370fcc71b276eedb0f8b92;hb=c1081f6f4b74fed0a601b8fa1f97a3c6372cb36b;hp=1f95521aeeeff525ac0493c02babb8c030039d95;hpb=3ce24a55f7fd794ff1b2b0cc999eba892abe50ad;p=roojs1
diff --git a/docs/symbols/src/Roo_bootstrap_Form.js.html b/docs/symbols/src/Roo_bootstrap_Form.js.html
index 1f95521aee..26743246ea 100644
--- a/docs/symbols/src/Roo_bootstrap_Form.js.html
+++ b/docs/symbols/src/Roo_bootstrap_Form.js.html
@@ -102,9 +102,14 @@
loadMask : true,
errPopover : false,
+ errorMask : false,
+
+ maskOffset : 100,
getAutoCreate : function(){
@@ -163,11 +168,9 @@
var target = false;
items.each(function(f){
-
if(f.validate()){
return;
}
-
valid = false;
if(!target && f.el.isVisible(true)){
@@ -176,7 +179,7 @@
});
- if(this.errPopover && !valid){
+ if(this.errorMask && !valid){
Roo.bootstrap.Form.popover.mask(this, target);
}
@@ -550,6 +553,8 @@ clientValidation Boolean Applies to submit only. Pass true to call fo
popover : {
+ padding : 5,
+
isApplied : false,
isMasked : false,
@@ -558,18 +563,30 @@ clientValidation Boolean Applies to submit only. Pass true to call fo
target : false,
- oIndex : false,
-
toolTip : false,
intervalID : false,
-
+
+ maskEl : false,
+
apply : function()
{
if(this.isApplied){
return;
}
+ this.maskEl = {
+ top : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-top-mask" }, true),
+ left : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-left-mask" }, true),
+ bottom : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-bottom-mask" }, true),
+ right : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-right-mask" }, true)
+ };
+
+ this.maskEl.top.enableDisplayMode("block");
+ this.maskEl.left.enableDisplayMode("block");
+ this.maskEl.bottom.enableDisplayMode("block");
+ this.maskEl.right.enableDisplayMode("block");
+
this.toolTip = new Roo.bootstrap.Tooltip({
cls : 'roo-form-error-popover',
alignment : {
@@ -582,12 +599,16 @@ clientValidation Boolean Applies to submit only. Pass true to call fo
this.toolTip.render(Roo.get(document.body));
- this.toolTip.el.setVisibilityMode(Roo.Element.DISPLAY);
+ this.toolTip.el.enableDisplayMode("block");
Roo.get(document.body).on('click', function(){
this.unmask();
}, this);
+ Roo.get(document.body).on('touchstart', function(){
+ this.unmask();
+ }, this);
+
this.isApplied = true
},
@@ -597,44 +618,72 @@ clientValidation Boolean Applies to submit only. Pass true to call fo
this.target = target;
- if(!this.form.errPopover){
+ if(!this.form.errorMask || !target.el){
return;
}
-
- this.oIndex = target.el.getStyle('z-index');
-
- this.target.el.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
-
- this.target.el.addClass('roo-invalid-outline');
var scrollable = this.target.el.findScrollableParent() || this.target.el.findParent('div.modal', 100, true) || Roo.get(document.body);
- var scrolled = scrollable.getScroll();
+ Roo.log(scrollable);
var ot = this.target.el.calcOffsetsTo(scrollable);
- var scrollTo = 0;
+ var scrollTo = ot[1] - this.form.maskOffset;
- if(ot[1] <= scrolled.top){
- scrollTo = ot[1] - 100;
- } else {
- scrollTo = ot[1] + Roo.lib.Dom.getViewHeight() - 100;
- }
+ scrollTo = Math.min(scrollTo, scrollable.dom.scrollHeight);
scrollable.scrollTo('top', scrollTo);
+ var box = this.target.el.getBox();
+ Roo.log(box);
+ var zIndex = Roo.bootstrap.Modal.zIndex++;
+
+
+ this.maskEl.top.setStyle('position', 'absolute');
+ this.maskEl.top.setStyle('z-index', zIndex);
+ this.maskEl.top.setSize(Roo.lib.Dom.getDocumentWidth(), box.y - this.padding);
+ this.maskEl.top.setLeft(0);
+ this.maskEl.top.setTop(0);
+ this.maskEl.top.show();
+
+ this.maskEl.left.setStyle('position', 'absolute');
+ this.maskEl.left.setStyle('z-index', zIndex);
+ this.maskEl.left.setSize(box.x - this.padding, box.height + this.padding * 2);
+ this.maskEl.left.setLeft(0);
+ this.maskEl.left.setTop(box.y - this.padding);
+ this.maskEl.left.show();
+
+ this.maskEl.bottom.setStyle('position', 'absolute');
+ this.maskEl.bottom.setStyle('z-index', zIndex);
+ this.maskEl.bottom.setSize(Roo.lib.Dom.getDocumentWidth(), Roo.lib.Dom.getDocumentHeight() - box.bottom - this.padding);
+ this.maskEl.bottom.setLeft(0);
+ this.maskEl.bottom.setTop(box.bottom + this.padding);
+ this.maskEl.bottom.show();
+
+ this.maskEl.right.setStyle('position', 'absolute');
+ this.maskEl.right.setStyle('z-index', zIndex);
+ this.maskEl.right.setSize(Roo.lib.Dom.getDocumentWidth() - box.right - this.padding, box.height + this.padding * 2);
+ this.maskEl.right.setLeft(box.right + this.padding);
+ this.maskEl.right.setTop(box.y - this.padding);
+ this.maskEl.right.show();
+
this.toolTip.bindEl = this.target.el;
-
+
this.toolTip.el.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
var tip = this.target.blankText;
- if(this.target.getValue() !== '' && this.target.regexText.length){
- tip = this.target.regexText;
+ if(this.target.getValue() !== '' ) {
+
+ if (this.target.invalidText.length) {
+ tip = this.target.invalidText;
+ } else if (this.target.regexText.length){
+ tip = this.target.regexText;
+ }
}
this.toolTip.show(tip);
-
+
this.intervalID = window.setInterval(function() {
Roo.bootstrap.Form.popover.unmask();
}, 10000);
@@ -647,15 +696,25 @@ clientValidation Boolean Applies to submit only. Pass true to call fo
unmask : function()
{
- if(!this.isApplied || !this.isMasked || !this.form || !this.target || !this.form.errPopover){
+ if(!this.isApplied || !this.isMasked || !this.form || !this.target || !this.form.errorMask){
return;
}
- if(this.oIndex){
- this.target.el.setStyle('z-index', this.oIndex);
- }
-
- this.target.el.removeClass('roo-invalid-outline');
+ this.maskEl.top.setStyle('position', 'absolute');
+ this.maskEl.top.setSize(0, 0).setXY([0, 0]);
+ this.maskEl.top.hide();
+
+ this.maskEl.left.setStyle('position', 'absolute');
+ this.maskEl.left.setSize(0, 0).setXY([0, 0]);
+ this.maskEl.left.hide();
+
+ this.maskEl.bottom.setStyle('position', 'absolute');
+ this.maskEl.bottom.setSize(0, 0).setXY([0, 0]);
+ this.maskEl.bottom.hide();
+
+ this.maskEl.right.setStyle('position', 'absolute');
+ this.maskEl.right.setSize(0, 0).setXY([0, 0]);
+ this.maskEl.right.hide();
this.toolTip.hide();