2 354
contributi
Nessun oggetto della modifica |
Nessun oggetto della modifica |
||
(2 versioni intermedie di uno stesso utente non sono mostrate) | |||
Riga 9: | Riga 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"); | |||
console.log("data-ref = " + ref + " data-inline = " + inline); | |||
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 | ||
Riga 18: | Riga 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 = $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! | |||
} | |||
if($ | $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}); | |||
} | } | ||
} | } | ||
} | } | ||
}); | |||
$bGetTIP.addClass(' | |||
$bGetTIP. | /* | ||
$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 | ||
} | |||
} | |||
} else { | } else { | ||
bibleQuoteCollection.push(version+"/"+ref); | bibleQuoteCollection.push(version+"/"+ref); | ||
Riga 97: | Riga 120: | ||
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 = $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! | |||
} | |||
if($ | $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"}})); | |||
} | |||
} | } | ||
//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:"); |
contributi