User:Dschwen/ImageBoxes.js

// Fork from [http://commons.wikimedia.org/w/index.php?title=MediaWiki:ImageBoxes.js&oldid=6398381 MediaWiki:ImageBoxes.js]
//<pre><nowiki>

var image_annotation = {

 span_ids : Array () ,
 visible : false ,
 image_width  : 0 ,
 image_height : 0 ,
 thumb_width  : 0 ,
 thumb_height : 0 ,
 //is_IE = document.all?true:false
 mouse_x : 0 ,
 mouse_y : 0 ,
 firstclick_x : 0 ,
 firstclick_y : 0 ,
 state : "" ,
 iframe : null,

 init_view : function() 
 {
  // 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 () ;
 },

 init_edit : function() 
 {
  image_annotation.parse_edit_box();
  image_annotation.insert_toolbar_button();
 },

 parse_edit_box : function()
 {
 },

 test_event : function()
 {
  alert("works!");
 },

 insert_iframe : function()
 {
  var bc = document.getElementById( "bodyContent" );
  var width = bc.offsetWidth;

  image_annotation.iframe = document.createElement( 'IFRAME' );
  image_annotation.iframe.width = width;
  image_annotation.iframe.height = 500;
  image_annotation.iframe.frameBorder = 0;

  bc.insertBefore( image_annotation.iframe, document.getElementById( 'wikiPreview' ) );

  var idoc;
  if( image_annotation.iframe.contentDocument ) 
   idoc = image_annotation.iframe.contentDocument;
  else
   idoc = image_annotation.iframe.contentWindow.document;

  if( !( is_khtml || is_safari ) ) 
  {
   idoc.open();
   idoc.close();
  }

  var ibody = idoc.getElementsByTagName( 'BODY' )[0];
  if( !ibody )
  {
   ibody = idoc.createElement( 'BODY' );
   idoc.getElementsByTagName( 'HTML' )[0].appendChild( ibody );
  }
  ibody.style.margin = '0px';
  ibody.style.padding = '0px';

  var fullsize = idoc.createElement( 'IMG' );
  fullsize.src = '/wiki/Special:Filepath/' + encodeURIComponent( wgTitle );

  fullsize.style.margin = '0px';
  fullsize.style.padding = '0px';
  fullsize.style.border = 'none';

  ibody.appendChild( fullsize );

  addEvent( fullsize, 'click', image_annotation.test_event ) ;
 },
 
 insert_toolbar_button : function()
 {
  var parent = document.getElementById( 'toolbar' );
  if( ! parent ) return;

  var image = document.createElement("img");
  image.width = 23;
  image.height = 22;
  image.className = "mw-toolbar-editbutton";
  image.src = 'http://upload.wikimedia.org/wikipedia/commons/8/8d/Button_image_annotation.png';
  image.border = 0;
  image.alt = 'Annotate';
  image.title = 'Annotate';
  image.style.cursor = "pointer";
  image.onclick = function() { image_annotation.insert_iframe(); return false; };
  parent.appendChild(image);
 },

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

 load_wiki_page : function( e ) 
 {
  var url = mw.config.get('wgServer') + mw.config.get('wgArticlePath').split("$1").join( "Category:" + escape(this.innerHTML) ) ;
  window.location = url ;
 },

 mouse_enter : function( e ) 
 {
  this.style.backgroundColor = "transparent" ;
  image_annotation.set_opacity ( this , 10 ) ;
 },

 mouse_leave : function( e ) 
 {
  image_annotation.set_opacity ( this , 4 ) ;
  this.style.backgroundColor = "white" ;
 },

 show_hide : function() 
 {
  var n = getElementsByClassName ( document , "div" , "image_box_class" ) ;
  for ( var i = 0 ; i < n.length ; i++ ) {
    image_annotation.visible = !( n[i].style.display == "none" ) ;
    n[i].style.display = ( n[i].style.display == "none" ) ? "block" : "none" ;
  }
 },

 set_opacity : function( obj, value ) 
 {
  obj.style.opacity = value/10;
  //if( obj.style.KhtmlOpacity ) 
obj.style.KhtmlOpacity = value/10 ;
//  obj.style.setProperty('KhtmlOpacity', '0.9' );
  obj.style.filter = 'alpha(opacity=' + value*10 + ')';
 },

 capture_move : function( e ) 
 {
  if ( /*image_annotation_is_IE*/ 0 ) { // grab the x-y pos.s if browser is IE
    image_annotation_mouse_x = event.clientX + document.body.scrollLeft
    image_annotation_mouse_y = event.clientY + document.body.scrollTop
  } else {  // grab the x-y pos.s if browser is NS
    image_annotation_mouse_x = e.pageX
    image_annotation_mouse_y = e.pageY
  }  
  // catch possible negative values in NS4
  if (image_annotation.mouse_x < 0){image_annotation.mouse_x = 0}
  if (image_annotation.mouse_y < 0){image_annotation.mouse_y = 0}  

  var content = document.getElementById ( "content" ) ;
  image_annotation.mouse_x -= image_offset_left + parseInt ( content.offsetLeft ) ;
  image_annotation.mouse_y -= image_offset_top + parseInt ( content.offsetTop ) ;

  return true ;
 },

 capture_click : function() 
 {
  if ( image_annotation_state == "add1" ) {
    var controls2 = document.getElementById ( "image_annotation_controls2" ) ;
    var fc = controls2.firstChild ;
    controls2.insertBefore ( document.createTextNode ( "2. Click on the lower right corner of the new box, or " ) , fc ) ;
    controls2.removeChild ( fc ) ;
    image_annotation.firstclick_x = image_annotation.mouse_x ;
    image_annotation.firstclick_y = image_annotation.mouse_y ;
    image_annotation.state = "add2" ;
  } else if ( image_annotation.state == "add2" ) {

    var name = prompt ( "Category to link this box to (without \"Category:\"; leave blank to cancel)" , "" ) ;
    if ( name == "" ) {
      image_annotation.add_box_cancel () ; // Back to normal
      return ;
    }

    var x = Math.floor ( image_annotation_firstclick_x * image_annotation_image_width / image_annotation_thumb_width ) ;
    var y = Math.floor ( image_annotation_firstclick_y * image_annotation_image_width / image_annotation_thumb_width ) ;
    var w = Math.floor ( image_annotation_mouse_x * image_annotation_image_width / image_annotation_thumb_width - x ) ;
    var h = Math.floor ( image_annotation_mouse_y * image_annotation_image_width / image_annotation_thumb_width - y ) ;
    var desc = "{{Imagebox|" + x + "|" + y + "|" + w + "|" + h + "|" + name + "}}" ;
    prompt ( "Copy the following wikitext and paste it into the image description:" , desc ) ;
    image_annotation_add_box_cancel () ; // Back to normal
  }
 },

 add_box_cancel : function () 
 {
  //if (!image_annotation_is_IE) document.captureEvents(null) ;
  document.onmousemove = null ;
  image_annotation.state = "" ;

  var controls = document.getElementById ( "image_annotation.controls" ) ;
  var controls2 = document.getElementById ( "image_annotation.controls2" ) ;
  var clickfetcher = document.getElementById ( "image_annotation.clickfetcher" ) ;
  controls2.parentNode.removeChild ( controls2 ) ;
  clickfetcher.parentNode.removeChild ( clickfetcher ) ;
  controls.style.display = "block" ;
  image_annotation.show_hide () ; // Show boxes
 },
 
 add_box : function() {
  if ( image_annotation.visible ) image_annotation.show_hide () ; // Hide boxes, if any

  var file = document.getElementById ( "file" ) ;
  var linkinfile = file.getElementsByTagName ( "a" ) [0] ;

  //if (!image_annotation_is_IE) document.captureEvents(Event.MOUSEMOVE) ;
  document.onmousemove = image_annotation.capture_move;
  image_annotation_state = "add1" ;

  var newdiv = document.createElement ( "div" ) ;
  newdiv.id = "image_annotation_clickfetcher" ;
  newdiv.style.zIndex = "10" ;
  newdiv.style.position = "absolute" ;
  newdiv.style.left = parseInt ( image_offset_left - 1 ) + "px" ;
  newdiv.style.top = parseInt ( image_offset_top - 1 ) + "px" ;
  newdiv.style.width = parseInt ( image_annotation.thumb_width - 1 ) + "px" ;
  newdiv.style.height = parseInt ( image_annotation.thumb_height - 1 ) + "px" ;
  newdiv.style.border = "2px solid green" ;
  file.insertBefore ( newdiv , linkinfile ) ;
  newdiv.onclick = function () { image_annotation.capture_click(); } ;
//  if ( image_annotation_is_IE ) image_annotation.set_opacity( newdiv , 1 ) ;


  var controls = document.getElementById ( "image_annotation_controls" ) ;
  var controls2 = document.createElement ( "div" ) ;
  controls2.id = "image_annotation_controls2" ;

  var text = document.createTextNode ( "1. Click on the upper left corner of the new box, or " ) ;
  var link = document.createElement ( "a" ) ;
  link.href = "#" ;
  controls2.appendChild ( text ) ;
  controls2.appendChild ( link ) ;
  file.insertBefore ( controls2 , controls ) ;
  addEvent( link, 'click', image_annotation.add_box_cancel ) ;
  link.innerHTML = "cancel" ;
  controls.style.display = "none" ;
 },








 show_boxes : function() 
 {
  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 () ;

  image_annotation.thumb_width = img.width ;
  image_annotation.thumb_height = img.height ;

  // Find image size in text
  image_annotation.image_width = 0 ;
  image_annotation.image_height = 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) ;
    image_annotation.image_width = parseInt ( j.shift() ) ;
    image_annotation.image_height = j.pop().split(" ",2).shift() ;
  }

  // Sanity check
  if ( image_annotation.thumb_width <= 0 || image_annotation.thumb_height <= 0 || 
       image_annotation.image_width <= 0 || image_annotation.image_height <= 0 ) return ;

  // Add control elements
  var showhide ;
  var addboxes ;
  var controls = document.createElement ( "div" ) ;
  controls.id = "image_annotation_controls" ;

  if ( ids.length > 0 ) {
    showhide = document.createElement ( "a" ) ;
    showhide.href = "#" ;
    controls.appendChild ( showhide ) ;
    controls.appendChild ( document.createTextNode ( " | " ) ) ;
  }

  addboxes = document.createElement ( "a" ) ;
  addboxes.id = "image_annotation_add_link" ;
  addboxes.href = "#" ;
  controls.appendChild ( addboxes ) ;

  file.insertBefore ( controls , linkinfile.nextSibling ) ;
  if ( ids.length > 0 ) {
    showhide.innerHTML = "Show/hide boxes" ;
    addEvent( showhide, 'click', image_annotation.show_hide ) ;
  }

  addboxes.innerHTML = "Add a box" ;
  addEvent( addboxes, 'click', image_annotation.add_box ) ;

  image_offset_left = parseInt ( file.offsetLeft ) ;
  image_offset_top = parseInt ( file.offsetTop ) ;

  // Add all boxes
  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] ) * image_annotation.thumb_width / image_annotation.image_width - 1 ;
    var top = parseInt ( coords[1] ) * image_annotation.thumb_height / image_annotation.image_width - 1 ;
    var width = parseInt ( coords[2] ) * image_annotation.thumb_width / image_annotation.image_width - 1 ;
    var height = parseInt ( coords[3] ) * image_annotation.thumb_height / image_annotation.image_width - 1 ;

    left = left + image_offset_left ;
    top = top + image_offset_top ;

    var id = "image_box_" + i ;
    var newdiv = document.createElement ( "div" ) ;
    newdiv.innerHTML = title ;
    newdiv.id = id ;
    newdiv.className = "image_box_class" ;
    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.cursor = "pointer" ;
    newdiv.style.verticalAlign = "middle" ;
    newdiv.style.border = "2px solid red" ;
    newdiv.style.backgroundColor = "white" ;
    image_annotation.set_opacity( newdiv , 4 ) ;
    file.insertBefore ( newdiv , linkinfile ) ;
    addEvent( newdiv, 'click', image_annotation.load_wiki_page ) ;
    addEvent( newdiv, 'mouseover', image_annotation.mouse_enter ) ;
    addEvent( newdiv, 'mouseout', image_annotation.mouse_leave ) ;
  }
 }

}

if ( wgNamespaceNumber == 6 && wgAction == "view" ) 
 addOnloadHook ( image_annotation.init_view ) ;

if ( wgNamespaceNumber == 6 && wgAction == "edit" ) 
 addOnloadHook ( image_annotation.init_edit ) ;

//</nowiki></pre>