MediaWiki:Gadget-CommonsMedia.js

/**
 * Adds the possibility to view an Wikimedia Commons image used as statement from Wikidata.
 *
 * @author [[User:Bene*]]
 */

( function ( mw, $ ) {
	"use strict";
	var	cache = {},
		dialog = {},
		width = 200,
		api = new mw.Api();

	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 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 () {
					if ( cache.hasOwnProperty( title ) ) {
						show( title );
					} else {
						api.get( {
							action: 'query',
							prop: 'imageinfo',
							iiprop: 'url',
							iilimit: 1,
							iiurlwidth: width,
							titles: 'File:' + title
						} )
						.done( function ( data ) {
							for ( var id in data.query.pages ) {
								cache[title] = data.query.pages[id].imageinfo[0].thumburl;
								show( title );
							}
						} );
					}
				} )
			);
		} );
	}

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

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

} ( mediaWiki, jQuery ) );