Make RelatedArticles soft-depend on Cards

RelatedArticles tries to load the 'ext.cards' module and if
it succeeds it continues with showing the related articles
on the page.

Dependency: I6661527175eb889cec4193b18fa18207f332b4fc
Bug: T117108
Change-Id: I33936a3e9cd5d1f0296e48fd1c2bba77fff4e466

extension.json

@@ -63,9 +63,9 @@
 	},
 	"manifest_version": 1,
 	"ResourceModules": {
-		"ext.relatedArticles.readMore": {
+		"ext.relatedArticles.readMore.gateway": {
 			"scripts": [
-				"resources/ext.relatedArticles.readMore/RelatedPagesGateway.js"
+				"resources/ext.relatedArticles.readMore.gateway/RelatedPagesGateway.js"
 			],
 			"dependencies": [
 				"oojs"
@@ -81,7 +81,7 @@
 			],
 			"dependencies": [
 				"mediawiki.api",
-				"ext.relatedArticles.readMore"
+				"ext.relatedArticles.readMore.gateway"
 			],
 			"targets": [
 				"mobile",

includes/ReadMoreHooks.php

@@ -23,12 +23,12 @@ class ReadMoreHooks {
 			'targets' => array( 'desktop', 'mobile' ),
 		);
 
-		$modules['qunit']['ext.relatedArticles.readMore.tests'] = $boilerplate + array(
+		$modules['qunit']['ext.relatedArticles.readMore.gateway.tests'] = $boilerplate + array(
 			'scripts' => array(
-				'ext.relatedArticles.readMore/test_RelatedPagesGateway.js',
+				'ext.relatedArticles.readMore.gateway/test_RelatedPagesGateway.js',
 			),
 			'dependencies' => array(
-				'ext.relatedArticles.readMore',
+				'ext.relatedArticles.readMore.gateway',
 			),
 		);
 		return true;
@@ -65,9 +65,9 @@ class ReadMoreHooks {
 	 * <ol>
 	 *   <li><code>$wgRelatedArticlesShowReadMore</code> is truthy</li>
 	 *   <li>
-	 *     The output is being rendered with the
-	 *     <code>SkinMinervaBeta<code> skin, i.e. the user is currently
-	 *     viewing the page on the mobile set in beta mode
+	 *     The output is being rendered with any skin except the
+	 *     <code>SkinMinerva<code> skin, i.e. the user is currently
+	 *     not viewing the page on the mobile set in stable mode
 	 *   </li>
 	 *   <li>The page is in mainspace</li>
 	 * </ol>
@@ -84,7 +84,7 @@ class ReadMoreHooks {
 
 		if (
 			$showReadMore &&
-			get_class( $skin ) === 'SkinMinervaBeta' &&
+			get_class( $skin ) !== 'SkinMinerva' &&
 			$title->inNamespace( NS_MAIN ) &&
 			!$title->isMainPage()
 		) {
@@ -131,7 +131,7 @@ class ReadMoreHooks {
 	}
 
 	/**
-	 * Register the "ext.relatedArticles.readMore.minerva" module.
+	 * Register the "ext.relatedArticles.readMore" module.
 	 * Optionally update the dependencies and scripts if EventLogging is installed.
 	 *
 	 * @see https://www.mediawiki.org/wiki/Manual:Hooks/ResourceLoaderRegisterModules
@@ -141,24 +141,25 @@ class ReadMoreHooks {
 	 */
 	public static function onResourceLoaderRegisterModules( ResourceLoader &$resourceLoader ) {
 		$dependencies = array(
-			"mediawiki.user"
+			"mediawiki.user",
+			"mediawiki.util"
 		);
 		$scripts = array(
-			"resources/ext.relatedArticles.readMore.minerva/index.js"
+			"resources/ext.relatedArticles.readMore/index.js"
 		);
 
 		if ( class_exists( 'EventLogging' ) ) {
 			$dependencies[] = "ext.eventLogging.Schema";
-			$scripts[] = "resources/ext.relatedArticles.readMore.minerva/eventLogging.js";
+			$scripts[] = "resources/ext.relatedArticles.readMore/eventLogging.js";
 		}
 
 		$resourceLoader->register(
-			"ext.relatedArticles.readMore.minerva",
+			"ext.relatedArticles.readMore",
 			array(
 				"dependencies" => $dependencies,
 				"scripts" => $scripts,
 				"styles" => array(
-					"resources/ext.relatedArticles.readMore.minerva/readMore.less"
+					"resources/ext.relatedArticles.readMore/readMore.less"
 				),
 				"messages" => array(
 					"relatedarticles-read-more-heading"

resources/ext.relatedArticles.readMore.bootstrap/index.js

@@ -13,14 +13,14 @@
 	if (
 		config.wgNamespaceNumber === 0 &&
 		!config.wgIsMainPage &&
-		config.skin === 'minerva' &&
-		config.wgMFMode === 'beta'
+		// any skin except minerva stable
+		( config.skin !== 'minerva' || config.wgMFMode === 'beta' )
 	) {
 		$.when(
 			// Note we load dependencies here rather than ResourceLoader
-			// to avoid PHP exceptions when MobileFrontend not installed
+			// to avoid PHP exceptions when Cards not installed
 			// which should never happen given the if statement.
-			mw.loader.using( [ 'mobile.pagelist.scripts', 'ext.relatedArticles.readMore.minerva' ] ),
+			mw.loader.using( [ 'ext.cards', 'ext.relatedArticles.readMore' ] ),
 			relatedPages.getForCurrentPage( LIMIT )
 		).done( function ( _, pages ) {
 			if ( pages.length ) {

resources/ext.relatedArticles.readMore.gateway/RelatedPagesGateway.js

@@ -81,8 +81,7 @@
 		}
 
 		return this.api.get( parameters )
-			.then( getPages )
-			.then( processPages );
+			.then( getPages );
 	};
 
 	/**
@@ -92,30 +91,5 @@
 		return result && result.query && result.query.pages ? result.query.pages : [];
 	}
 
-	/**
-	 * @ignore
-	 */
-	function processPages( pages ) {
-		return $.map( pages, function ( page ) {
-			var result = {
-				id: page.pageid,
-				isMissing: !page.pageid,
-				title: page.title,
-				thumbnail: page.thumbnail,
-				wikidataDescription: undefined
-			};
-
-			if (
-				page.terms &&
-				page.terms.description &&
-				page.terms.description.length > 0
-			) {
-				result.wikidataDescription = page.terms.description[ 0 ];
-			}
-
-			return result;
-		} );
-	}
-
 	mw.relatedPages.RelatedPagesGateway = RelatedPagesGateway;
 }( jQuery ) );

resources/ext.relatedArticles.readMore.minerva/index.js

@@ -1,52 +0,0 @@
-( function ( $ ) {
-
-	var MOBILE_WEB_WATCHING_FUNNEL = 'read-more';
-
-	/**
-	 * Converts the set of pages generated in the init script into a set of
-	 * `Page`s, suitable for use with `WatchstarPageList`.
-	 *
-	 * @param {Object[]} pages
-	 * @return {Page[]}
-	 */
-	function convertPages( pages ) {
-		var Page = mw.mobileFrontend.require( 'mobile.startup/Page' );
-
-		return $.map( pages, function ( rawPage ) {
-			return new Page( rawPage );
-		} );
-	}
-
-	mw.trackSubscribe( 'ext.relatedArticles.init', function ( _, pages ) {
-		var WatchstarPageList = mw.mobileFrontend.require( 'mobile.pagelist.scripts/WatchstarPageList' ),
-			pageList,
-			$container = $( '#content' ),
-			$readMore;
-
-		pageList = new WatchstarPageList( {
-			pages: convertPages( pages ),
-
-			// FIXME: When the user clicks any watchstar, a
-			// MobileWebWatching event is logged. Watchstar, which
-			// logs the event, has a sensible default value for
-			// MobileWebWatching.funnel, but it's overwritten
-			// by WatchstarPageList.
-			funnel: MOBILE_WEB_WATCHING_FUNNEL,
-
-			api: new mw.Api()
-		} );
-
-		$readMore = $( '<aside class="ra-read-more post-content"></aside>' );
-		$readMore.append(
-			$( '<h2></h2>' ).text( mw.msg( 'relatedarticles-read-more-heading' ) )
-		);
-
-		$readMore.append( pageList.$el );
-
-		$container.append( $readMore );
-
-		// the ReadMore code is ready
-		mw.track( 'ext.relatedArticles.logReady', { $readMore: $readMore } );
-	} );
-
-}( jQuery ) );

resources/ext.relatedArticles.readMore/index.js

@@ -0,0 +1,58 @@
+( function ( $ ) {
+	// Make sure 'ext.cards' is loaded. It may not be because of the race
+	// condition in the bootstrap file.
+	mw.loader.using( 'ext.cards' ).done( function () {
+		var CardModel = mw.cards.CardModel,
+			CardView = mw.cards.CardView,
+			CardListView = mw.cards.CardListView;
+
+		/**
+		 * Generates `mw.cards.CardView`s from pages
+		 *
+		 * @param {Object[]} pages
+		 * @return {mw.cards.CardView[]}
+		 */
+		function getCards( pages ) {
+			return $.map( pages, function ( page ) {
+				var result = {
+					title: page.title,
+					url: mw.util.getUrl( page.title ),
+					hasThumbnail: false
+				};
+
+				if ( page.thumbnail ) {
+					result.hasThumbnail = true;
+					result.thumbnailUrl = page.thumbnail.source;
+					result.isThumbnailPortrait = page.thumbnail.height >= page.thumbnail.width;
+				}
+
+				if (
+					page.terms &&
+					page.terms.description &&
+					page.terms.description.length
+				) {
+					result.extract = page.terms.description[ 0 ];
+				}
+
+				return new CardView( new CardModel( result ) );
+			} );
+		}
+
+		mw.trackSubscribe( 'ext.relatedArticles.init', function ( _, pages ) {
+			var $readMore,
+				cards;
+
+			cards = new CardListView( getCards( pages ) );
+
+			$readMore = $( '<aside class="ra-read-more post-content"></aside>' )
+				.append( $( '<h2></h2>' ).text( mw.msg( 'relatedarticles-read-more-heading' ) ) )
+				.append( cards.$el );
+
+			$( '#content' ).append( $readMore );
+
+			// the ReadMore code is ready
+			mw.track( 'ext.relatedArticles.logReady', { $readMore: $readMore } );
+		} );
+	} );
+
+}( jQuery ) );

resources/ext.relatedArticles.readMore/readMore.less

@@ -17,9 +17,3 @@
 .ra-read-more .page-list {
 	border-top: 1px solid @colorGray14;
 }
-
-// See MobileFrontend/resources/mobile.pagelist.styles/pagelist.less for
-// example HTML.
-.ra-read-more .page-summary h3 {
-	color: black;
-}