MediaWiki:Gadget-Gallerypreview.js

/*
JavaScript-based gallery preview using query.php
Version 0.2
(c) 2007 by Magnus Manske
Released under GPL
*/
var gp_div, gp_head, gp_status;
var gp_xmlobjects;
var gp_cat_object;
var gp_cat_object2;
var gp_image_xml;
var gp_counter;
var gp_left;
var gp_found;
var gp_found2;
var gp_size = 75;
var gp_maxw;

// Avoid license categories etc.
var gp_avoid_cats = new Array(
	'CC-',
	'PD-',
	'PD ',
	'GPL',
	'Self',
	'GFDL',
	'Copyrighted free use',
	'Media with locations',
	'Deletion',
	'Incomplete deletion',
	'Flickr review needed',
	'Flickr images needing human review',
	'User-created GFDL images',
	'Images without source',
	'Images that should use vector graphics',
	'STOP!!!! DO NOT DELETE THIS IMAGE TILL YOU REPLACE IT IN THE WIKIMEDIA LOGO MOSAIC',
	'Wikimedia logo mosaic/'
);

// Install onload handler, which will display the link to start the script
if( mw.config.get('wgNamespaceNumber') == 6 && mw.config.get('wgAction') == 'view' ) {
	onDOMComplete( this, init_gallery_preview );
/*
	if ( window.addEventListener ) {
		window.addEventListener( 'load', init_gallery_preview, false );
	} else if ( window.attachEvent ) {
		window.attachEvent( 'onload', init_gallery_preview );
	}
*/
}

// Onload handler
// Adds div section with id "gallerypreview"
function init_gallery_preview() {
	gp_maxw = ( gp_size + 10 ) * 3;
	file_div = document.getElementById( 'file' );

	var dummy = document.createElement( 'div' );
	file_div.insertBefore( dummy, file_div.firstChild );
	dummy.innerHTML = '<div id="gallerypreview_container" style="border:1px solid #AAAAAA;float:right;max-width:' + gp_maxw + 'px;width:' + gp_maxw + 'px">' +
	'<div id="gp_head" style="background-color:#AAAAFF;padding:2px;border:1px solid #AAAAAA;display:block;"><font 	color="#FFFF99">Loading...</font></div>' +
	'<div id="gallerypreview" style="display:block;width:' + gp_maxw + 'px"></div>' +
	'<div id="gp_status" style="border:1px solid #AAAAAA;padding:2px;"></div>' +
	'</div>';

	gp_div = document.getElementById( 'gallerypreview' );
	while ( gp_div.firstChild ) {
		gp_div.removeChild ( gp_div.firstChild );
	}
	gp_maxw -= 2;
	setTimeout( 'run_gallerypreview()', 10 );
}

// Handler to toggle the listing of hits for a single language/project
function toggle_id( id ) {
	var e = document.getElementById( id );
	if ( e.style.display == 'none' ) {
		e.style.display = 'block';
	} else {
		e.style.display = 'none';
	}
}

// Helper function for toggle_all()
function getElementsByClass( searchClass, node, tag ) {
	var classElements = new Array();
	if ( node == null ) {
		node = document;
	}
	if ( tag == null ) {
		tag = '*';
	}
	var els = node.getElementsByTagName( tag );
	var elsLen = els.length;
	var pattern = new RegExp( '(^|\\s)' + searchClass + '(\\s|$)' );
	for ( i = 0, j = 0; i < elsLen; i++ ) {
		if ( pattern.test( els[i].className ) ) {
			classElements[j] = els[i];
			j++;
		}
	}
	return classElements;
}

// Handler to toggle the listing of hits for all languages/projects
function toggle_all() {
	var newstate = '';
	var els = getElementsByClass( 'checkusage_item', checkusage_footer, '*' );
	for ( var i = 0; i < els.length; i++ ) {
		if ( newstate == '' ) {
			if ( els[i].style.display == 'none' ) {
				newstate = 'block';
			} else {
				newstate = 'none';
			}
		}
		els[i].style.display = newstate;
	}
}

function gp_check_done() {
	for ( var i = 0; i < gp_xmlobjects.length; i++ ) {
		if ( gp_xmlobjects[i].running ) {
			return;
		}
	}
	for ( var i = 0; i < gp_image_xml.length; i++ ) {
		if ( gp_image_xml[i].running ) {
			return;
		}
	}
	gp_head.innerHTML = "<a href='#' style='float:right' onClick='toggle_id(\"gallerypreview\");'>Show/hide preview</a>Done.";
}

