User:JDrewniak (WMF)/searchThumbs.js

( 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 $( ' ' ).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 ) );