add doAlign to popover so position can be updated after a grid load
authorAlan Knowles <alan@roojs.com>
Wed, 4 Aug 2021 05:52:20 +0000 (13:52 +0800)
committerAlan Knowles <alan@roojs.com>
Wed, 4 Aug 2021 05:52:20 +0000 (13:52 +0800)
Roo/bootstrap/Popover.js
docs/json/roodata.json
docs/src/Roo_bootstrap_Popover.js.html
docs/symbols/Roo.bootstrap.Popover.json
roojs-bootstrap-debug.js
roojs-bootstrap.js

index 7ad1a52..0d5b6ce 100644 (file)
@@ -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], 
index 86bbb36..216fa24 100644 (file)
           }
         ]
       },
+      {
+        "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",
index 0a3373a..5e01a99 100644 (file)
             }
         }, </span><span class="jsdoc-var">this.delay.hide</span><span class="jsdoc-syntax">)
     },
+
+    </span><span class="jsdoc-comment">/**
+     * update the position of the dialog
+     * normally this is needed if the popover get's bigger - due to a Table reload etc..
+     * 
+     *
+     */
+
+    </span><span class="jsdoc-var">doAlign </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.alignEl</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">this.updatePosition</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.placement</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+
+        } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-comment">// this is usually just done by the builder = to show the popoup in the middle of the scren.
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">es </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getSize</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.lib.Dom.getViewWidth</span><span class="jsdoc-syntax">()/2;
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.lib.Dom.getViewHeight</span><span class="jsdoc-syntax">()/2;
+            </span><span class="jsdoc-var">this.el.setXY</span><span class="jsdoc-syntax">([ </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">-(</span><span class="jsdoc-var">es.width</span><span class="jsdoc-syntax">/2),  </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">-(</span><span class="jsdoc-var">es.height</span><span class="jsdoc-syntax">/2)] );
+
+        }
+
+
+
+
+
+    },
+
     </span><span class="jsdoc-comment">/**
      * Show the popover
      * @param {Roo.Element|string|Boolean} - element to align and point to. (set align to [ pos, offset ])
         </span><span class="jsdoc-var">this.el.show</span><span class="jsdoc-syntax">();
         </span><span class="jsdoc-var">this.el.dom.style.display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">;
 
-
-        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.alignEl</span><span class="jsdoc-syntax">) {
-            </span><span class="jsdoc-var">this.updatePosition</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.placement</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
-
-        } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
-            </span><span class="jsdoc-comment">// this is usually just done by the builder = to show the popoup in the middle of the scren.
-            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">es </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getSize</span><span class="jsdoc-syntax">();
-            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.lib.Dom.getViewWidth</span><span class="jsdoc-syntax">()/2;
-            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.lib.Dom.getViewHeight</span><span class="jsdoc-syntax">()/2;
-            </span><span class="jsdoc-var">this.el.setXY</span><span class="jsdoc-syntax">([ </span><span class="jsdoc-var">x</span><span class="jsdoc-syntax">-(</span><span class="jsdoc-var">es.width</span><span class="jsdoc-syntax">/2),  </span><span class="jsdoc-var">y</span><span class="jsdoc-syntax">-(</span><span class="jsdoc-var">es.height</span><span class="jsdoc-syntax">/2)] );
-
-        }
-
+        </span><span class="jsdoc-var">this.doAlign</span><span class="jsdoc-syntax">();
 
         </span><span class="jsdoc-comment">//var arrow = this.el.select('.arrow',true).first();
         //arrow.set(align[2], 
index 1c9b204..8ce2af9 100644 (file)
       ],
       "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",
index 78b217e..d21eb24 100644 (file)
@@ -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], 
index 77e6506..f3583ce 100644 (file)
@@ -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);