User:Fomafix/MediaWiki:Gadget-CommonsMedia.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.
Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/**
 * Adds the possibility to view an Wikimedia Commons image used as statement from Wikidata.
 *
 * @author [[User:Bene*]]
 */

( function ( mw, $ ) {
	"use strict";
	var	deferreds = {},
		dialog = {},
		width = 200;

	mw.util.addCSS( '.commonsmedia .ui-dialog-title { width: ' + ( width - 20 ) + 'px; word-wrap: break-word; }' );

	switch ( mw.config.get( 'wgUserLanguage' ) ) {
	case 'en':
	default:
		mw.messages.set( 'commons-preview-tooltip', 'Show preview of this image' );
		break;
	case 'de':
	case 'de-at':
	case 'de-ch':
	case 'de-formal':
		mw.messages.set( 'commons-preview-tooltip', 'Zeige Vorschau von diesem Bild' );
		break;
        case 'es':
                mw.messages.set( 'commons-preview-tooltip', 'Mostrar previsualización de esta imagen' );
                break;
	case 'fr':
		mw.messages.set( 'commons-preview-tooltip', 'Prévisualiser l’image.' );
		break;
        case 'gl':
                mw.messages.set( 'commons-preview-tooltip', 'Mostrar a vista previa da imaxe' );
                break;
        case 'id':
                mw.messages.set( 'commons-preview-tooltip', 'Lihat pratayang gambar ini' );
                break;
	case 'it':
		mw.messages.set( 'commons-preview-tooltip', 'Mostra l\'anteprima dell\'immagine.' );
		break;
	case 'ko':
		mw.messages.set( 'commons-preview-tooltip', '이미지 미리 보기' );
		break;
        case 'min':
                mw.messages.set( 'commons-preview-tooltip', 'Caliak pratonton gambar iko' );
                break;
        case 'pl':
		mw.messages.set( 'commons-preview-tooltip', 'Pokaż podgląd tej grafiki' );        
		break;
	}

	function getSrc( title ) {
		var apiPromise, deferred;
		if ( deferreds.hasOwnProperty( title ) ) {
			deferred = deferreds[title];
		} else {
			deferred = $.Deferred();

			apiPromise = $.ajax( {
				type: 'GET',
				url: mw.util.wikiScript( 'api' ),
				data: {
					format: 'json',
					action: 'query',
					prop: 'imageinfo',
					iiprop: 'url',
					iilimit: 1,
					iiurlwidth: width,
					titles: 'File:' + title
				}
			} )
			.done( function ( data ) {
				for ( var id in data.query.pages ) {
					deferred.resolve( data.query.pages[id].imageinfo[0].thumburl );
				}
			} )
			.fail( deferred.reject );

			deferred.abort = apiPromise.abort;
			deferreds[title] = deferred;
		}
		return deferred.promise( { abort: deferred.abort } );
	}

	function show( title ) {
		getSrc( title ).done( function ( src ) {
			// Lazy-load jquery UI dialog as it's by far not always needed
			mw.loader.using( 'jquery.ui', function () {
				if ( dialog.hasOwnProperty( title ) ) {
					dialog[title].dialog( 'close' );
				}
				dialog[title] = $( '<div>' )
				.append(
					$( '<img>' )
					.attr( {
						src: src,
						width: width,
						alt: title,
						title: title
					} )
				)
				.dialog( {
					title: title,
					width: width + 25,
					resizable: false,
					dialogClass: 'commonsmedia'
				} );
			} );
		} );
	}

	function init( $content ) {
		$content.find( '.valueview-expert-commonsmediatype' ).each( function () {
			var $a = $( this ).find( 'a' );
			var title = $a.text();
			$a.after(
				$( '<img>' )
				.css( {
					'margin-left': '5px',
					'cursor': 'pointer'
				} )
				.attr( {
					height: 11,
					width: 15,
					alt: '#',
					src: mw.config.get( 'stylepath' ) + '/common/images/magnify-clip.png',
					title: mw.msg( 'commons-preview-tooltip' )
				} )
				.click( function () {
					show( title );
				} )
			);
		} );
	}

	mw.hook( 'wikipage.content' ).add( init );

} ( mediaWiki, jQuery ) );