Roo/bootstrap/Popover.js

[roojs1] / Roo / bootstrap / Popover.js

diff --git a/Roo/bootstrap/Popover.js b/Roo/bootstrap/Popover.js
index 4e39e3f..5e9df36 100644 (file)
--- a/Roo/bootstrap/Popover.js
+++ b/Roo/bootstrap/Popover.js
@@ -63,7 +63,7 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component,  {
     maskEl : false, // the mask element
     headerEl : false,
     contentEl : false,
-    
+    alignEl : false, // when show is called with an element - this get's stored.
     
     getChildContainer : function()
     {
@@ -189,10 +189,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; 
         }
@@ -215,7 +217,6 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component,  {
                 on_el.on(eventOut, this.leave, this);
             }
         }, this);
-        
     },
     
     
@@ -263,12 +264,14 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component,  {
     },
     /**
      * Show the popover
-     * @param {Roo.Element|string|false} - element to align and point to.
+     * @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)
+    show : function (on_el, placement)
     {
-        
+        this.placement = typeof(placement) == 'undefined' ?  this.placement   : placement;
         on_el = on_el || false; // default to false
+         
         if (!on_el) {
             if (this.parent() && (this.over == 'parent' || (this.over === false))) {
                 on_el = this.parent().el;
@@ -292,39 +295,16 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component,  {
             this.headerEl.hide();
         }
         
-        
-        var placement = typeof this.placement == 'function' ?
-            this.placement.call(this, this.el, on_el) :
-            this.placement;
-            
-        /*
-        var autoToken = /\s?auto?\s?/i;   /// not sure how this was supposed to work? right auto ? what?
-        
-        // I think  'auto right' - but 
-        
-        var autoPlace = autoToken.test(placement);
-        if (autoPlace) {
-            placement = placement.replace(autoToken, '') || 'top';
-        }
-        */
-        
-        
+       
         this.el.show();
-        this.el.dom.style.display='block';
-        
-        //this.el.appendTo(on_el);
-        
-        var p = this.getPosition();
-        var box = this.el.getBox();
-        
+        this.el.dom.style.display = 'block';
+         
         
-        var align = Roo.bootstrap.Popover.alignment[placement];
-        this.el.addClass(align[2]);
-
-//        Roo.log(align);
+        this.el.addClass(placement + ' roo-popover-' + placement);
 
         if (on_el) {
-            this.el.alignTo(on_el, align[0],align[1]);
+            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();
@@ -340,10 +320,7 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component,  {
         
         this.el.addClass('in');
         
-        
-        if (this.el.hasClass('fade')) {
-            // fade it?
-        }
+         
         
         this.hoverState = 'in';
         
@@ -354,12 +331,46 @@ 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(placement, try_move)
+    {
+        this.el.addClass(placement + ' roo-popover-' + placement);
         
-        this.fireEvent('show', this);
+        if (!this.alignEl ) {
+            return false;
+        }
+        
+        switch (placement) {
+            case 'right':
+                var exact = this.el.getAlignToXY(this.alignEl, 'tl-tr', [10,0]);
+                var offset = this.el.getAlignToXY(this.alignEl, 'tl-tr?',[10,0]);
+                if (exact.equals(offset)) {
+                    //normal display...
+                    this.setXY(exact, this.preanim(arguments, 3));
+                    var xy = this.alignEl.getAnchorXY(p1, false);
+                    
+                }
+                
+                
+        }
+        
+        
+        
+        // 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]);