Make tooltip events bubble
This commit is contained in:
parent
d4ee16c1f7
commit
6a0b6a8672
|
|
@ -51,7 +51,7 @@ function getWidth(size){var viewport=KB.utils.getViewportSize();if(viewport.widt
|
|||
switch(size){case 'large':return viewport.width<1350?'98%':'1350px';case 'medium':return viewport.width<1024?'70%':'1024px'}
|
||||
return viewport.width<800?'75%':'800px'}
|
||||
KB.on('modal.close',function(){destroy()});KB.on('modal.submit',function(){submitForm()});KB.modal={open:function(url,size,overlayClickDestroy){KB.trigger('modal.open');_KB.get('Dropdown').close();destroy();if(typeof overlayClickDestroy==='undefined'){overlayClickDestroy=!0}
|
||||
KB.http.get(url).success(function(response){isOpen=!0;create(response,getWidth(size),overlayClickDestroy)})},close:function(){destroy()},isOpen:function(){return isOpen},replace:function(url){KB.http.get(url).success(function(response){replace(response)})},getForm:getForm,submitForm:submitForm}}());KB.tooltip=function(){function onMouseOver(event){if(!exists()){create(event.target)}}
|
||||
KB.http.get(url).success(function(response){isOpen=!0;create(response,getWidth(size),overlayClickDestroy)})},close:function(){destroy()},isOpen:function(){return isOpen},replace:function(url){KB.http.get(url).success(function(response){replace(response)})},getForm:getForm,submitForm:submitForm}}());KB.tooltip=function(){function onMouseOver(mytarget){if(!exists()){create(mytarget)}}
|
||||
function onMouseLeaveContainer(){setTimeout(destroy,500)}
|
||||
function mouseLeftParent(){setTimeout(destroyIfNotOnTooltip,500)}
|
||||
function mouseOnTooltip(){document.getElementById("tooltip-container").mouseOnTooltip=!0}
|
||||
|
|
@ -63,7 +63,9 @@ function render(element,html){var containerElement=document.createElement("div")
|
|||
document.body.appendChild(containerElement);document.body.onclick=function(event){if(!containerElement.contains(event.target)){destroy()}}}
|
||||
function destroy(){var element=document.getElementById("tooltip-container");if(element){element.parentNode.removeChild(element)}}
|
||||
function exists(){return!!document.getElementById("tooltip-container")}
|
||||
var elements=document.querySelectorAll(".tooltip");for(var i=0;i<elements.length;i++){elements[i].addEventListener("mouseenter",onMouseOver,!1);elements[i].addEventListener("mouseleave",mouseLeftParent,!1)}};KB.utils.formatDuration=function(d){if(d>=86400){return Math.round(d/86400)+"d"}else if(d>=3600){return Math.round(d/3600)+"h"}else if(d>=60){return Math.round(d/60)+"m"}
|
||||
document.body.addEventListener('mouseover',function(e){if(e.target.classList.contains('tooltip')){onMouseOver(e.target)}
|
||||
if(e.target.classList.contains('fa')&&e.target.parentNode.classList.contains('tooltip')){onMouseOver(e.target.parentNode)}});document.body.addEventListener('mouseout',function(e){if(e.target.classList.contains('tooltip')){mouseLeftParent()}
|
||||
if(e.target.classList.contains('fa')&&e.target.parentNode.classList.contains('tooltip')){mouseLeftParent()}})};KB.utils.formatDuration=function(d){if(d>=86400){return Math.round(d/86400)+"d"}else if(d>=3600){return Math.round(d/3600)+"h"}else if(d>=60){return Math.round(d/60)+"m"}
|
||||
return d+"s"};KB.utils.getSelectionPosition=function(element){var selectionStart,selectionEnd;if(element.value.length<element.selectionStart){selectionStart=element.value.length}else{selectionStart=element.selectionStart}
|
||||
if(element.selectionStart===element.selectionEnd){selectionEnd=selectionStart}else{selectionEnd=element.selectionEnd}
|
||||
return{selectionStart:selectionStart,selectionEnd:selectionEnd}};KB.utils.arraysIdentical=function(a,b){var i=a.length;if(i!==b.length){return!1}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
KB.tooltip = function () {
|
||||
function onMouseOver(event) {
|
||||
function onMouseOver(mytarget) {
|
||||
if (! exists()) {
|
||||
create(event.target);
|
||||
create(mytarget);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -92,10 +92,25 @@ KB.tooltip = function () {
|
|||
function exists() {
|
||||
return !!document.getElementById("tooltip-container");
|
||||
}
|
||||
|
||||
var elements = document.querySelectorAll(".tooltip");
|
||||
for (var i = 0; i < elements.length; i++) {
|
||||
elements[i].addEventListener("mouseenter", onMouseOver, false);
|
||||
elements[i].addEventListener("mouseleave", mouseLeftParent, false);
|
||||
}
|
||||
|
||||
// for dynamically added elements, we add our event listeners to the doc body
|
||||
// we need to use mouseover, because mouseenter only triggers on the body in this case
|
||||
document.body.addEventListener('mouseover', function(e) {
|
||||
if (e.target.classList.contains('tooltip')) {
|
||||
onMouseOver(e.target);
|
||||
}
|
||||
// to catch the case where the event doesn't fire on tooltip but on the i-subelement
|
||||
// (this seems to depend on how you move your mouse over the element ...)
|
||||
if (e.target.classList.contains('fa') && e.target.parentNode.classList.contains('tooltip')) {
|
||||
onMouseOver(e.target.parentNode);
|
||||
}
|
||||
});
|
||||
document.body.addEventListener('mouseout', function(e) {
|
||||
if (e.target.classList.contains('tooltip')) {
|
||||
mouseLeftParent();
|
||||
}
|
||||
if (e.target.classList.contains('fa') && e.target.parentNode.classList.contains('tooltip')) {
|
||||
mouseLeftParent();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue