From e68d5b65997409f5c909a54bd4b75d3773832a9e Mon Sep 17 00:00:00 2001
From: jhobs <jhobson@wikimedia.org>
Date: Tue, 30 Aug 2016 14:01:48 -0400
Subject: [PATCH] Use mw.viewport to check when to load related pages

Does not change distance threshold.

Bug: T135607
Change-Id: I82dfa78e93f4bb7a8a28d038470265e7fd30c423
---
 extension.json                                   |  1 +
 .../index.js                                     | 16 +++++++++++-----
 resources/ext.relatedArticles.readMore/index.js  |  9 +--------
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/extension.json b/extension.json
index d67492db..fe94e6b4 100644
--- a/extension.json
+++ b/extension.json
@@ -80,6 +80,7 @@
 			"dependencies": [
 				"mediawiki.api",
 				"mediawiki.Uri",
+				"mediawiki.viewport",
 				"ext.relatedArticles.readMore.gateway",
 				"jquery.throttle-debounce"
 			],
diff --git a/resources/ext.relatedArticles.readMore.bootstrap/index.js b/resources/ext.relatedArticles.readMore.bootstrap/index.js
index 5ef471b8..a70c3fd0 100644
--- a/resources/ext.relatedArticles.readMore.bootstrap/index.js
+++ b/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
diff --git a/resources/ext.relatedArticles.readMore/index.js b/resources/ext.relatedArticles.readMore/index.js
index 0e481434..a72f90c7 100644
--- a/resources/ext.relatedArticles.readMore/index.js
+++ b/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 } );