Use mw.viewport to check when to load related pages

Does not change distance threshold.

Bug: T135607
Change-Id: I82dfa78e93f4bb7a8a28d038470265e7fd30c423

extension.json

@@ -80,6 +80,7 @@
 			"dependencies": [
 				"mediawiki.api",
 				"mediawiki.Uri",
+				"mediawiki.viewport",
 				"ext.relatedArticles.readMore.gateway",
 				"jquery.throttle-debounce"
 			],

resources/ext.relatedArticles.readMore.bootstrap/index.js

@@ -21,12 +21,10 @@
 	 * @ignore
 	 */
 	function loadRelatedArticles() {
-		/**
-		 * Threshold value to load related articles - after about half scroll
-		 */
-		var scrollThreshold = ( $( document ).height() / 2 ) - $window.height();
+		var readMore = $( '.read-more-container' ).get( 0 ),
+			scrollThreshold = $( document ).height() / 2 - $window.height();
 
-		if ( $window.scrollTop() > scrollThreshold ) {
+		if ( mw.viewport.isElementCloseToViewport( readMore, scrollThreshold ) ) {
 			$.when(
 				// Note we load dependencies here rather than ResourceLoader
 				// to avoid PHP exceptions when Cards not installed
@@ -68,6 +66,14 @@
 		// any skin except minerva stable
 		( config.skin !== 'minerva' || config.wgMFMode === 'beta' )
 	) {
+		// Add container to DOM for checking distance on scroll
+		// If a skin has marked up a footer content area prepend it there
+		if ( $( '.footer-content' ).length ) {
+			$( '<div class="read-more-container" />' ).prependTo( '.footer-content' );
+		} else {
+			$( '<div class="read-more-container post-content" />' )
+				.insertAfter( '#content' );
+		}
 		// try related articles load on scroll
 		$window.on( 'scroll', debouncedLoad );
 		// try an initial load, in case of no scroll

resources/ext.relatedArticles.readMore/index.js

@@ -48,14 +48,7 @@
 				.append( $( '<h2></h2>' ).text( mw.msg( 'relatedarticles-read-more-heading' ) ) )
 				.append( cards.$el );
 
-			// If a skin has marked up a footer content area prepend it there
-			if ( $( '.footer-content' ).length ) {
-				$readMore.prependTo( '.footer-content' );
-			} else {
-				$( '<div class="read-more-container post-content" />' )
-					.append( $readMore )
-					.insertAfter( '#content' );
-			}
+			$( '.read-more-container' ).append( $readMore );
 
 			// the ReadMore code is ready
 			mw.track( 'ext.relatedArticles.logReady', { $readMore: $readMore } );