MediaWiki:BibleGet.js: Difference between revisions
no edit summary
Johnrdorazio (talk | contribs) No edit summary |
Johnrdorazio (talk | contribs) 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 $ | 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){ | |||
$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 = $span.offset().top; | |||
let left = $span.offset().left + $span.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; | |||
//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') && excessHeight < rect.y){ | |||
let newTop = top - excessHeight; | |||
$bGetTIP.css({"top":newTop}); | |||
} else { | |||
if(!$bGetTIP.hasClass('sticky')){ | |||
$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 { | } 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){ | ||
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 = $span.offset().top; | |||
let left = $span.offset().left + $span.outerWidth() + 15; | |||
$bGetTIP.css({"top":top,"left":left}); | |||
if($bGetTIP.hasClass('sticky') || $bGetTIP.is(':offscreen') ){ | |||
console.log('This element was offscreen!'); | |||
//how far off the bottom of the screen are we? | |||
let rect = $bGetTIP[0].getBoundingClientRect(); | |||
let excessHeight = (rect.y + rect.height) - window.innerHeight; | |||
//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') && excessHeight < rect.y){ | |||
let newTop = top - excessHeight; | |||
$bGetTIP.css({"top":newTop}); | |||
} else { | |||
if(!$bGetTIP.hasClass('sticky')){ | |||
$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.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:"); |