mediawiki-extensions-Relate.../resources/ext.relatedArticles.readMore.bootstrap/index.js
Timo Tijhof 6a0d64d3f0 Remove 'wgRelatedArticles*CirrusSearch' from page view HTML
Bundle these with the module that needs it instead, this means
1. It is naturally only downloaded on pages where it is needed.
2. It doesn't block download/parse/render of the article HTML.
3. It doesn't delay time to mw.loader.load() for interactive
   functionality.

Bug: T219342
Change-Id: I5c6809392b0621bd0d58049597f6c0306e572607
2019-05-25 22:04:51 +00:00

68 lines
2 KiB
JavaScript

/* eslint-disable no-jquery/no-global-selector */
( function () {
var data = require( './data.json' ),
relatedPages = new mw.relatedPages.RelatedPagesGateway(
new mw.Api(),
mw.config.get( 'wgPageName' ),
mw.config.get( 'wgRelatedArticles' ),
data.useCirrusSearch,
data.onlyUseCirrusSearch
),
// Make sure this is never undefined as I'm paranoid
LIMIT = mw.config.get( 'wgRelatedArticlesCardLimit', 3 ),
debouncedLoad = $.debounce( 100, function () {
loadRelatedArticles(); // eslint-disable-line no-use-before-define
} ),
$window = $( window );
/**
* Load related articles when the user scrolls past half of the window height.
*
* @ignore
*/
function loadRelatedArticles() {
var readMore = $( '.read-more-container' ).get( 0 ),
scrollThreshold = $window.height() * 2;
if ( mw.viewport.isElementCloseToViewport( readMore, scrollThreshold ) ) {
$.when(
// Note we load dependencies here rather than ResourceLoader
// to avoid PHP exceptions when Cards not installed
// which should never happen given the if statement.
mw.loader.using( [
'ext.relatedArticles.cards',
'ext.relatedArticles.readMore'
] ),
relatedPages.getForCurrentPage( LIMIT )
).then( function ( _, pages ) {
if ( pages.length ) {
mw.track( 'ext.relatedArticles.init', pages );
} else {
$( readMore ).remove();
}
} );
// detach handler to stop subsequent loads on scroll
$window.off( 'scroll', debouncedLoad );
}
}
function showReadMore() {
// 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>' ).addClass( 'read-more-container' ).prependTo( '.footer-content' );
} else {
$( '<div>' ).addClass( '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
loadRelatedArticles();
}
$( showReadMore );
}() );