User:Splarka/galleryimagelist.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

/* Load image thumbnails on Special:ImageList, version [0.0.2c]
Originally from: http://en.wikipedia.org/wiki/User:Splarka/galleryimagelist.js

Notes:
* Uses the API to generate thumbnails of all images listed.
* Shows them under the matching title (batched means they get disarranged, so matching may not be perfect).
* If they are smaller than the chosen width, they get shown at their natural size.
* Maximum height defined as 1.5x maximum width, to prevent large vertical images.
* Currently limited to 50 thumbnails per page.

Todo:
* Test crude title matching.
* Use href of image instead of getText() (have to match against server and image namespace translations)?
** DON'T USE TITLE, subject to change.
* Queue up queries for pages with more than 50, dammit.
*/

var galleryImageListWidth = 100;
if(wgCanonicalSpecialPageName && (wgCanonicalSpecialPageName.toLowerCase() == 'imagelist' || wgCanonicalSpecialPageName.toLowerCase() == 'filelist' || wgCanonicalSpecialPageName.toLowerCase() == 'listfiles')) addOnloadHook(function() {
  mw.util.addPortletLink('p-cactions','javascript:galleryImageList()','show thumbnails','ca-galil');
})

function galleryImageList() {
  appendCSS('#ca-galil a {visibility:hidden;}');
  var table = getElementsByClassName(document,'table','TablePager')[0];
  var ti = getElementsByClassName(table,'td','TablePager_col_img_name');
  var imgs = [];
  for(var i=0;i<ti.length;i++) {
    var imgname = getText(ti[i].getElementsByTagName('a')[0]).replace(/_/ig,' ');
    imgs.push('Image:' + encodeURIComponent(imgname));
  }
  var width = window.galleryImageListWidthOverride || window.galleryImageListWidth
  var url = mw.config.get('wgServer') + mw.config.get('wgScriptPath') + '/api.php?maxage=300&smaxage=300&format=json&callback=galleryImageListCB&action=query&prop=imageinfo&iiprop=url&iiurlwidth=' + width + '&iiurlheight=' + parseInt(width * 1.5) + '&titles=' + imgs.join('|')
  mw.loader.load(url);
}

function galleryImageListCB(obj) {
  if(!obj['query'] || !obj['query']['pages']) return
  var table = getElementsByClassName(document,'table','TablePager')[0];
  var ti = getElementsByClassName(table,'td','TablePager_col_img_name');
  var thumbs = obj['query']['pages'];
  for(var i in thumbs) {
    var title = thumbs[i]['title'];
    for(var j=0;j<ti.length;j++) {
      var imgtitle = getText(ti[j].getElementsByTagName('a')[0]).replace(/_/ig,' ');
      if(title.indexOf(imgtitle) != -1) {
        var img = document.createElement('img');
        img.style.width = thumbs[i]['imageinfo'][0]['thumbwidth'] + 'px'; 
        img.style.height = thumbs[i]['imageinfo'][0]['thumbheight'] + 'px';
        img.style.border = '1px solid #999999';
        img.style.background = 'url("/media/wikipedia/commons/5/5d/Checker-16x16.png") repeat';
        img.setAttribute('title',title);
        img.setAttribute('src',thumbs[i]['imageinfo'][0]['thumburl'])
        ti[j].appendChild(document.createElement('br'));
        ti[j].appendChild(img);
        continue;
      }
    }
  }
}

function getText(obj) {
  if(obj.nodeType == 3) return obj.nodeValue;
  var txt = [];
  var i = 0;
  while(obj.childNodes[i]) {
    txt[txt.length] = getText(obj.childNodes[i]);
    i++;
  }
  return txt.join('');
}