User:IlyaHaykinson/ImageBoxes.js

//<pre><nowiki>

var image_annotation_api_url = wgScriptPath + "/api.php?" ;
var image_annotation_query_url = wgScriptPath + "/query.php?" ;
var image_annotation_span_ids = Array () ;
var image_annotation_div_ids = Array();
var activeDiv = null;

if ( wgNamespaceNumber == 6 && wgAction == "view" ) {
  addOnloadHook ( init_image_annotation ) ;
}

function init_image_annotation() {
  // Get list of span ids that start with "boxid_"
  var spans = document.getElementsByTagName("span") ;
  var ids = Array () ;
  for ( var i = 0 ; i < spans.length ; i++ ) {
    var id = spans[i].id ;
    if ( id.substr ( 0 , 6 ) != "boxid_" ) continue ;
    ids.push ( id ) ;
  }
  image_annotation_span_ids = ids ;
  image_annotation_show_boxes () ;
}

function showBoxes() {
  var ids = image_annotation_div_ids ;
  for ( var i = 0 ; i < ids.length ; i++ ) {
    var box = document.getElementById ( ids[i] ) ;
//    setOpacity ( box , 4 ) ;
    box.style.display='block';
  }
}

function hideBoxes() {
  if (null != activeDiv)
    return;

  var ids = image_annotation_div_ids ;
  for ( var i = 0 ; i < ids.length ; i++ ) {
    var box = document.getElementById ( ids[i] ) ;
//    setOpacity ( box , 0 ) ;
    box.style.display='none';
  }
}

function image_annotation_get_thumbnail_element () {
  var file = document.getElementById ( "file" ) ;
  var img = file.getElementsByTagName ( "img" ) [0] ;
  return img ;
}

function image_annotation_show_boxes () {
  var file = document.getElementById ( "file" ) ;
  var linkinfile = file.getElementsByTagName ( "a" ) [0] ;
  var bc = document.getElementById ( "bodyContent" ) ;
  var ids = image_annotation_span_ids ;
  var img = image_annotation_get_thumbnail_element () ;

  img.onmouseover=showBoxes;
  img.onmouseout=hideBoxes;

  var thumbWidth = img.width ;
  var thumbHeight = img.height ;

  // Find image size in text
  var imageWidth = 0 , imageHeight = 0 ;
  for ( var i = 0 ; i < file.childNodes.length ; i++ ) {
    var j = file.childNodes[i].nodeValue ;
    if ( !j ) continue ;
    j = j.split("(",2).pop() ;
    j = j.split(" × ",2) ;
    imageWidth = parseInt ( j.shift() ) ;
    imageHeight = j.pop().split(" ",2).shift() ;
  }

  // Sanity check
  if ( thumbWidth <= 0 || thumbHeight <= 0 || imageWidth <= 0 || imageHeight <= 0 ) return ;

  for ( var i = 0 ; i < ids.length ; i++ ) {
    var b = document.getElementById ( ids[i] ) ;
    var text = b.innerHTML ;
    text = text.split ( "|" , 2 ) ;
    var coords = text.shift().split(",") ;
    var title = text.pop() ;

    var left = parseInt ( coords[0] ) * thumbWidth / imageWidth - 1 ;
    var top = parseInt ( coords[1] ) * thumbHeight / imageWidth - 1 ;
    var width = parseInt ( coords[2] ) * thumbWidth / imageWidth - 1 ;
    var height = parseInt ( coords[3] ) * thumbHeight / imageWidth - 1 ;

    left = left + parseInt ( file.offsetLeft ) ;
    top = top + parseInt ( file.offsetTop ) ;

    var id = "image_box_" + i ;
    var newdiv = document.createElement ( "div" ) ;
    newdiv.innerHTML = title ;
    newdiv.id = id ;
    newdiv.style.position = "absolute" ;
    newdiv.style.left = Math.floor ( left ) + "px" ;
    newdiv.style.top = Math.floor ( top ) + "px" ;
    newdiv.style.width = Math.floor ( width ) + "px" ;
    newdiv.style.height = Math.floor ( height ) + "px" ;
    newdiv.style.zIndex = "10" ;
    newdiv.style.textAlign = "center" ;
    newdiv.style.verticalAlign = "middle" ;
    newdiv.style.border = "2px solid blue" ;
    newdiv.style.backgroundColor = "white" ;
    setOpacity ( newdiv , 4 ) ;
    newdiv.style.display='none';
    file.insertBefore ( newdiv , linkinfile ) ;
    document.getElementById(id).onclick = function () { image_annotation_load_wiki_page("Category:"+escape(this.innerHTML)) ; } ;
    document.getElementById(id).onmouseover = function() { activeDiv = this; } ;
    document.getElementById(id).onmouseout = function() { activeDiv = null; } ;
    image_annotation_div_ids.push(id);
  }
}

function image_annotation_load_wiki_page ( title ) {
  var url = mw.config.get('wgServer') + mw.config.get('wgArticlePath').split("$1").join(title) ;
  window.location = url ;
}

function setOpacity(obj,value) {
  obj.style.opacity = value/10;
  obj.style.filter = 'alpha(opacity=' + value*10 + ')';
}

//</nowiki></pre>