X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=docs%2Fsrc%2FRoo_bootstrap_Popover.js.html;h=242dee1227d89339558e330273128192b5aaff42;hb=49ac7ebc6f41da694248427f2dce251483c5e650;hp=ba785d962bcf590bc3daafeca047ae7cc66aa088;hpb=01dfe315130438a5e89f4cbd4e691c9c4eba8029;p=roojs1 diff --git a/docs/src/Roo_bootstrap_Popover.js.html b/docs/src/Roo_bootstrap_Popover.js.html index ba785d962b..242dee1227 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,68 +264,44 @@ }, /** * 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; } else if (this.over) { - Roo.get(this.over); + on_el = Roo.get(this.over); } } + this.alignEl = Roo.get( on_el ); + 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 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.dom.style.display = 'block'; - //this.el.appendTo(on_el); - var p = this.getPosition(); - var box = this.el.getBox(); + if (this.alignEl) { + this.updatePosition(this.placement, true); - - 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]); } 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 +318,6 @@ this.el.addClass('in'); - if (this.el.hasClass('fade')) { - // fade it? - } this.hoverState = 'in'; @@ -355,11 +329,95 @@ } 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) + { + // allow for calling with no parameters + placement = placement ? placement : this.placement; + try_move = typeof(try_move) == 'undefined' ? true : try_move; - 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 + ' bs-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.el.setXY(offset); + var xy = this.alignEl.getAnchorXY('tr', false); + xy[0]+=2;xy[1]+=5; + this.arrowEl.setXY(xy); + return true; + } + // continue through... + return this.updatePosition('left', 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.el.setXY(offset); + var xy = this.alignEl.getAnchorXY('tl', false); + xy[0]-=10;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, '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.el.setXY(offset); + var xy = this.alignEl.getAnchorXY('t', false); + xy[1]-=10; // << fix me + this.arrowEl.setXY(xy); + return true; + } + // fall through + return this.updatePosition('bottom', false); + + case 'bottom': + 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.el.setXY(offset); + var xy = this.alignEl.getAnchorXY('b', false); + xy[1]+=2; // << fix me + this.arrowEl.setXY(xy); + return true; + } + // fall through + return this.updatePosition('top', false); + + + } + + + return false; }, + hide : function() { this.el.setXY([0,0]);