MediaWiki:BibleGet.js: Difference between revisions

Browse history interactively

← Older edit Newer edit →

Content deleted Content added

Inline

@@ Line 33: / Line 33: @@
 								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') && excessHeight < rect.y){
+								if(!$bGetTIP.hasClass('sticky')){
-									let newTop = top - excessHeight;
+									if(excessWidth > 0 && excessWidth < rect.x){
+										console.log('This element was off the right hand side of the screen');
-									$bGetTIP.css({"top":newTop});
-								} else {
+										let newLeft;
-									if(!$bGetTIP.hasClass('sticky')){
+										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.on('click','.closeButton',function(){
@@ Line 46: / Line 58: @@
 											$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});
 								}
 							}
@@ Line 104: / Line 116: @@
 										$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?
-											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;
+											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') && excessHeight < rect.y){
+											if(!$bGetTIP.hasClass('sticky')){
-												let newTop = top - excessHeight;
+												if(excessWidth > 0 && excessWidth < rect.x){
+													console.log('This element was off the right hand side of the screen');
-												$bGetTIP.css({"top":newTop});
-											} else {
+													let newLeft;
-												if(!$bGetTIP.hasClass('sticky')){
+													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'}));
@@ Line 121: / Line 144: @@
 														$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});
 											}
 										}