function get_thumbnail_url( url , width ) {
	url = url.replace( '/commons/' , '/commons/thumb/' );
	var iname = url.split( '/' ).pop();
	url += '/' + width + 'px-' + iname;
	gp_check_done();
	return url;
}

function gp_image_callback() {
	for ( var i = 0; i < gp_image_xml.length; i++ ) {
		if ( gp_image_xml[i].readyState == 4 && gp_image_xml[i].running == true ) {
			gp_image_xml[i].running = false;
			var xml = gp_image_xml[i].responseXML;
			var image = xml.getElementsByTagName( 'image' )[0];
			var width = image.attributes.getNamedItem( 'width' ).value;
			var height = image.attributes.getNamedItem( 'height' ).value;

			var nw = gp_size;
			var nh = nw / width * height;
			var off = ' style="position:relative;overflow:hidden;';
			if ( nh < gp_size ) {
				nh = gp_size;
				nw = nh / height * width;
				var xoff = -( nw - gp_size ) / 2;
				off += 'left:' + Math.floor( xoff ) + 'px;';
			}
			if ( nh > gp_size ) {
				var yoff = -( nh - gp_size ) / 2;
				off += 'top:' + Math.floor( yoff ) + 'px;';
			}
			off += '" ';

			var url = get_thumbnail_url( image.attributes.getNamedItem( 'url' ).value, Math.floor( nw ) );

			var target = document.getElementById( gp_image_xml[i].myid );
			target.innerHTML = '<div style="overflow:hidden;width:75px;height:75px"><a href="/wiki/' +
				gp_image_xml[i].image + '"><img border="0" ' + off + 'src="' + url + '"/></a></div>';
			gp_check_done();
		}
	}
	gp_check_done();
}

function gp_add_thumbnail( image ) {
	var myid = 'gpid_' + gp_counter;
	gp_counter += 1;
	var ret = '<td id="' + myid + '" style="overflow:hidden;width:75px;height:75px;font-size:75%;text-align:left;color:white';
	if ( image == '' ) {
		ret += ';background-color:#BBBBBB">';
		ret += 'No other files here';
	} else {
		ret += '">';
	}
	ret += '</td>';

	if ( image == '' ) {
		return ret;
	}

	var url = '//commons.wikimedia.org/w/query.php?what=imageinfo&format=xml&iiurl&titles=' + image;
	var i = gp_image_xml.length;
	gp_image_xml.push( new XMLHttpRequest() );
	gp_image_xml[i].image = image;
	gp_image_xml[i].myid = myid;
	gp_image_xml[i].running = true;
	gp_image_xml[i].onreadystatechange = gp_image_callback;
	gp_image_xml[i].open( 'GET', url, true );
	gp_image_xml[i].send( null );

	gp_check_done();
	return ret;
}

function categorypreview_callback() {
	for ( var i = 0; i < gp_xmlobjects.length; i++ ) {
		if ( gp_xmlobjects[i].readyState == 4 && gp_xmlobjects[i].running == true ) {
			gp_xmlobjects[i].running = false;
			var xml = gp_xmlobjects[i].responseXML;
			var cat = gp_xmlobjects[i].category;
			var ts = gp_xmlobjects[i].timestamp;
			var out = '<div id="' + cat + '" style="background-color:#FFFF7E;width:' + gp_maxw + 'px">';
			out += '<a href="//commons.wikimedia.org/wiki/Category:' + cat + '"><b>' + cat + '</b></a><br />';

			var pages = xml.getElementsByTagName( 'page' );
			var before = '00000000000000';
			var after = '99999999999999';
			var before_image = '';
			var after_image = '';
			for ( var i = 0; i < pages.length; i++ ) {
				var page = pages[i];
				var its = page.getElementsByTagName( 'timestamp' )[0].firstChild.nodeValue;
				if ( its == '' ) {
					continue; // No timestamp here
				}
				var image = page.getElementsByTagName( 'title' )[0].firstChild.nodeValue;
				if ( its < ts && its > before ) {
					before = its;
					before_image = image;
				}
				if ( its > ts && its < after ) {
					after = its;
					after_image = image;
				}
			}

			out += '<table border="0" style="width:100%"><tr>';
			out += gp_add_thumbnail( before_image );
			out += gp_add_thumbnail( after_image );
			out += '<td style="color:#BBBBBB;background-color:white;text-align:center"><b>';
			if ( pages.length == 500 ) {
				out += '>500';
			} else {
				out += pages.length;
			}
			out += '</b><br />files in category</td>';
			out += '</tr></table>';

			out += '</div>';
			gp_div.innerHTML += out;
			gp_check_done();
		}
	}
	gp_check_done();
}

