mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/RelatedArticles
synced 2024-12-12 00:26:31 +00:00
9126c7d0ef
Wikivoyage pages have more than 3 related articles as they make use
of the {{#related:}} magic word.
After speaking with Nirzar we should allow this project to show more than 3.
This change allows this while keeping the existing behaviour on other wikis and
will pave the way for removing a bunch of code from this extension.
Additional changes:
* Cleanup skinStyles definitions
* Limit cards to 30% maximum width and give margin top to account for
situations where the number of cards are multiple of 3
** In Minerva hardcode the max-width to pixels.
* Margins are switched from hardcoded 10px to percentage based. Yes
this changes the right margin slightly but is more maintable and visually
the same.
Bug: T164765
Change-Id: I41119de3228c2df799f740d4bd00082101c21b97
94 lines
2.9 KiB
JavaScript
94 lines
2.9 KiB
JavaScript
( function ( $, mw ) {
|
|
|
|
var relatedPages = new mw.relatedPages.RelatedPagesGateway(
|
|
new mw.Api(),
|
|
mw.config.get( 'wgPageName' ),
|
|
mw.config.get( 'wgRelatedArticles' ),
|
|
mw.config.get( 'wgRelatedArticlesUseCirrusSearch' ),
|
|
mw.config.get( 'wgRelatedArticlesOnlyUseCirrusSearch' )
|
|
),
|
|
LIMIT = mw.config.get( 'wgRelatedArticlesCardLimit' ),
|
|
debouncedLoad = $.debounce( 100, function () {
|
|
loadRelatedArticles(); // eslint-disable-line
|
|
} ),
|
|
$window = $( window ),
|
|
shouldShowReadMore;
|
|
|
|
/**
|
|
* Is RelatedArticles extension enabled for current user
|
|
*
|
|
* Returns true if the user opted into the beta feature, otherwise
|
|
* user's session ID is used to determine the eligibility for RelatedArticles functionality,
|
|
* based on the value of wgRelatedArticlesEnabledSamplingRate
|
|
* thus the function will result the same outcome as long as the browser
|
|
* hasn't been restarted or the cookie hasn't been cleared.
|
|
*
|
|
* @return {boolean}
|
|
*/
|
|
function isEnabledForCurrentUser() {
|
|
var bucket,
|
|
samplingRate = mw.config.get( 'wgRelatedArticlesEnabledSamplingRate', 1 );
|
|
|
|
bucket = mw.experiments.getBucket( {
|
|
name: 'ext.relatedArticles.visibility',
|
|
enabled: true,
|
|
buckets: {
|
|
control: 1 - samplingRate,
|
|
A: samplingRate
|
|
}
|
|
}, mw.user.sessionId() );
|
|
return bucket === 'A';
|
|
}
|
|
|
|
/**
|
|
* 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 )
|
|
).done( 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 );
|
|
}
|
|
}
|
|
|
|
shouldShowReadMore = isEnabledForCurrentUser();
|
|
|
|
if ( shouldShowReadMore ) {
|
|
// 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 class="read-more-container" />' ).prependTo( '.footer-content' );
|
|
} else {
|
|
$( '<div class="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();
|
|
}
|
|
|
|
mw.track( 'ext.relatedArticles.logEnabled', { isEnabled: shouldShowReadMore } );
|
|
}( jQuery, mediaWiki ) );
|