mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/RelatedArticles
synced 2024-12-26 06:43:11 +00:00
e5431a1c0b
We currently require support for IntersectionObserver. which is supported on Edge >= 15 (15 has partial support), Firefox >55, Chrome >58, Safari 12.1, Opera >=38, iOS Safari >=12.2, Android 100 Full ES6 is supported in Edge >=15, Firefox >=54, Chrome >=51, Safari >=10, Opera >=38, iOS Safari >=10, so such a change would only drop support for Edge 15 and Firefox 54. CSS.escape is guaranteed in all these browsers according to caniuse, with the only discrepancy being the Edge browser (versions 16-18) so it is also suggested we remove support for those browsers. Firefox 54 accounts for 0.0026% of page views Edge 15-18 accounts for 0.069% of page views Bug: T306355 Change-Id: Id2987e3456607b610c38da9ee157a026d1d00ada
80 lines
2.2 KiB
JavaScript
80 lines
2.2 KiB
JavaScript
( function () {
|
|
|
|
const data = require( './data.json' ),
|
|
RelatedPagesGateway = require( './RelatedPagesGateway.js' ),
|
|
relatedPages = new RelatedPagesGateway(
|
|
new mw.Api( {
|
|
ajax: {
|
|
url: data.searchUrl
|
|
}
|
|
} ),
|
|
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() {
|
|
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' ),
|
|
relatedPages.getForCurrentPage( LIMIT )
|
|
).then( function ( require, pages ) {
|
|
if ( pages.length ) {
|
|
require( 'ext.relatedArticles.readMore' ).render(
|
|
pages,
|
|
readMore
|
|
);
|
|
} else if ( container.parentNode ) {
|
|
container.parentNode.removeChild( 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 );
|
|
}() );
|