function gallerypreview_callback() {
	for ( var i = 0; i < gp_xmlobjects.length; i++ ) {
		if ( gp_xmlobjects[i].readyState == 4 && gp_xmlobjects[i].running == true ) {
			gp_xmlobjects[i].running = false;
			var pn = mw.config.get('wgPageName').split( '_' ).join( ' ' );
			var xml = gp_xmlobjects[i].responseXML;
			var gal = gp_xmlobjects[i].gallery;
			var out = '<div id="' + gal + '" style="background-color:#BCED91;width:' + gp_maxw + 'px">';
			out += '<a href="//commons.wikimedia.org/wiki/' + gal + '"><b>' + gal + '</b></a><br />';

			var pages = xml.getElementsByTagName( 'im' );
			var before_image = '';
			var after_image = '';
			for ( var i = 0; i < pages.length; i++ ) {
				var page = pages[i];
				var image = page.getAttribute( 'title' );
				if ( image > before_image && image < pn ) {
					before_image = image;
				}
				if ( ( after_image == '' || image < after_image ) && image > pn ) {
					after_image = image;
				}
			}

			out += '<table border="0" style="width:100%"><tr>';
			out += gp_add_thumbnail( before_image );
			out += gp_add_thumbnail( after_image );
			out += '<td style="color:#BBBBBB;background-color:white;text-align:center"><b>';
			if ( pages.length == 500 ) {
				out += '>500';
			} else {
				out += pages.length;
			}
			out += '</b><br />files in gallery</td>';
			out += '</tr></table>';

			out += '</div>';
			gp_div.innerHTML += out;
			gp_check_done();
		}
	}
	gp_check_done();
}

// Prepares a new query and adds it to the list
function add_categorypreview_task( category, timestamp ) {
	category = category.split( ':' );
	category.shift();
	category = category.join( ':' );
	if ( timestamp == '' ) {
		return; // No timestamp, no point in looking further
	}

	for ( var i = 0; i < gp_avoid_cats.length; i++ ) {
		var s = gp_avoid_cats[i];
		if ( category.substr( 0, s.length ) == s ) {
			return;
		}
	}

	var url = '//commons.wikimedia.org/w/query.php?what=category&cplimit=500&format=xml&cpextended&cpnamespace=6&cptitle=' + encodeURIComponent( category );
	var i = gp_xmlobjects.length;
	gp_left = gp_left + 1;
	gp_found = true;
	gp_xmlobjects.push( new XMLHttpRequest() );
	gp_xmlobjects[i].gallery = '';
	gp_xmlobjects[i].category = category;
	gp_xmlobjects[i].timestamp = timestamp;
	gp_xmlobjects[i].onreadystatechange = categorypreview_callback;
	gp_xmlobjects[i].running = true;
	gp_xmlobjects[i].open( 'GET', url, true );
	gp_xmlobjects[i].send( null );
}

// Prepares a new query and adds it to the list
function add_gallerypreview_task( gallery ) {
	for ( var i = 0; i < gp_avoid_cats.length; i++ ) {
		var s = gp_avoid_cats[i];
		if ( gallery.substr( 0, s.length ) == s ) {
			return;
		}
	}

	var url = '//commons.wikimedia.org/w/api.php?format=xml&action=query&prop=images&titles=' + encodeURIComponent( gallery );
	var i = gp_xmlobjects.length;
	gp_left = gp_left + 1;
	gp_found2 = true;
	gp_xmlobjects.push( new XMLHttpRequest() );
	gp_xmlobjects[i].gallery = gallery;
	gp_xmlobjects[i].category = '';
	gp_xmlobjects[i].onreadystatechange = gallerypreview_callback;
	gp_xmlobjects[i].running = true;
	gp_xmlobjects[i].open( 'GET', url, true );
	gp_xmlobjects[i].send( null );
}

