Add "Show images from subcategories" link to category pages

extension.json

@@ -28,6 +28,7 @@
 		}
 	},
 	"Hooks": {
+		"CategoryPageView": "main",
 		"ImagePageAfterImageLinks": "main"
 	},
 	"MessagesDirs": {
@@ -106,6 +107,20 @@
 				"desktop",
 				"mobile"
 			]
+		},
+		"ext.relatedimages.subcatlink": {
+			"scripts": [
+				"ext.relatedimages.subcatlink.js"
+			],
+			"targets": [
+				"desktop",
+				"mobile"
+			],
+			"messages": [
+				"subcatimagesgallery-empty",
+				"subcatimagesgallery-link",
+				"subcatimagesgallery-link-loading"
+			]
 		}
 	},
 	"ResourceFileModulePaths": {

i18n/en.json

@@ -9,5 +9,7 @@
 	"relatedimages-header": "Related media",
 	"relatedimages-more": "Show more",
 	"relatedimages-more-loading": "Loading...",
-	"subcatimagesgallery-empty": "No images found."
+	"subcatimagesgallery-link": "Show images from subcategories",
+	"subcatimagesgallery-link-loading": "Loading...",
+	"subcatimagesgallery-empty": "No images found in subcategories."
 }

i18n/qqq.json

@@ -8,5 +8,8 @@
 	"relatedimages-desc": "{{desc|name=RelatedImages|url=https://www.mediawiki.org/wiki/Extension:RelatedImages}}",
 	"relatedimages-header": "Header above the Related Images widget",
 	"relatedimages-more": "Link that shows more recommended categories",
-	"relatedimages-more-loading": "Temporarily shown while waiting for more recommendations to be loaded."
+	"relatedimages-more-loading": "Temporarily shown while waiting for more recommendations to be loaded.",
+	"subcatimagesgallery-link": "Link that shows more images from subcategories of current category",
+	"subcatimagesgallery-link-loading": "Temporarily shown while waiting for more images to be loaded.",
+	"subcatimagesgallery-empty": "Shown if failed to find any images in subcategories."
 }

includes/Hooks.php

@@ -23,6 +23,7 @@
 
 namespace MediaWiki\RelatedImages;
 
+use CategoryPage;
 use ContentHandler;
 use DeferredUpdates;
 use File;
@@ -31,6 +32,7 @@
 use ImagePage;
 use MediaWiki\Content\Renderer\ContentRenderer;
 use MediaWiki\Logger\LoggerFactory;
+use MediaWiki\Page\Hook\CategoryPageViewHook;
 use MediaWiki\Page\Hook\ImagePageAfterImageLinksHook;
 use MediaWiki\Page\PageIdentity;
 use MediaWiki\Page\WikiPageFactory;
@@ -43,7 +45,7 @@
 /**
  * Hooks of Extension:RelatedImages.
  */
-class Hooks implements ImagePageAfterImageLinksHook {
+class Hooks implements CategoryPageViewHook, ImagePageAfterImageLinksHook {
 	/** @var ContentRenderer */
 	protected $contentRenderer;
 
@@ -74,6 +76,16 @@ public function __construct(
 		$this->wikiPageFactory = $wikiPageFactory;
 	}
 
+	/**
+	 * Add "Show images from subcategories" link to category pages.
+	 *
+	 * @param CategoryPage $catpage
+	 * @return bool|void True or no return value to continue or false to abort
+	 */
+	public function onCategoryPageView( $catpage ) {
+		$catpage->getContext()->getOutput()->addModules( [ 'ext.relatedimages.subcatlink' ] );
+	}
+
 	/**
 	 * When rendering the page File:Something, find several more images that are
 	 * in the same categories and display them as "Related images" navigation box.

modules/ext.relatedimages.subcatlink.js

@@ -0,0 +1,44 @@
+/*
+	Script for [[Category:Something]] pages.
+*/
+
+$( function () {
+	if ( !$( '#mw-subcategories' ).length ) {
+		// No subcategories.
+		return;
+	}
+
+	var $gallery = $( '.gallery' );
+	if ( !$gallery.length ) {
+		// No images in this category,
+		// it's very likely that subcategores won't have them either.
+		return;
+	}
+
+	var $loading = $( '<div>' )
+		.attr( 'class', 'mw-subcatimagesgallery-loading' )
+		.append( mw.msg( 'subcatimagesgallery-link-loading' ) );
+
+	function onfail() {
+		$loading.html( mw.msg( 'subcatimagesgallery-empty' ) );
+	}
+
+	$gallery.after( $( '<a>' )
+		.append( mw.msg( 'subcatimagesgallery-link' ) )
+		.click( function () {
+			$( this ).remove();
+			$gallery.after( $loading );
+
+			var url = new mw.Title( 'Special:SubcatImagesGallery/' + mw.config.get( 'wgTitle' ) ).getUrl();
+			$.get( url ).done( function ( res ) {
+				var $newgallery = $( '<div>' ).append( res ).find( '.gallery' );
+				if ( !$newgallery.length ) {
+					return onfail();
+				}
+
+				$loading.replaceWith( $newgallery );
+				$newgallery[ 0 ].scrollIntoView( { behavior: 'smooth' } );
+			} ).fail( onfail );
+		} )
+	);
+} );