MediaWiki:BibleGet.js: Difference between revisions
no edit summary
Johnrdorazio (talk | contribs) No edit summary |
Johnrdorazio (talk | contribs) No edit summary |
||
Line 33: | Line 33: | ||
let rect = $bGetTIP[0].getBoundingClientRect(); | let rect = $bGetTIP[0].getBoundingClientRect(); | ||
let excessHeight = (rect.y + rect.height) - window.innerHeight; | let excessHeight = (rect.y + rect.height) - window.innerHeight; | ||
let excessWidth = (rect.x + rect.width) - window.innerWidth; | |||
//if this amount is less than the distance from the top of the screen, | //if this amount is less than the distance from the top of the screen, | ||
// then let's just move our div up by that much | // then let's just move our div up by that much | ||
if(!$bGetTIP.hasClass('sticky') && excessHeight < rect.y){ | if(!$bGetTIP.hasClass('sticky')){ | ||
if(excessWidth > 0 && excessWidth < rect.x){ | |||
console.log('This element was off the right hand side of the screen'); | |||
let newLeft; | |||
if($span.offset().left > rect.width){ | |||
$bGetTIP.addClass('sticky'); | newLeft = $span.offset().left - rect.width; | ||
} else { | |||
newLeft = $span.offset().left - rect.width / 2; //center it on the span as a last resort! | |||
} | |||
$bGetTIP.css({"left":newLeft}); | |||
} | |||
if(excessHeight > 0 && excessHeight < rect.y){ | |||
console.log('This element was off the bottom of the screen'); | |||
let newTop = top - excessHeight; | |||
$bGetTIP.css({"top":newTop}); | |||
} else if (excessHeight > rect.y){ | |||
$bGetTIP.addClass('sticky'); | |||
$bGetTIP.append($('<div>',{class:'closeButton',text:'x'})); | $bGetTIP.append($('<div>',{class:'closeButton',text:'x'})); | ||
$bGetTIP.on('click','.closeButton',function(){ | $bGetTIP.on('click','.closeButton',function(){ | ||
Line 46: | Line 58: | ||
$bGetTIP.css({"top":'',"left":''}); | $bGetTIP.css({"top":'',"left":''}); | ||
}); | }); | ||
//distance of the top of the current window from the top of the document | |||
let newTop = (window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop) + 20; | |||
$bGetTIP.css({"top":newTop}); | |||
} | } | ||
} | } | ||
} | } | ||
Line 104: | Line 116: | ||
$bGetTIP.css({"top":top,"left":left}); | $bGetTIP.css({"top":top,"left":left}); | ||
if($bGetTIP.hasClass('sticky') || $bGetTIP.is(':offscreen') ){ | if($bGetTIP.hasClass('sticky') || $bGetTIP.is(':offscreen') ){ | ||
//are we off the bottom or the right side of the screen, and how much? | |||
// | |||
let rect = $bGetTIP[0].getBoundingClientRect(); | let rect = $bGetTIP[0].getBoundingClientRect(); | ||
let excessHeight = (rect.y + rect.height) - window.innerHeight; | let excessHeight = (rect.y + rect.height) - window.innerHeight; | ||
let excessWidth = (rect.x + rect.width) - window.innerWidth; | |||
//if this amount is less than the distance from the top of the screen, | //if this amount is less than the distance from the top of the screen, | ||
// then let's just move our div up by that much | // then let's just move our div up by that much | ||
if(!$bGetTIP.hasClass('sticky') && excessHeight < rect.y){ | if(!$bGetTIP.hasClass('sticky')){ | ||
if(excessWidth > 0 && excessWidth < rect.x){ | |||
console.log('This element was off the right hand side of the screen'); | |||
let newLeft; | |||
if($span.offset().left > rect.width){ | |||
newLeft = $span.offset().left - rect.width; | |||
} else { | |||
newLeft = $span.offset().left - rect.width / 2; //center it on the span as a last resort! | |||
} | |||
$bGetTIP.css({"left":newLeft}); | |||
} | |||
if(excessHeight > 0 && excessHeight < rect.y){ | |||
console.log('This element was off the bottom of the screen'); | |||
let newTop = top - excessHeight; | |||
$bGetTIP.css({"top":newTop}); | |||
} else if (excessHeight >= rect.y){ | |||
$bGetTIP.addClass('sticky'); | $bGetTIP.addClass('sticky'); | ||
$bGetTIP.append($('<div>',{class:'closeButton',text:'x'})); | $bGetTIP.append($('<div>',{class:'closeButton',text:'x'})); | ||
Line 121: | Line 144: | ||
$bGetTIP.css({"top":'',"left":''}); | $bGetTIP.css({"top":'',"left":''}); | ||
}); | }); | ||
//distance of the top of the current window from the top of the document | |||
let newTop = (window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop) + 20; | |||
$bGetTIP.css({"top":newTop}); | |||
} | } | ||
} | } | ||
} | } |