MediaWiki:BibleGet.js: Difference between revisions

let $el = $(this);

let inline = ($(this).attr('data-inline') == "true");

console.log("data-ref = " + ref + " data-inline = " + inline);

if(inline){

$el.on('mouseenter', function(){

let $bGetTIP = $("div[data-version='"+version+"'][data-ref='"+ref+"']");

console.log('I found ' + $bGetTIP.length + ' div(s) at the bottom of the page with this bible quote');

$bGetTIP.removeClass('hidden');

let top = $el.offset().top;

let left = $el.offset().left + $el.outerWidth() + 15;

$bGetTIP.css({"top":top,"left":left});

if($bGetTIP.hasClass('sticky') || $bGetTIP.is(':offscreen') ){

console.log('This element would have been offscreen!');

//how far off the bottom of the screen are we?

let rect = $bGetTIP[0].getBoundingClientRect();

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,

// then let's just move our div up by that much

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.append($('<div>',{class:'closeButton',text:'x'}));

$bGetTIP.on('click','.closeButton',function(){

$bGetTIP.addClass('hidden');

$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});

}

}

}

});

/*

$el.on('mousemove', function(){

let top = $span.offset().top;

let left = $span.offset().left + $span.outerWidth();

$bGetTIP.css({"top":top,"left":left});

});

*/

$el.on('mouseleave', function(){

let $bGetTIP = $("div[data-version='"+version+"'][data-ref='"+ref+"']");

//console.log('I found ' + $bGetTIP.length + ' div(s) at the bottom of the page with this bible quote');

if(!$bGetTIP.hasClass('sticky') ){

setTimeout(function(){

$bGetTIP.addClass('hidden');

$bGetTIP.css({"top":'',"left":''});

},500);

}

});

} else {

//if it's not inline we do have to deal with it again

$.ajax({

method: 'POST',

url: '../w/bgetHelper.php',

data: {

"version": version,

"ref": ref

},

success: function(data){

if(data.hasOwnProperty('html')){

$el.empty();

$el.css({"background-color":"white"});

$el.append(data.html);

$el.append($('<p>',{"text": " — powered by BibleGet I/O","css":{"font-size":".9em","text-align":"right","font-style":"italic","font-weight":"bold","color":"gray"}}));

}

},

error: function(jqXHR, textStatus, errorThrown){

console.log("There was an error while trying to communicate with the BibleGet server:")

console.log(errorThrown + ' ' + textStatus + ': ' + jqXHR.responseText);

}); //END ajax

}

if(inline){

let $bGetTIP = $('<div>', {

"class": "bibleGetQuote",

"data-version": version,

"data-ref": ref,

"html": data.html

});

$bGetTIP.append($('<p>',{"text": " — powered by BibleGet I/O","css":{"font-size":".9em","text-align":"right","font-style":"italic","font-weight":"bold","color":"gray"}}));

//$('body').append($bGetTIP);

BibleQuotesDomElements.push($bGetTIP);

$el.on('mouseenter', function(){

$bGetTIP.removeClass('hidden');

let top = $el.offset().top;

let left = $el.offset().left + $el.outerWidth() + 15;

$bGetTIP.css({"top":top,"left":left});

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 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,

// then let's just move our div up by that much

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.append($('<div>',{class:'closeButton',text:'x'}));

$bGetTIP.on('click','.closeButton',function(){

$bGetTIP.addClass('hidden');

$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});

}

}

});

/*

$el.on('mousemove', function(){

let top = $span.offset().top;

let left = $span.offset().left + $span.outerWidth();

$bGetTIP.css({"top":top,"left":left});

});

*/

$el.on('mouseleave', function(){

if(!$bGetTIP.hasClass('sticky') ){

setTimeout(function(){

$bGetTIP.addClass('hidden');

$bGetTIP.css({"top":'',"left":''});

},500);

}

});

} else {

$el.empty();

$el.css({"background-color":"white"});

$el.append(data.html);

$el.append($('<p>',{"text": " — powered by BibleGet I/O","css":{"font-size":".9em","text-align":"right","font-style":"italic","font-weight":"bold","color":"gray"}}));

}