From: Alan Knowles Date: Wed, 4 Aug 2021 05:52:20 +0000 (+0800) Subject: add doAlign to popover so position can be updated after a grid load X-Git-Url: http://git.roojs.org/?p=roojs1;a=commitdiff_plain;h=6aaebaca844d16f7f8bb7e8cb51041d0ed7af742 add doAlign to popover so position can be updated after a grid load --- diff --git a/Roo/bootstrap/Popover.js b/Roo/bootstrap/Popover.js index 7ad1a52bff..0d5b6cebf0 100644 --- a/Roo/bootstrap/Popover.js +++ b/Roo/bootstrap/Popover.js @@ -265,6 +265,35 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component, { } }, this.delay.hide) }, + + /** + * update the position of the dialog + * normally this is needed if the popover get's bigger - due to a Table reload etc.. + * + * + */ + + doAlign : function() + { + + if (this.alignEl) { + this.updatePosition(this.placement, true); + + } else { + // this is usually just done by the builder = to show the popoup in the middle of the scren. + var es = this.el.getSize(); + var x = Roo.lib.Dom.getViewWidth()/2; + var y = Roo.lib.Dom.getViewHeight()/2; + this.el.setXY([ x-(es.width/2), y-(es.height/2)] ); + + } + + + + + + }, + /** * Show the popover * @param {Roo.Element|string|Boolean} - element to align and point to. (set align to [ pos, offset ]) @@ -301,19 +330,7 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component, { this.el.show(); this.el.dom.style.display = 'block'; - - if (this.alignEl) { - this.updatePosition(this.placement, true); - - } else { - // this is usually just done by the builder = to show the popoup in the middle of the scren. - var es = this.el.getSize(); - var x = Roo.lib.Dom.getViewWidth()/2; - var y = Roo.lib.Dom.getViewHeight()/2; - this.el.setXY([ x-(es.width/2), y-(es.height/2)] ); - - } - + this.doAlign(); //var arrow = this.el.select('.arrow',true).first(); //arrow.set(align[2], diff --git a/docs/json/roodata.json b/docs/json/roodata.json index 86bbb3691c..216fa24567 100644 --- a/docs/json/roodata.json +++ b/docs/json/roodata.json @@ -93531,6 +93531,25 @@ } ] }, + { + "name" : "doAlign", + "type" : "function", + "desc" : "update the position of the dialog\nnormally this is needed if the popover get's bigger - due to a Table reload etc..", + "sig" : "()\n{\n\n}", + "static" : false, + "memberOf" : "", + "isStatic" : false, + "isConstructor" : false, + "isPrivate" : false, + "example" : "", + "deprecated" : "", + "since" : "", + "see" : "", + "exceptions" : "", + "requires" : "", + "params" : [], + "returns" : [] + }, { "name" : "enable", "type" : "function", diff --git a/docs/src/Roo_bootstrap_Popover.js.html b/docs/src/Roo_bootstrap_Popover.js.html index 0a3373a520..5e01a9920b 100644 --- a/docs/src/Roo_bootstrap_Popover.js.html +++ b/docs/src/Roo_bootstrap_Popover.js.html @@ -265,6 +265,35 @@ } }, this.delay.hide) }, + + /** + * update the position of the dialog + * normally this is needed if the popover get's bigger - due to a Table reload etc.. + * + * + */ + + doAlign : function() + { + + if (this.alignEl) { + this.updatePosition(this.placement, true); + + } else { + // this is usually just done by the builder = to show the popoup in the middle of the scren. + var es = this.el.getSize(); + var x = Roo.lib.Dom.getViewWidth()/2; + var y = Roo.lib.Dom.getViewHeight()/2; + this.el.setXY([ x-(es.width/2), y-(es.height/2)] ); + + } + + + + + + }, + /** * Show the popover * @param {Roo.Element|string|Boolean} - element to align and point to. (set align to [ pos, offset ]) @@ -301,19 +330,7 @@ this.el.show(); this.el.dom.style.display = 'block'; - - if (this.alignEl) { - this.updatePosition(this.placement, true); - - } else { - // this is usually just done by the builder = to show the popoup in the middle of the scren. - var es = this.el.getSize(); - var x = Roo.lib.Dom.getViewWidth()/2; - var y = Roo.lib.Dom.getViewHeight()/2; - this.el.setXY([ x-(es.width/2), y-(es.height/2)] ); - - } - + this.doAlign(); //var arrow = this.el.select('.arrow',true).first(); //arrow.set(align[2], diff --git a/docs/symbols/Roo.bootstrap.Popover.json b/docs/symbols/Roo.bootstrap.Popover.json index 1c9b20446b..8ce2af98c9 100644 --- a/docs/symbols/Roo.bootstrap.Popover.json +++ b/docs/symbols/Roo.bootstrap.Popover.json @@ -256,6 +256,25 @@ ], "returns" : [] }, + { + "name" : "doAlign", + "type" : "function", + "desc" : "update the position of the dialog\nnormally this is needed if the popover get's bigger - due to a Table reload etc..", + "sig" : "()\n{\n\n}", + "static" : false, + "memberOf" : "", + "isStatic" : false, + "isConstructor" : false, + "isPrivate" : false, + "example" : "", + "deprecated" : "", + "since" : "", + "see" : "", + "exceptions" : "", + "requires" : "", + "params" : [], + "returns" : [] + }, { "name" : "setTitle", "type" : "function", diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index 78b217e0fb..d21eb2491f 100644 --- a/roojs-bootstrap-debug.js +++ b/roojs-bootstrap-debug.js @@ -21746,6 +21746,35 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component, { } }, this.delay.hide) }, + + /** + * update the position of the dialog + * normally this is needed if the popover get's bigger - due to a Table reload etc.. + * + * + */ + + doAlign : function() + { + + if (this.alignEl) { + this.updatePosition(this.placement, true); + + } else { + // this is usually just done by the builder = to show the popoup in the middle of the scren. + var es = this.el.getSize(); + var x = Roo.lib.Dom.getViewWidth()/2; + var y = Roo.lib.Dom.getViewHeight()/2; + this.el.setXY([ x-(es.width/2), y-(es.height/2)] ); + + } + + + + + + }, + /** * Show the popover * @param {Roo.Element|string|Boolean} - element to align and point to. (set align to [ pos, offset ]) @@ -21782,19 +21811,7 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component, { this.el.show(); this.el.dom.style.display = 'block'; - - if (this.alignEl) { - this.updatePosition(this.placement, true); - - } else { - // this is usually just done by the builder = to show the popoup in the middle of the scren. - var es = this.el.getSize(); - var x = Roo.lib.Dom.getViewWidth()/2; - var y = Roo.lib.Dom.getViewHeight()/2; - this.el.setXY([ x-(es.width/2), y-(es.height/2)] ); - - } - + this.doAlign(); //var arrow = this.el.select('.arrow',true).first(); //arrow.set(align[2], diff --git a/roojs-bootstrap.js b/roojs-bootstrap.js index 77e650693d..f3583ce8b3 100644 --- a/roojs-bootstrap.js +++ b/roojs-bootstrap.js @@ -903,10 +903,10 @@ this.initEvents();},resizeMask:function(){this.maskEl.setSize(Roo.lib.Dom.getVie this.headerEl.setVisibilityMode(Roo.Element.DISPLAY);this.el.enableDisplayMode('block');this.el.hide();if(this.over===false&&!this.parent()){return;}if(this.triggers===false){return;}var A=(this.over=='parent'||this.over===false)?this.parent().el:Roo.get(this.over); var B=this.trigger?this.trigger.split(' '):[];Roo.each(B,function(C){if(C=='click'){A.on('click',this.toggle,this);}else if(C!='manual'){var D=C=='hover'?'mouseenter':'focusin';var E=C=='hover'?'mouseleave':'focusout';A.on(D,this.enter,this);A.on(E,this.leave,this); }},this);},timeout:null,hoverState:null,toggle:function(){this.hoverState=='in'?this.leave():this.enter();},enter:function(){clearTimeout(this.timeout);this.hoverState='in';if(!this.delay||!this.delay.show){this.show();return;}var _t=this;this.timeout=setTimeout(function(){if(_t.hoverState=='in'){_t.show(); -}},this.delay.show)},leave:function(){clearTimeout(this.timeout);this.hoverState='out';if(!this.delay||!this.delay.hide){this.hide();return;}var _t=this;this.timeout=setTimeout(function(){if(_t.hoverState=='out'){_t.hide();}},this.delay.hide)},show:function(A,B){this.placement=typeof(B)=='undefined'?this.placement:B; -A=A||false;if(!A){if(this.parent()&&(this.over=='parent'||(this.over===false))){A=this.parent().el;}else if(this.over){A=Roo.get(this.over);}}this.alignEl=Roo.get(A);if(!this.el){this.render(document.body);}if(this.title===false){this.headerEl.hide();}this.el.show(); -this.el.dom.style.display='block';if(this.alignEl){this.updatePosition(this.placement,true);}else{var es=this.el.getSize();var x=Roo.lib.Dom.getViewWidth()/2;var y=Roo.lib.Dom.getViewHeight()/2;this.el.setXY([x-(es.width/2),y-(es.height/2)]);}this.el.addClass('in'); -this.hoverState='in';if(this.modal){this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true),Roo.lib.Dom.getViewHeight(true));this.maskEl.setStyle('z-index',Roo.bootstrap.Popover.zIndex++);this.maskEl.dom.style.display='block';this.maskEl.addClass('show');}this.el.setStyle('z-index',Roo.bootstrap.Popover.zIndex++); +}},this.delay.show)},leave:function(){clearTimeout(this.timeout);this.hoverState='out';if(!this.delay||!this.delay.hide){this.hide();return;}var _t=this;this.timeout=setTimeout(function(){if(_t.hoverState=='out'){_t.hide();}},this.delay.hide)},doAlign:function(){if(this.alignEl){this.updatePosition(this.placement,true); +}else{var es=this.el.getSize();var x=Roo.lib.Dom.getViewWidth()/2;var y=Roo.lib.Dom.getViewHeight()/2;this.el.setXY([x-(es.width/2),y-(es.height/2)]);}},show:function(A,B){this.placement=typeof(B)=='undefined'?this.placement:B;A=A||false;if(!A){if(this.parent()&&(this.over=='parent'||(this.over===false))){A=this.parent().el; +}else if(this.over){A=Roo.get(this.over);}}this.alignEl=Roo.get(A);if(!this.el){this.render(document.body);}if(this.title===false){this.headerEl.hide();}this.el.show();this.el.dom.style.display='block';this.doAlign();this.el.addClass('in');this.hoverState='in'; +if(this.modal){this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true),Roo.lib.Dom.getViewHeight(true));this.maskEl.setStyle('z-index',Roo.bootstrap.Popover.zIndex++);this.maskEl.dom.style.display='block';this.maskEl.addClass('show');}this.el.setStyle('z-index',Roo.bootstrap.Popover.zIndex++); this.fireEvent('show',this);},updatePosition:function(A,B){A=A?A:this.placement;B=typeof(B)=='undefined'?true:B;this.el.removeClass(['fade','top','bottom','left','right','in','bs-popover-top','bs-popover-bottom','bs-popover-left','bs-popover-right']);this.el.addClass(A+' bs-popover-'+A); if(!this.alignEl){return false;}switch(A){case 'right':var C=this.el.getAlignToXY(this.alignEl,'tl-tr',[10,0]);var D=this.el.getAlignToXY(this.alignEl,'tl-tr?',[10,0]);if(!B||C.equals(D)||C[0]==D[0]){this.el.setXY(D);var xy=this.alignEl.getAnchorXY('tr',false); xy[0]+=2;xy[1]+=5;this.arrowEl.setXY(xy);return true;}return this.updatePosition('left',false);case 'left':var C=this.el.getAlignToXY(this.alignEl,'tr-tl',[-10,0]);var D=this.el.getAlignToXY(this.alignEl,'tr-tl?',[-10,0]);if(!B||C.equals(D)||C[0]==D[0]){this.el.setXY(D);