Make tooltip events bubble

This commit is contained in:
Franky Van Liedekerke 2020-05-01 05:33:57 +02:00 committed by GitHub
parent d4ee16c1f7
commit 6a0b6a8672
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 10 deletions

View File

@ -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}

View File

@ -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();
}
});
};