mediawiki-extensions-Relate.../resources/ext.relatedArticles.readMore.bootstrap/index.js
Jon Robson dc2e65a084 Drop outdated references to Cards extension
Previously RelatedArticles required the Cards extension
This code refers to that old state and is cleaned up.

ext.relatedArticles.cards is added a dependency of
ext.relatedArticles.readMore since it now belongs to the same
extension

Change-Id: I4a89ed4256a4ae9fd22b0191748bd47ac3ffc593
2022-03-31 08:14:23 -07:00

78 lines
2.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,
data.descriptionSource
),
// Make sure this is never undefined as I'm paranoid
LIMIT = mw.config.get( 'wgRelatedArticlesCardLimit', 3 );
/**
* Load related articles when the user scrolls past half of the window height.
*
* @ignore
*/
function loadRelatedArticles() {
var readMore = document.querySelector( '.read-more-container' ),
isSupported = 'IntersectionObserver' in window;
if ( !readMore || !isSupported ) {
// The container is not in the HTML for some reason and cannot be queried.
// See T281547
return;
}
/**
* @param {Element} container
*/
function initRelatedArticlesModule( container ) {
$.when(
mw.loader.using( 'ext.relatedArticles.readMore' ),
relatedPages.getForCurrentPage( LIMIT )
).then( function ( _, pages ) {
if ( pages.length ) {
mw.track( 'ext.relatedArticles.init', pages );
} else if ( container.parentNode ) {
container.parentNode.removeChild( container );
}
} );
}
var doc = document.documentElement;
// IntersectionObserver will not work if the component is already visible on the page.
// To handle this case, we compare scroll height to viewport height.
if ( ( doc.scrollHeight / 2 ) < doc.clientHeight ) {
// Load straight away. We are on a stub page.
initRelatedArticlesModule( readMore );
return;
}
// eslint-disable-next-line compat/compat
var observer = /** @type {IntersectionObserver} */( new IntersectionObserver( function ( entries ) {
if ( !entries[ 0 ].isIntersecting ) {
return;
}
// @ts-ignore
observer.unobserve( readMore );
observer.disconnect();
// @ts-ignore
initRelatedArticlesModule( readMore );
}, {
rootMargin: '-100% 0% 0% 0%'
} ) );
observer.observe( readMore );
}
function showReadMore() {
// try an initial load, in case of no scroll
loadRelatedArticles();
}
$( showReadMore );
}() );