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);
		};
	}
}