MediaWiki:Gadget-poziciosTerkep.js

/**
 * This gadget enlarges location maps on click. It’s like MediaViewer,
 * but doesn’t show metadata and deals with the complex HTML structure
 * of location maps.
 */

/**
 * Add the event listener to location maps.
 * @param {jQuery} $content A jQuery object wrapping the DOM node
 *  containing the location maps.
 */
function addListeners( $content ) {
	$content.find( '.poziciosTerkepDoboz' ).each( function () {
		/** @type {HTMLElement|null} */
		var inner = this.querySelector( '.poziciosTerkepBelso' );
		if ( !inner ) {
			mw.log.warn( 'poziciosTerkep: .poziciosTerkepBelso not found in', this );
			return;
		}
		var images = inner.getElementsByTagName( 'img' );
		if ( !images.length ) {
			mw.log.warn( 'poziciosTerkep: image not found in', this );
			return;
		}
		if ( images[0].src.indexOf( '/thumb/' ) === -1 ) return;
		if ( images[1] && images[1].alt === 'Háttér' && images[1].src.indexOf( '/thumb/' ) === -1 ) return;
		$( inner ).find('a:first')
			.addClass( 'poziciosTerkepNagyito' )
			.click( openLargeMap );
	} );
}

/**
 * Enlarge a location map.
 * @param {Event} e The click event.
 */
function openLargeMap( e ) {
	// Prevent opening the file description page
	e.preventDefault();
	/**
	 * @var {boolean} Whether the large location map has been added
	 * to the page.
	 */
	var largeMapAdded = false;
	// Find small location map
	var $outer = $( e.delegateTarget ).parents( '.poziciosTerkepBelso:first' );

	// Copy map
	var $newDiv = $($outer[0].cloneNode(true));

	var newImg = [];
	newImg[0] = $newDiv.find('img')[0];
	newImg[0].title = newImg[0].src.match(/\/.\/..\/(.*\.[a-zA-z]{3,4})\/[^\/]*$/)[1];
	if ($newDiv.find('img')[1] && $newDiv.find('img')[1].alt === 'Háttér') {
		newImg[1] = $newDiv.find('img')[1];
		newImg[1].title = newImg[1].src.match(/\/.\/..\/(.*\.[a-zA-z]{3,4})\/[^\/]*$/)[1];
	}

	// Query original image sizes
	for (var i = 0; i < newImg.length; i++) {
		if (newImg[i].title.match(/\.[a-zA-z]{3,4}$/)[0] !== '.svg') {
			mw.loader.using('mediawiki.api', function () {
				new mw.Api().get({
					formatversion: '2',
					action: 'query',
					prop: 'imageinfo',
					iiprop: 'size',
					titles: 'File:' + newImg[i].title
				}).done(function (data) {
					var iinfo = data.query && data.query.pages &&
						data.query.pages[0].imageinfo && data.query.pages[0].imageinfo[0];
					if (typeof iinfo !== 'object' || !iinfo.width || !iinfo.height) return false;
					if (largeMapAdded && iinfo.width < newWidth) {
						for (var j = 0; j < newImg.length; j++) {
							newImg[j].width  = iinfo.width;
							newImg[j].height = iinfo.height;
							if (newImg[j].title.match(/\.[a-zA-z]{3,4}$/) !== '.svg')
								newImg[j].src = newImg[j].src.replace(/thumb/, '').replace(/\/[0-9]*px-.*\.[a-zA-z]{3,4}$/, '');
						}
					}
				});
			});
		}
	}

	// Determine sizes
	var oldWidth  = $outer[0].clientWidth;
	var oldHeight = $outer[0].clientHeight;
	var newWidth  = Math.round( $('html')[0].clientWidth  * 0.90 );
	var newHeight = Math.round( $('html')[0].clientHeight * 0.95 );
	if (oldHeight / oldWidth * newWidth > newHeight) {
		newWidth = Math.round(oldWidth / oldHeight * newHeight);
	} else {
		newHeight = Math.round(oldHeight / oldWidth * newWidth);
	}

	for (var i = 0; i < newImg.length; i++) {
		newImg[i].width  = newWidth;
		newImg[i].height = newHeight;
		newImg[i].src    = newImg[i].src.replace(new RegExp(oldWidth + 'px\\-', 'g'), newWidth + 'px-');
	}

	var $outerDiv = $('<div>')
		.attr('id', 'poziciosTerkepNagyitott')
		.addClass('mw-parser-output') // so that TemplateStyles applies
		.css({
			top: Math.round(((window.innerHeight || $('html')[0].clientHeight) - newHeight) / 2
				+ (document.body.scrollTop > 0 ? document.body.scrollTop : document.documentElement.scrollTop)),
			left: Math.round(((window.innerWidth || $('html')[0].clientWidth) - newWidth) / 2)
		});

	$newDiv
		.removeAttr( 'style' ) // remove inline CSS added by the template
		.appendTo( $outerDiv );

	$('<div>')
		.attr( 'id', 'poziciosTerkepClose' )
		.append(
			$('<img>')
				.attr('src', 'https://upload.wikimedia.org/wikipedia/commons/d/d4/Button_hide.png')
				.attr('title', 'Bezárás')
				.attr('tabindex', '0')
				.attr('role', 'button')
				.click(closeLargeMap)
		)
		.prependTo($outerDiv);

	// Add to the DOM
	$outerDiv.prependTo('body');
	largeMapAdded = true;

	// Add a dark background
	$('<div>')
		.attr('id', 'poziciosTerkepOpacity')
		.click(closeLargeMap)
		.appendTo('body');

	$( document ).keyup( handleKeyPress );

	return false;
}

/**
 * Handle `keyup` events, so that the large map can be closed by
 * pressing the Escape key.
 * @param {Event} e The key press event.
 */
function handleKeyPress( e ) {
	if ( e.keyCode === 27 ) {
		closeLargeMap();
		return false;
	}
}

/**
 * Close the large map.
 */
function closeLargeMap() {
	$('#poziciosTerkepNagyitott, #poziciosTerkepOpacity').remove();
}

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