From ae0bbc3ce0db16a90d8a9cc36f549693204203f7 Mon Sep 17 00:00:00 2001 From: Alan Knowles Date: Wed, 9 Jun 2021 18:21:42 +0800 Subject: [PATCH] sort out zIndex and hunting for tooltips --- Roo/bootstrap/Popover.js | 9 +------ Roo/bootstrap/Tooltip.js | 31 +++++++++++++++++++++--- docs/src/Roo_bootstrap_Popover.js.html | 11 +++++++-- roojs-bootstrap-debug.js | 33 ++++++++++++++++++++++---- roojs-bootstrap.js | 11 +++++---- 5 files changed, 73 insertions(+), 22 deletions(-) diff --git a/Roo/bootstrap/Popover.js b/Roo/bootstrap/Popover.js index f984d2b3bb..bcdc7814aa 100644 --- a/Roo/bootstrap/Popover.js +++ b/Roo/bootstrap/Popover.js @@ -287,14 +287,7 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component, { this.render(document.body); } - var x = this.alignEl.dom; - while (x && "auto" ==getComputedStyle(x).zIndex) { - //Roo.log(getComputedStyle(x).zIndex ); - x = x.parentNode; - } - if (x) { - this.el.dom.style.zIndex = (1*getComputedStyle(x).zIndex) + 1000; - } + if (this.title === false) { diff --git a/Roo/bootstrap/Tooltip.js b/Roo/bootstrap/Tooltip.js index fc08fb336d..33afec115f 100644 --- a/Roo/bootstrap/Tooltip.js +++ b/Roo/bootstrap/Tooltip.js @@ -77,10 +77,19 @@ Roo.apply(Roo.bootstrap.Tooltip, { return; } - var bindEl = el; + var bindEl = el; + var pel = false; + if (!el.attr('tooltip')) { + pel = el.findParent("[tooltip]"); + if (pel) { + bindEl = Roo.get(pel); + } + } + + // you can not look for children, as if el is the body.. then everythign is the child.. - if (!el.attr('tooltip')) { // + if (!pel && !el.attr('tooltip')) { // if (!el.select("[tooltip]").elements.length) { return; } @@ -94,7 +103,7 @@ Roo.apply(Roo.bootstrap.Tooltip, { //Roo.log("child element over.."); } - this.currentEl = bindEl; + this.currentEl = el; this.currentTip.bind(bindEl); this.currentRegion = Roo.lib.Region.getRegion(dom); this.currentTip.enter(); @@ -286,6 +295,22 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component, { } + var elems = document.getElementsByTagName('div'); + var highest = Number.MIN_SAFE_INTEGER || -(Math.pow(2, 53) - 1); + for (var i = 0; i < elems.length; i++) { + var zindex = Number.parseInt( + document.defaultView.getComputedStyle(elems[i], null).getPropertyValue("z-index"), + 10 + ); + if (zindex > highest) { + highest = zindex; + } + } + + + + this.el.dom.style.zIndex = highest; + this.el.alignTo(this.bindEl, align[0],align[1]); //var arrow = this.el.select('.arrow',true).first(); //arrow.set(align[2], diff --git a/docs/src/Roo_bootstrap_Popover.js.html b/docs/src/Roo_bootstrap_Popover.js.html index c8a7e2f9c0..a2191c44a9 100644 --- a/docs/src/Roo_bootstrap_Popover.js.html +++ b/docs/src/Roo_bootstrap_Popover.js.html @@ -276,7 +276,7 @@ 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); } } @@ -287,7 +287,14 @@ this.render(document.body); } - + var x = this.alignEl.dom; + while (x && "auto" ==getComputedStyle(x).zIndex) { + //Roo.log(getComputedStyle(x).zIndex ); + x = x.parentNode; + } + if (x) { + this.el.dom.style.zIndex = (1*getComputedStyle(x).zIndex) + 1000; + } if (this.title === false) { diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index d0da6a2875..964ce12121 100644 --- a/roojs-bootstrap-debug.js +++ b/roojs-bootstrap-debug.js @@ -20222,7 +20222,7 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component, { 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); } } @@ -29080,10 +29080,19 @@ Roo.apply(Roo.bootstrap.Tooltip, { return; } - var bindEl = el; + var bindEl = el; + var pel = false; + if (!el.attr('tooltip')) { + pel = el.findParent("[tooltip]"); + if (pel) { + bindEl = Roo.get(pel); + } + } + + // you can not look for children, as if el is the body.. then everythign is the child.. - if (!el.attr('tooltip')) { // + if (!pel && !el.attr('tooltip')) { // if (!el.select("[tooltip]").elements.length) { return; } @@ -29097,7 +29106,7 @@ Roo.apply(Roo.bootstrap.Tooltip, { //Roo.log("child element over.."); } - this.currentEl = bindEl; + this.currentEl = el; this.currentTip.bind(bindEl); this.currentRegion = Roo.lib.Region.getRegion(dom); this.currentTip.enter(); @@ -29289,6 +29298,22 @@ Roo.extend(Roo.bootstrap.Tooltip, Roo.bootstrap.Component, { } + var elems = document.getElementsByTagName('div'); + var highest = Number.MIN_SAFE_INTEGER || -(Math.pow(2, 53) - 1); + for (var i = 0; i < elems.length; i++) { + var zindex = Number.parseInt( + document.defaultView.getComputedStyle(elems[i], null).getPropertyValue("z-index"), + 10 + ); + if (zindex > highest) { + highest = zindex; + } + } + + + + this.el.dom.style.zIndex = highest; + this.el.alignTo(this.bindEl, align[0],align[1]); //var arrow = this.el.select('.arrow',true).first(); //arrow.set(align[2], diff --git a/roojs-bootstrap.js b/roojs-bootstrap.js index b8dd8d8bc8..ec84a5a281 100644 --- a/roojs-bootstrap.js +++ b/roojs-bootstrap.js @@ -832,7 +832,7 @@ this.headerEl.setVisibilityMode(Roo.Element.DISPLAY);this.el.enableDisplayMode(' 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){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(); +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.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); @@ -1225,9 +1225,9 @@ Roo.bootstrap.menu=Roo.bootstrap.menu||{};Roo.bootstrap.menu.Separator=function( // Roo/bootstrap/Tooltip.js Roo.bootstrap.Tooltip=function(A){Roo.bootstrap.Tooltip.superclass.constructor.call(this,A);this.alignment=Roo.bootstrap.Tooltip.alignment;if(typeof(A)!='undefined'&&typeof(A.alignment)!='undefined'){this.alignment=A.alignment;}};Roo.apply(Roo.bootstrap.Tooltip,{currentEl:false,currentTip:false,currentRegion:false,init:function(){Roo.get(document).on('mouseover',this.enter,this); Roo.get(document).on('mouseout',this.leave,this);this.currentTip=new Roo.bootstrap.Tooltip();},enter:function(ev){var A=ev.getTarget();var el=Roo.fly(A);if(this.currentEl){if(this.currentEl==el){return;}if(A!=this.currentEl.dom&&this.currentEl.contains(A)){return; -}}if(this.currentTip.el){this.currentTip.el.setVisibilityMode(Roo.Element.DISPLAY).hide();}if(!el||el.dom==document){return;}var B=el;if(!el.attr('tooltip')){if(!el.select("[tooltip]").elements.length){return;}B=el.select("[tooltip]").first();var xy=ev.getXY(); -if(!B.getRegion().contains({top:xy[1],right:xy[0],bottom:xy[1],left:xy[0]})){return;}}this.currentEl=B;this.currentTip.bind(B);this.currentRegion=Roo.lib.Region.getRegion(A);this.currentTip.enter();},leave:function(ev){var A=ev.getTarget();if(!this.currentEl){return; -}if(A!=this.currentEl.dom){return;}var xy=ev.getXY();if(this.currentRegion.contains(new Roo.lib.Region(xy[1],xy[0],xy[1],xy[0]))){return;}if(this.currentTip){this.currentTip.leave();}this.currentEl=false;},alignment:{'left':['r-l',[-2,0],'right'],'right':['l-r',[2,0],'left'],'bottom':['t-b',[0,2],'top'],'top':['b-t',[0,-2],'bottom']} +}}if(this.currentTip.el){this.currentTip.el.setVisibilityMode(Roo.Element.DISPLAY).hide();}if(!el||el.dom==document){return;}var B=el;var C=false;if(!el.attr('tooltip')){C=el.findParent("[tooltip]");if(C){B=Roo.get(C);}}if(!C&&!el.attr('tooltip')){if(!el.select("[tooltip]").elements.length){return; +}B=el.select("[tooltip]").first();var xy=ev.getXY();if(!B.getRegion().contains({top:xy[1],right:xy[0],bottom:xy[1],left:xy[0]})){return;}}this.currentEl=el;this.currentTip.bind(B);this.currentRegion=Roo.lib.Region.getRegion(A);this.currentTip.enter();},leave:function(ev){var A=ev.getTarget(); +if(!this.currentEl){return;}if(A!=this.currentEl.dom){return;}var xy=ev.getXY();if(this.currentRegion.contains(new Roo.lib.Region(xy[1],xy[0],xy[1],xy[0]))){return;}if(this.currentTip){this.currentTip.leave();}this.currentEl=false;},alignment:{'left':['r-l',[-2,0],'right'],'right':['l-r',[2,0],'left'],'bottom':['t-b',[0,2],'top'],'top':['b-t',[0,-2],'bottom']} });Roo.extend(Roo.bootstrap.Tooltip,Roo.bootstrap.Component,{bindEl:false,delay:null,timeout:null,hoverState:null,placement:'bottom',alignment:false,getAutoCreate:function(){var A={cls:'tooltip',role:'tooltip',cn:[{cls:'tooltip-arrow arrow'},{cls:'tooltip-inner'} ]};return A;},bind:function(el){this.bindEl=el;},initEvents:function(){this.arrowEl=this.el.select('.arrow',true).first();this.innerEl=this.el.select('.tooltip-inner',true).first();},enter:function(){if(this.timeout!=null){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(); @@ -1235,7 +1235,8 @@ return;}var _t=this;this.timeout=setTimeout(function(){if(_t.hoverState=='out'){ this.el.select('.tooltip-inner',true).first().dom.innerHTML=B;this.el.removeClass(['fade','top','bottom','left','right','in','bs-tooltip-top','bs-tooltip-bottom','bs-tooltip-left','bs-tooltip-right']);var C=typeof this.placement=='function'?this.placement.call(this,this.el,on_el):this.placement; var D=/\s?auto?\s?/i;var E=D.test(C);if(E){C=C.replace(D,'')||'top';}this.el.show();var p=this.getPosition();var F=this.el.getBox();if(E){}var G=this.alignment[C];var xy=this.el.getAlignToXY(this.bindEl,G[0],G[1]);if(C=='top'||C=='bottom'){if(xy[0]<0){C='right'; }if(xy[0]+this.el.getWidth()>Roo.lib.Dom.getViewWidth()){C='left';}var H=Roo.select('body',true).first().getScroll();if(xy[1]>Roo.lib.Dom.getViewHeight()+H.top-this.el.getHeight()){C='top';}G=this.alignment[C];this.arrowEl.setLeft((this.innerEl.getWidth()/2)-5); -}this.el.alignTo(this.bindEl,G[0],G[1]);this.el.addClass(C);this.el.addClass("bs-tooltip-"+C);this.el.addClass('in fade show');this.hoverState=null;if(this.el.hasClass('fade')){}},hide:function(){if(!this.el){return;}this.el.removeClass(['show','in']);}}); +}var I=document.getElementsByTagName('div');var J=Number.MIN_SAFE_INTEGER||-(Math.pow(2,53)-1);for(var i=0;iJ){J=K;}}this.el.dom.style.zIndex=J; +this.el.alignTo(this.bindEl,G[0],G[1]);this.el.addClass(C);this.el.addClass("bs-tooltip-"+C);this.el.addClass('in fade show');this.hoverState=null;if(this.el.hasClass('fade')){}},hide:function(){if(!this.el){return;}this.el.removeClass(['show','in']);}}); // Roo/bootstrap/LocationPicker.js Roo.bootstrap.LocationPicker=function(A){Roo.bootstrap.LocationPicker.superclass.constructor.call(this,A);this.addEvents({initial:true,positionchanged:true,resize:true,show:true,hide:true,mapClick:true,mapRightClick:true,markerClick:true,markerRightClick:true,OverlayViewDraw:true,OverlayViewOnAdd:true,OverlayViewOnRemove:true,OverlayViewShow:true,OverlayViewHide:true,loadexception:true} -- 2.39.2