Seeds of the Word

MediaWiki:BibleGet.js: Difference between revisions

Message Discussion

MediaWiki:BibleGet.js (view source)

Revision as of 18:05, September 24, 2020

251 bytes added ,  3 years ago
no edit summary
No edit summary
No edit summary
Line 9: Line 9:
console.log("There are " + $('.bibleQuoteRef').length + " bible quotes on this page");
console.log("There are " + $('.bibleQuoteRef').length + " bible quotes on this page");
$('.bibleQuoteRef').each(function(){
$('.bibleQuoteRef').each(function(){
let $span = $(this);
let $el = $(this);
let version = $(this).attr('data-version');
let version = $(this).attr('data-version');
let ref = $(this).attr('data-ref');
let ref = $(this).attr('data-ref');
let inline = ($(this).attr('data-inline') == "true");
if(bibleQuoteCollection.includes(version+"/"+ref)){
if(bibleQuoteCollection.includes(version+"/"+ref)){
//we already have an instance of this bible quote, avoid creating new div
//we already have an instance of this bible quote, avoid creating new div
Line 18: Line 20:
//however since the ajax calls are asynchronous, we probably won't have the actual div at the bottom of the page yet
//however since the ajax calls are asynchronous, we probably won't have the actual div at the bottom of the page yet
//so let's look for it inside the mouseover event
//so let's look for it inside the mouseover event
if(inline){
$span.on('mouseenter', function(){
$el.on('mouseenter', function(){
let $bGetTIP = $("div[data-version='"+version+"'][data-ref='"+ref+"']");
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');
console.log('I found ' + $bGetTIP.length + ' div(s) at the bottom of the page with this bible quote');
$bGetTIP.removeClass('hidden');
$bGetTIP.removeClass('hidden');
let top = $span.offset().top;
let top = $span.offset().top;
let left = $span.offset().left + $span.outerWidth() + 15;
let left = $span.offset().left + $span.outerWidth() + 15;
$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') ){
console.log('This element would have been offscreen!');
console.log('This element would have been offscreen!');
//how far off the bottom of the screen are we?
//how far off the bottom of the screen are we?
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;
//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') && excessHeight < rect.y){
let newTop = top - excessHeight;
let newTop = top - excessHeight;
$bGetTIP.css({"top":newTop});
$bGetTIP.css({"top":newTop});
} else {
} else {
if(!$bGetTIP.hasClass('sticky')){  
if(!$bGetTIP.hasClass('sticky')){  
$bGetTIP.addClass('sticky');  
$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(){
$bGetTIP.addClass('hidden');
$bGetTIP.addClass('hidden');
$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});
}
}
//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(){
$span.on('mousemove', function(){
let top = $span.offset().top;
let top = $span.offset().top;
let left = $span.offset().left + $span.outerWidth();
let left = $span.offset().left + $span.outerWidth();
$bGetTIP.css({"top":top,"left":left});
$bGetTIP.css({"top":top,"left":left});
});
});
*/
*/
$el.on('mouseleave', function(){
$span.on('mouseleave', function(){
let $bGetTIP = $("div[data-version='"+version+"'][data-ref='"+ref+"']");
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');
//console.log('I found ' + $bGetTIP.length + ' div(s) at the bottom of the page with this bible quote');
if(!$bGetTIP.hasClass('sticky') ){
if(!$bGetTIP.hasClass('sticky') ){
setTimeout(function(){  
setTimeout(function(){  
$bGetTIP.addClass('hidden');
$bGetTIP.addClass('hidden');
$bGetTIP.css({"top":'',"left":''});
$bGetTIP.css({"top":'',"left":''});
},500);
},500);
}
}
});
});
}
} else {
} else {
bibleQuoteCollection.push(version+"/"+ref);
bibleQuoteCollection.push(version+"/"+ref);
Line 83: Line 86:
console.log(data);
console.log(data);
if(data.hasOwnProperty('html')){
if(data.hasOwnProperty('html')){
let $bGetTIP = $('<div>', {
if(inline){
"class": "bibleGetQuote",
let $bGetTIP = $('<div>', {
"data-version": version,
"class": "bibleGetQuote",
"data-ref": ref,
"data-version": version,
"html": data.html
"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"}}));
});
$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);
//$('body').append($bGetTIP);
BibleQuotesDomElements.push($bGetTIP);
$span.on('mouseenter', function(){
$bGetTIP.removeClass('hidden');
$el.on('mouseenter', function(){
let top = $span.offset().top;
$bGetTIP.removeClass('hidden');
let left = $span.offset().left + $span.outerWidth() + 15;
let top = $span.offset().top;
$bGetTIP.css({"top":top,"left":left});
let left = $span.offset().left + $span.outerWidth() + 15;
if($bGetTIP.hasClass('sticky') || $bGetTIP.is(':offscreen') ){
$bGetTIP.css({"top":top,"left":left});
console.log('This element was offscreen!');
if($bGetTIP.hasClass('sticky') || $bGetTIP.is(':offscreen') ){
//how far off the bottom of the screen are we?
console.log('This element was offscreen!');
let rect = $bGetTIP[0].getBoundingClientRect();
//how far off the bottom of the screen are we?
let excessHeight = (rect.y + rect.height) - window.innerHeight;
let rect = $bGetTIP[0].getBoundingClientRect();
//if this amount is less than the distance from the top of the screen,
let excessHeight = (rect.y + rect.height) - window.innerHeight;
// then let's just move our div up by that much
//if this amount is less than the distance from the top of the screen,
if(!$bGetTIP.hasClass('sticky') && excessHeight < rect.y){
// then let's just move our div up by that much
let newTop = top - excessHeight;
if(!$bGetTIP.hasClass('sticky') && excessHeight < rect.y){
$bGetTIP.css({"top":newTop});
let newTop = top - excessHeight;
} else {
$bGetTIP.css({"top":newTop});
if(!$bGetTIP.hasClass('sticky')){
} else {
$bGetTIP.addClass('sticky');
if(!$bGetTIP.hasClass('sticky')){
$bGetTIP.append($('<div>',{class:'closeButton',text:'x'}));
$bGetTIP.addClass('sticky');
$bGetTIP.on('click','.closeButton',function(){
$bGetTIP.append($('<div>',{class:'closeButton',text:'x'}));
$bGetTIP.addClass('hidden');
$bGetTIP.on('click','.closeButton',function(){
$bGetTIP.css({"top":'',"left":''});
$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});
}
}
//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(){
$span.on('mousemove', function(){
let top = $span.offset().top;
let top = $span.offset().top;
let left = $span.offset().left + $span.outerWidth();
let left = $span.offset().left + $span.outerWidth();
$bGetTIP.css({"top":top,"left":left});
$bGetTIP.css({"top":top,"left":left});
});
});
*/
*/
$el.on('mouseleave', function(){
$span.on('mouseleave', function(){
if(!$bGetTIP.hasClass('sticky') ){
if(!$bGetTIP.hasClass('sticky') ){
setTimeout(function(){  
setTimeout(function(){  
$bGetTIP.addClass('hidden');
$bGetTIP.addClass('hidden');
$bGetTIP.css({"top":'',"left":''});
$bGetTIP.css({"top":'',"left":''});
},500);
},500);
}
}
});
});
} else {
$el.append(data.html);
}
}
}
//console.log("Injected Bible quote for ref = " + ref + " with value obtained from BibleGet service:");
//console.log("Injected Bible quote for ref = " + ref + " with value obtained from BibleGet service:");
Retrieved from "https://en.seminaverbi.bibleget.io/wiki/Special:MobileDiff/23636"