function handle_category_list() {
	if ( gp_cat_object.readyState == 4 ) {
		var xml = gp_cat_object.responseXML;
		var cps = xml.getElementsByTagName( 'cl' );
		for ( var i = 0; i < cps.length; i++ ) {
			var il = cps[i];
			var ns = il.getAttribute( 'ns' );
			var ts = il.getAttribute( 'timestamp' );
			var cat = il.firstChild.nodeValue;
			if ( ns != null && ns != '14' ) {
				continue; // Not a category. Strange.
			}
			add_categorypreview_task( cat, ts );
		}
		if ( gp_found == false ) {
			gp_status.innerHTML += '<div style="color:CD0000">No non-trivial categories found. <a href="//commons.wikimedia.org/wiki/Categories#Categorizing_your_uploads">Please add some</a>.</div>';
		}
	}
}

function handle_gallery_list() {
	if ( gp_cat_object2.readyState == 4 ) {
		var xml = gp_cat_object2.responseXML;
		var ils = xml.getElementsByTagName( 'il' );
		for ( var i = 0; i < ils.length; i++ ) {
			var il = ils[i];
			var ns = il.getAttribute( 'ns' );
			var gallery = il.firstChild.nodeValue;
			if ( ns != null && ns != '0' ) {
				continue; // Not gallery namespace
			}
			add_gallerypreview_task( gallery );
		}
		if ( gp_found2 == false ) {
			gp_status.innerHTML += '<div style="color:#CD0000">No galleries found.</div>';
		}
	}
}

function gp_get_category_list( page ) {
	gp_cat_object = new XMLHttpRequest();
	var url = '//commons.wikimedia.org/w/query.php?what=categories&clextended&format=xml&titles=' + page;
	gp_cat_object.onreadystatechange = handle_category_list;
	gp_cat_object.open( 'GET', url, true );
	gp_cat_object.send( null );
}

function gp_get_gallery_list( page ) {
	gp_cat_object2 = new XMLHttpRequest();
	var url = '//commons.wikimedia.org/w/query.php?format=xml&what=imagelinks&titles=' + page;
	gp_cat_object2.onreadystatechange = handle_gallery_list;
	gp_cat_object2.open( 'GET', url, true );
	gp_cat_object2.send( null );
}

// Initializes the run of the script and prepares/starts the queries
function run_gallerypreview() {
	gp_head = document.getElementById( 'gp_head' );
	gp_status = document.getElementById( 'gp_status' );
	gp_counter = 0;
	gp_left = 0;
	gp_found = false;
	gp_found2 = false;
	gp_div.style.width = '250px';
	gp_div.style.border = '1px solid #AAAAAA';
	gp_image_xml = new Array();
//	gp_head.innerHTML = '';
	gp_xmlobjects = new Array();
	gp_get_gallery_list( mw.config.get('wgPageName') );
	gp_get_category_list( mw.config.get('wgPageName') );
}

/**
 * DOMComplete - Load Event
 *
 * Author: Diego Perini (diego.perini@gmail.com)
 * Updated: 06/08/2006
 * Version: 0.99.6-mini
 *
 * From http://javascript.nwbox.com/DOMComplete-MINI/DOMComplete-MINI.html
 */
function onDOMComplete( w, f ) {
	var d = w.document, done = false;
	w.$DOMC = f;
	wait();

	if ( ( /WebKit|KHTML|MSIE/i ).test( navigator.userAgent ) ) {
		poll();
	}

	function load( e ) {
		if ( !done ) {
			done = true;
			stop();
			w.$DOMC( e );
		}
	}

	function has( p ) {
		return typeof d[p] != 'undefined';
	}

	function poll() {
		if ( d.body !== null && d.getElementsByTagName ) {
			if ( has( 'fileSize' ) && typeof d.fileSize != 'unknown' ) {
				load( 'fileSize' );
			}
			if ( has( 'readyState' ) && ( /loaded|complete/ ).test( d.readyState ) ) {
				load( 'readyState' );
			}
		}
		if ( !done ) {
			setTimeout( poll, 10 );
		}
	}

	function stop() {
		if ( typeof d.removeEventListener == 'function' ) {
			d.removeEventListener( 'DOMContentLoaded', load, false );
		}
	}

	function wait() {
		if ( typeof d.addEventListener == 'function' ) {
			d.addEventListener( 'DOMContentLoaded', load, false );
		}
		var oldonload = w.onload;
		w.onload = function( e ) {
			if ( typeof oldonload == 'function' ) {
				oldonload();
			}
			load( e || this.event );
		};
	}
}