// 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>