User:JDrewniak (WMF)/searchThumbs.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

( function ( $, mw ) {
	var api = new mw.Api(),
		$results = $( '.mw-search-results li' ),
		resultsCount = $results.length,
		queryTitles = [];

	/**
	 * Only load thumbnails if we're on Special:Search,
	 * and using default search profile,
	 * and have results to work with.
	 * Otherwise emit the thumbsLoaded custom event and exit early.
	 */
	if ( mw.config.get( 'wgCanonicalSpecialPageName' ) !== 'Search' ||
		( mw.util.getParamValue( 'profile' ) !== 'default' &&
		mw.util.getParamValue( 'profile' ) !== null ) || // no param is the default profile
		resultsCount === 0
	) {
		mw.track( 'ext.wikimediaEvents.searchThumbnails.thumbsLoaded', [] );
		return;
	}

	$results.each( function ( i, el ) {
		var title = $( el ).find( '.mw-search-result-heading > a' ).attr( 'title' );
		queryTitles.push( title.replace( ' (page does not exist)', '' ) );
	} );

	function appendThumbnail( el, thumb ) {
		$( el ).children( '.searchresult' ).prepend( thumb );
	}
	/**
	 * Thumbnail template using jQuery.
	 *
	 * @param {string} url
	 * @return {Object} - return jQuery element with thumbnail if url exists.
	 */
	function createThumbnail( url ) {
		if ( url ) {
			return $( '<div>' ).css( {
				'border-radius': '2px',
				'margin-right': '0.5em',
				'float': 'left',
				width: '4em',
				height: '4em',
				'background-size': 'cover',
				'margin-top': '0.3em',
				'background-image': 'url(' + url + ')'
			} );
		}
	}
	/**
	 * Process API data.
	 * - Match the thumbnails to a search result based on title match.
	 * - Append the thumbnail to the appropriate search result.
	 * - Returns an array containing the positions of the search results
	 *   that have thumbnails.
	 *
	 * @param {Object} data - API return data.
	 * @return {Array}
	 */
	function processThumbs( data ) {
		var resultsWithThumbs = [];
		if ( data.query && data.query.pages ) {
			data.query.pages.forEach( function ( page ) {
				var title, thumb, el;
				if ( page.thumbnail ) {
					title = page.title;
					thumb = createThumbnail( page.thumbnail.source );
					el = $results.get( queryTitles.indexOf( title ) );
					appendThumbnail( el, thumb );
					resultsWithThumbs.push( $( el ).find( '.mw-search-result-heading a' ).data( 'serp-pos' ) );
				}
			} );
		}
		return resultsWithThumbs;
	}

	function emitCustomEvent( resultsWithThumbs ) {
		mw.track( 'ext.wikimediaEvents.searchThumbnails.thumbsLoaded', resultsWithThumbs.sort( function ( a, b ) { return a > b; } ) );
	}

	api.get( {
		action: 'query',
		format: 'json',
		prop: 'pageimages',
		titles: queryTitles,
		formatversion: 2,
		piprop: 'thumbnail',
		pithumbsize: 200,
		origin: '*'
	} )
	.then( processThumbs )
	.then( emitCustomEvent );

}( jQuery, mediaWiki ) );