roojs-bootstrap.js

roojs-bootstrap-debug.js

diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js
index 171ed6b..8eac0fa 100644 (file)
--- a/roojs-bootstrap-debug.js
+++ b/roojs-bootstrap-debug.js
@@ -19785,10 +19785,12 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component,  {
             Roo.bootstrap.Popover.register(this);
         }
          
-        
+        this.arrowEl = this.el.select('.arrow',true).first();
         this.headerEl.setVisibilityMode(Roo.Element.DISPLAY); // probably not needed as it's default in BS4
         this.el.enableDisplayMode('block');
         this.el.hide();
+ 
+        
         if (this.over === false && !this.parent()) {
             return; 
         }
@@ -19811,7 +19813,6 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component,  {
                 on_el.on(eventOut, this.leave, this);
             }
         }, this);
-        
     },
     
     
@@ -19859,7 +19860,8 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component,  {
     },
     /**
      * Show the popover
-     * @param {Roo.Element|string|false} - element to align and point to. (set align to [ pos, offset ])
+     * @param {Roo.Element|string|Boolean} - element to align and point to. (set align to [ pos, offset ])
+     * @param {string} (left|right|top|bottom) position
      */
     show : function (on_el)
     {
@@ -19916,13 +19918,15 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component,  {
         var box = this.el.getBox();
         
         
-        align = align || Roo.bootstrap.Popover.alignment[placement];
-        this.el.addClass(align[2]);
+        this.alignment = align || Roo.bootstrap.Popover.alignment[placement];
+        this.el.addClass(this.alignment[2]);
 
 //        Roo.log(align);
 
         if (on_el) {
-            this.el.alignTo(on_el, align[0],align[1]);
+            this.alignEl = on_el;
+            this.updatePosition();
+             
         } else {
             // this is usually just done by the builder = to show the popoup in the middle of the scren.
             var es = this.el.getSize();
@@ -19938,10 +19942,7 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component,  {
         
         this.el.addClass('in');
         
-        
-        if (this.el.hasClass('fade')) {
-            // fade it?
-        }
+         
         
         this.hoverState = 'in';
         
@@ -19952,12 +19953,29 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component,  {
             this.maskEl.addClass('show');
         }
         this.el.setStyle('z-index', Roo.bootstrap.Popover.zIndex++);
-
+ 
+        this.fireEvent('show', this);
         
+    },
+    /**
+     * fire this manually after loading a grid in the table for example
+     *
+     */
+    updatePosition : function()
+    {
+        if (!this.alignEl || !this.alignment) {
+            return;
+        }
+        this.el.alignTo(this.alignEl , this.alignment[0],this.alignment[1]);
         
-        this.fireEvent('show', this);
+        // work out the pointy position.
+        var p1 = this.alignment[0].split('-').pop().replace('?','');
+        var xy = this.alignEl.getAnchorXY(p1, false);
+        xy[0]+=2;xy[1]+=5;
+        this.arrowEl.setXY(xy);
         
     },
+    
     hide : function()
     {
         this.el.setXY([0,0]);

diff --git a/roojs-bootstrap.js b/roojs-bootstrap.js
index 9a60d01..5a40e04 100644 (file)
--- a/roojs-bootstrap.js
+++ b/roojs-bootstrap.js
@@ -814,16 +814,17 @@ Roo.bootstrap.Popover=function(A){Roo.bootstrap.Popover.superclass.constructor.c
 ,{cls:'popover-content popover-body '+(this.cls||''),html:this.html||''}]}]};return A;},setTitle:function(A){this.title=A;if(this.el){this.headerEl.dom.innerHTML=A;}},setContent:function(A){this.html=A;if(this.contentEl){this.contentEl.dom.innerHTML=A;}},onRender:function(ct,A){Roo.bootstrap.Component.superclass.onRender.call(this,ct,A);
 if(!this.el){var B=Roo.apply({},this.getAutoCreate());B.id=Roo.id();if(this.cls){B.cls+=' '+this.cls;}if(this.style){B.style=this.style;}this.el=Roo.get(document.body).createChild(B,A);}this.contentEl=this.el.select('.popover-content',true).first();this.headerEl=this.el.select('.popover-title',true).first();
 var C=[];if(typeof(this.items)!='undefined'){var D=this.items;delete this.items;for(var i=0;i<D.length;i++){C.push(this.addxtype(Roo.apply({},D[i])));}}this.items=C;this.maskEl=Roo.DomHelper.append(document.body,{tag:"div",cls:"x-dlg-mask"},true);Roo.EventManager.onWindowResize(this.resizeMask,this,true);
-this.initEvents();},resizeMask:function(){this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true),Roo.lib.Dom.getViewHeight(true));},initEvents:function(){if(!this.modal){Roo.bootstrap.Popover.register(this);}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){A=A||false;var B=A&&typeof(A._align)!='undefined'?A._align:false;
-if(!A){if(this.parent()&&(this.over=='parent'||(this.over===false))){A=this.parent().el;}else if(this.over){Roo.get(this.over);}}if(!this.el){this.render(document.body);}this.el.removeClass(['fade','top','bottom','left','right','in','bs-popover-top','bs-popover-bottom','bs-popover-left','bs-popover-right']);
-if(this.title===false){this.headerEl.hide();}var C=typeof this.placement=='function'?this.placement.call(this,this.el,A):this.placement;this.el.show();this.el.dom.style.display='block';var p=this.getPosition();var D=this.el.getBox();B=B||Roo.bootstrap.Popover.alignment[C];
-this.el.addClass(B[2]);if(A){this.el.alignTo(A,B[0],B[1]);}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');if(this.el.hasClass('fade')){}
-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);},hide:function(){this.el.setXY([0,0]);this.el.removeClass('in');this.el.hide();this.hoverState=null;this.maskEl.hide();this.fireEvent('hide',this);}});Roo.apply(Roo.bootstrap.Popover,{alignment:{'left':['r-l',[-10,0],'left bs-popover-left'],'right':['l-br',[10,0],'right bs-popover-right'],'bottom':['t-b',[0,10],'top bs-popover-top'],'top':['b-t',[0,-10],'bottom bs-popover-bottom']}
+this.initEvents();},resizeMask:function(){this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true),Roo.lib.Dom.getViewHeight(true));},initEvents:function(){if(!this.modal){Roo.bootstrap.Popover.register(this);}this.arrowEl=this.el.select('.arrow',true).first();
+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){A=A||false;
+var B=A&&typeof(A._align)!='undefined'?A._align:false;if(!A){if(this.parent()&&(this.over=='parent'||(this.over===false))){A=this.parent().el;}else if(this.over){Roo.get(this.over);}}if(!this.el){this.render(document.body);}this.el.removeClass(['fade','top','bottom','left','right','in','bs-popover-top','bs-popover-bottom','bs-popover-left','bs-popover-right']);
+if(this.title===false){this.headerEl.hide();}var C=typeof this.placement=='function'?this.placement.call(this,this.el,A):this.placement;this.el.show();this.el.dom.style.display='block';var p=this.getPosition();var D=this.el.getBox();this.alignment=B||Roo.bootstrap.Popover.alignment[C];
+this.el.addClass(this.alignment[2]);if(A){this.alignEl=A;this.updatePosition();}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.fireEvent('show',this);},updatePosition:function(){if(!this.alignEl||!this.alignment){return;}this.el.alignTo(this.alignEl,this.alignment[0],this.alignment[1]);var p1=this.alignment[0].split('-').pop().replace('?','');var xy=this.alignEl.getAnchorXY(p1,false);
+xy[0]+=2;xy[1]+=5;this.arrowEl.setXY(xy);},hide:function(){this.el.setXY([0,0]);this.el.removeClass('in');this.el.hide();this.hoverState=null;this.maskEl.hide();this.fireEvent('hide',this);}});Roo.apply(Roo.bootstrap.Popover,{alignment:{'left':['r-l',[-10,0],'left bs-popover-left'],'right':['l-br',[10,0],'right bs-popover-right'],'bottom':['t-b',[0,10],'top bs-popover-top'],'top':['b-t',[0,-10],'bottom bs-popover-bottom']}
 ,zIndex:20001,clickHander:false,onMouseDown:function(e){if(!e.getTarget(".roo-popover")){this.hideAll();}},popups:[],register:function(A){if(!Roo.bootstrap.Popover.clickHandler){Roo.bootstrap.Popover.clickHandler=Roo.get(document).on("mousedown",Roo.bootstrap.Popover.onMouseDown,Roo.bootstrap.Popover);
 }this.hideAll();this.popups.push(A);},hideAll:function(){this.popups.forEach(function(p){p.hide();});}});
 // Roo/bootstrap/PopoverNav.js