mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/RelatedArticles
synced 2024-12-20 12:00:43 +00:00
71de06a682
Changes: - Removes redundant styles now inside Codex - With the new component, it's not possible to display 3 cards in a single line at a tablet resolution, so the media query responsible is bumped to apply only at the desktop threshold - Decisions are documented in ADR Bug: T286835 Change-Id: I493e8e601ccc31b3cf1f16c0b5a8975f12ef336c
58 lines
1.6 KiB
JavaScript
58 lines
1.6 KiB
JavaScript
( function () {
|
|
/**
|
|
* Load related articles when the user scrolls past half of the window height.
|
|
*
|
|
* @ignore
|
|
*/
|
|
function loadRelatedArticles() {
|
|
const readMore = document.querySelector( '.read-more-container' ),
|
|
isSupported = 'IntersectionObserver' in window && CSS.escape !== undefined;
|
|
|
|
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' )
|
|
).then( function (
|
|
/** @type {Function} */ require
|
|
) {
|
|
require( 'ext.relatedArticles.readMore' ).init(
|
|
container
|
|
);
|
|
} );
|
|
}
|
|
|
|
const 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
|
|
const 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 );
|
|
}
|
|
|
|
$( loadRelatedArticles );
|
|
}() );
|