2018-09-14 05:30:46 +00:00
|
|
|
( function () {
|
Add Related Articles section to Minerva
If the page has related articles, is in mainspace, isn't the main page,
and the output is being rendered with the MinervaBeta skin then a
"Related Articles" section is added to the page just before the footer.
Separate loading the information necessary to render the pages, choosing
the renderer, and rendering the data so that multiple skins - currently
Minerva and Vector per the mocks - not just multiple resolutions can all
be handled the same way:
* The bootstrap script (ext.relatedArticles.readMore.bootstrap/index.js)
for fetches the page image and Wikidata description; loading the
renderer module; and, finally, notifying the renderer module that it
should render the data, which it does by emitting
"ext.relatedArticles.readMore.init" event using mw#track
* The Minerva renderer subscribes to the event and, when it's fired,
renders the data by passing it to the WatchstarPageList view
Bug: T113635
Change-Id: I651342bdf9796938fa7051828dd13bc6fe774783
2015-10-07 13:12:42 +00:00
|
|
|
|
2019-05-25 21:18:58 +00:00
|
|
|
var data = require( './data.json' ),
|
2022-04-15 00:49:12 +00:00
|
|
|
RelatedPagesGateway = require( './RelatedPagesGateway.js' ),
|
2022-04-14 23:11:07 +00:00
|
|
|
relatedPages = new RelatedPagesGateway(
|
2022-04-15 00:03:00 +00:00
|
|
|
new mw.Api( {
|
|
|
|
ajax: {
|
|
|
|
url: data.searchUrl
|
|
|
|
}
|
|
|
|
} ),
|
2015-11-11 15:30:19 +00:00
|
|
|
mw.config.get( 'wgPageName' ),
|
|
|
|
mw.config.get( 'wgRelatedArticles' ),
|
2019-05-25 21:18:58 +00:00
|
|
|
data.useCirrusSearch,
|
2019-08-23 18:15:32 +00:00
|
|
|
data.onlyUseCirrusSearch,
|
|
|
|
data.descriptionSource
|
2015-11-11 15:30:19 +00:00
|
|
|
),
|
2017-07-14 23:40:47 +00:00
|
|
|
// Make sure this is never undefined as I'm paranoid
|
2021-10-26 20:41:02 +00:00
|
|
|
LIMIT = mw.config.get( 'wgRelatedArticlesCardLimit', 3 );
|
2017-01-27 21:10:46 +00:00
|
|
|
|
2015-12-29 02:55:43 +00:00
|
|
|
/**
|
|
|
|
* Load related articles when the user scrolls past half of the window height.
|
|
|
|
*
|
|
|
|
* @ignore
|
|
|
|
*/
|
2015-12-14 10:34:17 +00:00
|
|
|
function loadRelatedArticles() {
|
2021-10-26 20:41:02 +00:00
|
|
|
var readMore = document.querySelector( '.read-more-container' ),
|
|
|
|
isSupported = 'IntersectionObserver' in window;
|
Add Related Articles section to Minerva
If the page has related articles, is in mainspace, isn't the main page,
and the output is being rendered with the MinervaBeta skin then a
"Related Articles" section is added to the page just before the footer.
Separate loading the information necessary to render the pages, choosing
the renderer, and rendering the data so that multiple skins - currently
Minerva and Vector per the mocks - not just multiple resolutions can all
be handled the same way:
* The bootstrap script (ext.relatedArticles.readMore.bootstrap/index.js)
for fetches the page image and Wikidata description; loading the
renderer module; and, finally, notifying the renderer module that it
should render the data, which it does by emitting
"ext.relatedArticles.readMore.init" event using mw#track
* The Minerva renderer subscribes to the event and, when it's fired,
renders the data by passing it to the WatchstarPageList view
Bug: T113635
Change-Id: I651342bdf9796938fa7051828dd13bc6fe774783
2015-10-07 13:12:42 +00:00
|
|
|
|
2021-10-26 20:41:02 +00:00
|
|
|
if ( !readMore || !isSupported ) {
|
2021-04-30 22:59:41 +00:00
|
|
|
// The container is not in the HTML for some reason and cannot be queried.
|
|
|
|
// See T281547
|
|
|
|
return;
|
|
|
|
}
|
2021-10-26 20:41:02 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* @param {Element} container
|
|
|
|
*/
|
|
|
|
function initRelatedArticlesModule( container ) {
|
2015-12-05 17:44:15 +00:00
|
|
|
$.when(
|
2022-03-30 18:25:56 +00:00
|
|
|
mw.loader.using( 'ext.relatedArticles.readMore' ),
|
2015-12-05 17:44:15 +00:00
|
|
|
relatedPages.getForCurrentPage( LIMIT )
|
2018-06-19 18:41:25 +00:00
|
|
|
).then( function ( _, pages ) {
|
2015-12-05 17:44:15 +00:00
|
|
|
if ( pages.length ) {
|
|
|
|
mw.track( 'ext.relatedArticles.init', pages );
|
2021-10-26 20:41:02 +00:00
|
|
|
} else if ( container.parentNode ) {
|
|
|
|
container.parentNode.removeChild( container );
|
2015-12-05 17:44:15 +00:00
|
|
|
}
|
|
|
|
} );
|
|
|
|
}
|
2021-10-26 20:41:02 +00:00
|
|
|
|
|
|
|
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 );
|
2015-12-05 17:44:15 +00:00
|
|
|
}
|
2015-12-29 02:55:43 +00:00
|
|
|
|
2018-02-21 16:13:33 +00:00
|
|
|
function showReadMore() {
|
2017-01-27 21:10:46 +00:00
|
|
|
// try an initial load, in case of no scroll
|
|
|
|
loadRelatedArticles();
|
|
|
|
}
|
Add Related Articles section to Minerva
If the page has related articles, is in mainspace, isn't the main page,
and the output is being rendered with the MinervaBeta skin then a
"Related Articles" section is added to the page just before the footer.
Separate loading the information necessary to render the pages, choosing
the renderer, and rendering the data so that multiple skins - currently
Minerva and Vector per the mocks - not just multiple resolutions can all
be handled the same way:
* The bootstrap script (ext.relatedArticles.readMore.bootstrap/index.js)
for fetches the page image and Wikidata description; loading the
renderer module; and, finally, notifying the renderer module that it
should render the data, which it does by emitting
"ext.relatedArticles.readMore.init" event using mw#track
* The Minerva renderer subscribes to the event and, when it's fired,
renders the data by passing it to the WatchstarPageList view
Bug: T113635
Change-Id: I651342bdf9796938fa7051828dd13bc6fe774783
2015-10-07 13:12:42 +00:00
|
|
|
|
2018-09-13 18:40:42 +00:00
|
|
|
$( showReadMore );
|
2018-09-14 05:30:46 +00:00
|
|
|
}() );
|