MediaWiki:Gadget-commons-text-as-overlay.js

// Code for gadget to add an overlay to images in the infobox
// © John Erling Blad, Creative Commons by Attribution 3.0
(function(){
	var $infobox = $('.infobox, .infoboks');
	if ($infobox.length === 0) {
		mw.log('did not find .infobox or .infoboks');
		return;
	}
	var $link = $infobox.find('.image').first(); // only use first
	if ($link.length === 0) {
		mw.log('did not find .image');
		return;
	}
	var $caption = $link.closest('tr').find('.thumbcaption');
	if ($caption.length > 0) {
		mw.log('there is already a caption');
		return;
	}
	$link.each(function(i, obj){
		mw.log('processing found .image: ' + i);
		var $img = $('img', this);
		var alt = $img.attr('alt');
		mw.log('alt :' + alt);
		var width = $img.outerWidth();
		width -= 10;
		var indent = ($(obj).parent().innerWidth() - $img.outerWidth(true))/2; // this assumes no padding and margin
		//indent -= 5;
		mw.log('width: ' + width);
		mw.log('indent: ' + indent);
		if (alt === null || alt === '') {
			mw.log('did not find alt attribute');
			return;
		}
		mw.log('sending request');
		$.ajax({
			dataType: "json",
			url: 'https://no.wikipedia.org/w/api.php?',
			data: {
				action: 'query',
				format: 'json',
				prop: 'imageinfo',
				titles: 'File:'+alt,
				iiprop: 'timestamp|user|url|size|mime|mediatype|extmetadata',
				iiextmetadatafilter: 'ObjectName|ImageDescription|Credit|Artist|AuthorCount|',
				iiextmetadatalanguage:'nb'
			},
			success: function( data, textStatus, jqXHR){
				mw.log('got succesfull reply');
				if (data.query.pages['-1'] === null) {
					mw.log('no page in result');
					return;
				}
				if (typeof data.query.pages['-1']['imageinfo'] === 'undefined') {
					mw.log('no image info in result');
					return;
				}
				if (data.query.pages['-1'].imageinfo[0]['extmetadata'] === null) {
					mw.log('no extmetadata in result');
					return;
				}
				// note that the following should use '==' and not '==='
				if (data.query.pages['-1'].imageinfo[0].extmetadata['ImageDescription'] == null) {
					mw.log('no image description in result');
					return;
				}
				mw.log('ImageDescription: ', data.query.pages['-1'].imageinfo[0].extmetadata['ImageDescription']);
				var overlay = $('<div>')
					.attr({
						class: 'img-overlay',
						style: 'display:none;'
							+ 'width:' + width + 'px;'
							+ 'left:' + indent + 'px;'
					})
					.html(data.query.pages['-1'].imageinfo[0].extmetadata.ImageDescription.value)
					.appendTo($(obj).parent());
				$(obj)
					.parent()
					.hover(
						function(){ overlay.stop().fadeIn(); },
						function(){ overlay.stop().fadeOut(); }
					)
					.attr({
						class: 'image-container'
					});
			},
			error: function(){
				mw.log('got succesfull reply');
			}
		});
	});
}());