X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=docs%2Fsrc%2FRoo_bootstrap_Popover.js.html;h=6d6e69d6dd2f29680eebc454aa35e8f352d52032;hb=e0d40dd30b73a8b7bfda7a17448bbcb994cb48ba;hp=ba785d962bcf590bc3daafeca047ae7cc66aa088;hpb=cc14bf6bc18b98163c5eee1ee68c54fb56a89858;p=roojs1 diff --git a/docs/src/Roo_bootstrap_Popover.js.html b/docs/src/Roo_bootstrap_Popover.js.html index ba785d962b..6d6e69d6dd 100644 --- a/docs/src/Roo_bootstrap_Popover.js.html +++ b/docs/src/Roo_bootstrap_Popover.js.html @@ -63,7 +63,7 @@ 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.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 @@ on_el.on(eventOut, this.leave, this); } }, this); - }, @@ -263,12 +264,14 @@ }, /** * 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; @@ -283,48 +286,21 @@ } - 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 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); + this.el.dom.style.display = 'block'; - var p = this.getPosition(); - var box = this.el.getBox(); - var align = Roo.bootstrap.Popover.alignment[placement]; - this.el.addClass(align[2]); - -// Roo.log(align); - if (on_el) { - this.el.alignTo(on_el, align[0],align[1]); + 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(); @@ -341,9 +317,6 @@ this.el.addClass('in'); - if (this.el.hasClass('fade')) { - // fade it? - } this.hoverState = 'in'; @@ -355,11 +328,93 @@ } 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 + * @param {string} (left|right|top|bottom) where to try and put it (use false to use the last one) + * @param {Boolean} try and move it if we cant get right position. + */ + updatePosition : function(placement, try_move) + { + placement = placement === false ? this.placement : placement; - this.fireEvent('show', this); + this.el.removeClass([ + 'fade','top','bottom', 'left', 'right','in', + 'bs-popover-top','bs-popover-bottom', 'bs-popover-left', 'bs-popover-right' + ]); + this.el.addClass(placement + ' roo-popover-' + placement); + + 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 (!try_move || exact.equals(offset) || exact[0] == offset[0] ) { + //normal display... or moved up/down. + this.setXY(offset); + var xy = this.alignEl.getAnchorXY('tr', false); + xy[0]+=2;xy[1]+=5; + this.arrowEl.setXY(xy); + return true; + } + // continue through... + try_move = false; + + + case 'left': + var exact = this.el.getAlignToXY(this.alignEl, 'tr-tl', [-10,0]); + var offset = this.el.getAlignToXY(this.alignEl, 'tr-tl?',[-10,0]); + if (!try_move || exact.equals(offset) || exact[0] == offset[0] ) { + //normal display... or moved up/down. + this.setXY(offset); + var xy = this.alignEl.getAnchorXY('tl', false); + xy[0]+=2;xy[1]+=5; // << fix me + this.arrowEl.setXY(xy); + return true; + } + // call self... + return this.updatePosition('right', false); + + case 'top': + var exact = this.el.getAlignToXY(this.alignEl, 't-b', [0,-10]); + var offset = this.el.getAlignToXY(this.alignEl, 't-b?',[0,-10]); + if (!try_move || exact.equals(offset) || exact[1] == offset[1] ) { + //normal display... or moved up/down. + this.setXY(offset); + var xy = this.alignEl.getAnchorXY('b', false); + xy[0]+=2;xy[1]+=5; // << fix me + this.arrowEl.setXY(xy); + return true; + } + // fall through + try_move = false; + + case 'bottom': + var exact = this.el.getAlignToXY(this.alignEl, 'b-t', [0,10]); + var offset = this.el.getAlignToXY(this.alignEl, 'b-t?',[0,10]); + if (!try_move || exact.equals(offset) || exact[1] == offset[1] ) { + //normal display... or moved up/down. + this.setXY(offset); + var xy = this.alignEl.getAnchorXY('t', false); + xy[0]+=2;xy[1]+=5; // << fix me + this.arrowEl.setXY(xy); + return true; + } + // fall through + return this.updatePosition('top', false); + + + } + + + return false; }, + hide : function() { this.el.setXY([0,0]);