MediaWiki:Common.js

( function() {
'use strict';

/**
 * Instead of cluttering up the global scope with
 * variables, they should instead be set as a
 * property of this global variable
 *
 * E.g: Instead of
 *   myVar = 'blah';
 * use
 *   mcw.myVar = 'blah';
 */
window.mcw = {};


/* Legacy support */
mcw.baseURL = '/w';
mcw.wikiURL = '/w';

mcw.animation = function() {
    /**
	 * Element animator
	 *
	 * Will cycle the active class on any child elements
	 * within an element with the animated class.
	 */
	if ( mcw.animate === undefined && $( '.animated' ).length ) {
		mcw.animate = setInterval( function() {
			$( '.animated' ).each( function() {
				var current = $( this ).find( '.active' ).removeClass( 'active' ), next = current.next();
				if ( !current.next().length ) {
					next = $( this ).children().eq( 0 );
				}
				next.addClass( 'active' );
			} );
		}, 2000 );
	}
	
	
	/**
	 * Frame loader 
	 * 
	 * Loads a semi-colon (;) separated list of images
	 * to be animated by the element animator
	 * 
	 * Has special support for [[Template:Grid]]
	 */
	var $animate = $( '.animated' ), size = {}, fileNamespace = mw.config.get( 'wgFormattedNamespaces' )[6];
	if ( $animate.length ) {
		$animate.each( function() {
			var imgs = $( this ).data( 'imgs' ), imgSize = $( this ).data( 'img-size' ),
				grid = $( this ).closest( '.grid' ), mod = $( this ).data( 'mod' );
			
			if ( !imgs ) {
				return true;
			}
			if ( grid.length ) {
				grid = true;
				imgSize = '32x32';
			} else {
				grid = false;
				if ( imgSize ) {
					imgSize = imgSize.split( 'x' );
					imgSize[0] = imgSize[0].replace( /[\D ]/, '' );
					imgSize[1] = imgSize[1].replace( /[\D ]/, '' );
					
					if ( imgSize[1] ) {
						imgSize[0] += 'x' + imgSize[1];
					}
					
					imgSize = imgSize[0];
				} else {
					imgSize = '';
				}
			}
			
			if ( size[imgSize] === undefined ) {
				size[imgSize] = [];
			}
			
			imgs = imgs.split( ';' );
			imgs.shift();
			$.each( imgs, function() {
				if ( !this.trim() ) {
					return true;
				}
				
				var parts, name;
				if ( grid ) {
					if ( this.indexOf( ':' ) > -1 ) {
						parts = $.map( this.split( /[:,]+/ ), $.trim );
						if ( parts[0].toLowerCase() === 'v' || parts[0].toLowerCase() === 'vanilla' ) {
							name = fileNamespace + ':' + mcw.i18n.gridPrefix + ' ' + parts[1] + '.png';
						} else {
							name = fileNamespace + ':' + mcw.i18n.gridPrefix + ' ' + parts[1] + ' (' + parts[0] + ').png';
						}
					} else {
						parts = $.map( this.split( ',' ), $.trim );
						if ( !mod ) {
							name = fileNamespace + ':' + mcw.i18n.gridPrefix + ' ' + parts[0] + '.png';
						} else {
							name = fileNamespace + ':' + mcw.i18n.gridPrefix + ' ' + parts[0] + ' (' + mod + ').png';
						}
					}
					
					if ( size[imgSize].indexOf( name ) < 0 ) {
						size[imgSize].push( name );
					}
				} else if ( size[imgSize].indexOf( fileNamespace + ':' + this.trim() ) < 0 ) {
					size[imgSize].push( fileNamespace + ':' + this.trim() );
				}
			} );
		} );
		
		var redirectPromise = [], urlPromise = [], redirects = {}, urls = {};
		$.each( size, function( size ) {
			var titles = this;
			if ( !titles ) {
				return true;
			}
			
			// Split titles up into blocks of 50, which is the API's title limit for standard users
			for ( var i = 0; i < titles.length; i += 50 ) { ( function() {
				var section = titles.slice( i, i + 50 ).join( '|' );
			
				redirectPromise.push(
					// Thanks to bug 23750 (https://bugzilla.wikimedia.org/show_bug.cgi?id=23750)
					// &redirects doesn't work properly with prop=imageinfo. Some of the images
					// will return without any imageinfo, even though they are valid.
					// So the redirects have to be resolved in a separate request...
					$.ajax( {
						type: 'POST',
						url: '/w/api.php?action=query&format=json&redirects',
						data: { titles: section },
						timeout: 20000
					} ).done( function( data ) {
						if ( data.query.redirects ) {
							$.each( data.query.redirects, function() {
								redirects[this.to] = this.from;
								section = section.replace( this.from, this.to );
							} );
						}
						
						var thumburl = '', sizes = size.split( 'x' );
						if ( sizes[0] ) {
							thumburl = '&iiurlwidth=' + sizes[0];
							
							if ( sizes[1] ) {
								thumburl += '&iiurlheight=' + sizes[1];
							}
						}
						urlPromise.push(
							$.ajax( {
								type: 'POST',
								url: '/w/api.php?action=query&format=json&prop=imageinfo&iiprop=url' + thumburl,
								data: { titles: section },
								timeout: 20000
							} ).done( function( data ) {
								$.each( data.query.pages, function( index ) {
									if ( index < 0 ) {
										return true;
									}
									if ( !this.imageinfo ) {
										mw.log( 'Imageinfo is empty' );
										return true;
									}
									
									var url = this.imageinfo[0].thumburl || this.imageinfo[0].url;
									if ( redirects.hasOwnProperty( this.title ) ) {
										urls[redirects[this.title].replace( new RegExp( fileNamespace + ':(.*)' ), '$1' ) + size] = url;
									} else {
										urls[this.title.replace( new RegExp( fileNamespace + ':(.*)' ), '$1' ) + size] = url;
									}
								} );
							} ).fail( function( error ) {
								mw.log( error );
							} )
						);
					} ).fail( function( error ) {
						mw.log( error );
					} )
				);
			} )(); }
		} );
		
		$.when.apply( $, redirectPromise ).then( function() {
			$.when.apply( $, urlPromise ).then( function() {
				$animate.each( function() {
					var imgs = $( this ).data( 'imgs' ), imgSize = $( this ).data( 'img-size' ), html = '',
						grid = $( this ).closest( '.grid' ), mod = $( this ).data( 'mod' );
					
					if ( !imgs ) {
						return true;
					}
					if ( grid.length ) {
						grid = true;
						imgSize = '32x32';
					} else {
						grid = false;
						if ( imgSize ) {
							imgSize = imgSize.split( 'x' );
							imgSize[0] = imgSize[0].replace( /[\D ]/, '' );
							imgSize[1] = imgSize[1].replace( /[\D ]/, '' );
							
							if ( imgSize[1] ) {
								imgSize[0] += 'x' + imgSize[1];
							}
							
							imgSize = imgSize[0];
						} else {
							imgSize = '';
						}
					}
					
					imgs = imgs.split( ';' );
					imgs.shift();
					$.each( imgs, function() {
						if ( !this.trim() ) {
							if ( grid ) {
								html += '<span class="image">&nbsp;</span>';
							}
							return true;
						}
						
						var parts, name, link, url, num;
						if ( grid ) {
							if ( this.indexOf( ':' ) > -1 ) {
								parts = $.map( this.split( /[:,]+/ ), $.trim );
								if ( parts[0].toLowerCase() === 'v' || parts[0].toLowerCase() === 'vanilla' ) {
									name = link = parts[1];
									url = urls[mcw.i18n.gridPrefix + ' ' + parts[0] + '.png' + imgSize];
									num = parts[2];
								} else {
									name = parts[1] + ' (' + parts[0] + ')';
									link = mcw.i18n.gridModsURL + '/' + parts[0] + '/' + parts[1];
									url = urls[mcw.i18n.gridPrefix + ' ' + name + '.png' + imgSize];
									num = parts[2];
								}
							} else {
								parts = $.map( this.split( ',' ), $.trim );
								if ( !mod ) {
									name = link = parts[0];
									url = urls[mcw.i18n.gridPrefix + ' ' + parts[0] + '.png' + imgSize];
									num = parts[1];
								} else {
									name = parts[0] + ' (' + mod + ')';
									link = mcw.i18n.gridModsURL + '/' + mod + '/' + parts[0];
									url = urls[mcw.i18n.gridPrefix + ' ' + name + '.png' + imgSize];
									num = parts[1];
								}
							}
							
							html += '<span class="image">';
							if ( name ) {
								if ( url ) {
									html += '<a title="' + link + '" href="/' + link.replace( / /g, '_' ) + '"><img width="32" height="32" src="' + url + '" alt="' + name + '"></a>';
									if ( num ) {
										html += '<span class="number"><a title="' + link + '" href="/' + link.replace( / /g, '_' ) + '">' + num + '</a></span>';
									}
								} else {
									html += '<a class="new" title="' + fileNamespace + ':' + mcw.i18n.gridPrefix + ' ' + name + '.png" href="/index.php?title=Special:Upload&wpDestFile=' + mcw.i18n.gridPrefix + '_' + name.replace( / /g, '_' ) + '.png"></a>';
								}
							} else {
								html += '&nbsp;';
							}
							html += '</span>';
						} else {
							name = this.trim();
							html += '<span>';
							if ( urls[name + imgSize] ) {
								html += '<a href="/' + fileNamespace + ':' + name.replace( / /g, '_' ) + '"><img src="' + urls[name + imgSize] + '" alt="' + name + '"></a>';
							} else {
								html += '<a class="new" title="' + fileNamespace + ':' + name + '" href="/index.php?title=Special:Upload&wpDestFile=' + name.replace( / /g, '_' ) + '">' + fileNamespace + ':' + name + '</a>';
							}
							html += '</span>';
						}
					} );
					
					$( this ).append( html ).data( 'imgs', null );
				} );
			} );
		} );
	}
};
mcw.animation();


/**
 * Pause grid GUI templates (e.g. [[Template:Grid/Crafting Table]]) on mouseover
 *
 * This is so people have a chance to look at each image on the cell
 * and click on pages they want to view.
 */
$( '#mw-content-text' ).on( {
	'mouseenter': function() { 
		$( this ).find( '.animated' ).removeClass( 'animated' ).addClass( 'paused' );
	},
	'mouseleave': function() {
		$( this ).find( '.paused' ).removeClass( 'paused' ).addClass( 'animated' );
	}
}, '.grid-Crafting_Table, .grid-furnace, .grid-Brewing_Stand' );