MediaWiki:ImageMapHighlighter.js

$(document).ready(function() { 
 
  
  
  
  
  function start(){

  var areaOpacity = "0.1";
  //In this part it receives the original Image, which has a <div>-tag with the "imageMapHighlighter" class.
  //When the placement parameter (center, left or right) is set, the <div>-tag number changes, so it has to go deeper to get the image.
  var mhs = document.getElementsByClassName("imageMapHighlighter");
  
  if (document.getElementsByClassName('center').length > 0) {
  var img = mhs[0].children[0].children[0].children[0].children[1];
  var areas = mhs[0].children[0].children[0].children[0].children[0].children;}
  else if(document.getElementsByClassName('floatleft').length > 0 || document.getElementsByClassName('floatright').length > 0 ){
  var img = mhs[0].children[0].children[0].children[1];
  var areas = mhs[0].children[0].children[0].children[0].children;}
  else{
  var img = mhs[0].children[0].children[1];
  var areas = mhs[0].children[0].children[0].children;}

  var canv = document.createElement('canvas');	//A canvas gets created, where it will draw the areas.
  
  //The original Image gets set to very low opacity, so its still there and the user can click on the original created areas.
  img.setAttribute("style","opacity:0.01; -moz-opacity:0.5; filter:alpha(opacity=50)");
  var img2 = new Image();  
  img2.style = img.style;
  img2.width = img.width;
  img2.height = img.height;
  img2.src = img.src;
  if (document.getElementsByClassName('center').length > 0) {
       mhs[0].children[0].children[0].children[0].insertBefore(img2, img);}
  else if(document.getElementsByClassName('floatleft').length > 0 || document.getElementsByClassName('floatright').length > 0 ){
  mhs[0].children[0].children[0].insertBefore(img2, img)}
  else{mhs[0].children[0].insertBefore(img2, img);}
  img2.style = "position: absolute; opacity: 1";
  img2.style.zIndex = "-20";  //After a copy of the original Image is created, it gets set beneath the original image.
  
  //The canvas is given the width and height of the original image.
  //It is then placed between the copy and the original image.
  canv.id = 'mainCanvas';
  canv.width = img.width;
  canv.height = img.height;
  canv.style.position = "absolute";
  canv.style.opacity = areaOpacity;
  if (document.getElementsByClassName('center').length > 0) {
       mhs[0].children[0].children[0].children[0].insertBefore(canv, img2);}
  else if(document.getElementsByClassName('floatleft').length > 0 || document.getElementsByClassName('floatright').length > 0 ){
  mhs[0].children[0].children[0].insertBefore(canv, img2);}
  else{mhs[0].children[0].insertBefore(canv, img2);}
  var ctx = canv.getContext("2d");
  
    
  //The three draw functions can take the paramenters "coords" and "color".
  //With these parameters they draw the areas on the canvas.
  function drawSingleCircle(coords,color){
    
    var x1 = coords[0];
    var y1 = coords[1];
    var r = coords[2];
   	ctx.save();
    ctx.beginPath();
    ctx.arc(x1,y1,r,0,Math.PI*2);  
		ctx.fillStyle = color
    ctx.closePath();
		ctx.stroke();
		ctx.fill();
    ctx.restore();
  };
  
  function drawSingleRect(coords,color){
    
    var x1 = coords[0];
    var y1 = coords[1];
    var x2 = coords[2];
    var y2 = coords[3];
    var w = parseInt(x2) - parseInt(x1); 
    var h = parseInt(y2) - parseInt(y1);
    ctx.save();
		ctx.fillStyle = color
		ctx.fillRect(x1,y1,w,h);
    ctx.restore();
  };
  
  
  function drawSinglePolygon(coords, color){
     
    	ctx.save();
      ctx.beginPath();
    	ctx.moveTo(coords.shift(), coords.shift());

			while (coords.length){

        ctx.lineTo(coords.shift(), coords.shift());

      }

      ctx.closePath();
			ctx.stroke();
      ctx.fillStyle = color;
			ctx.fill();
    	ctx.closePath(); 
    	ctx.restore();
  }
  
    
  //The mouseover events can take the areas from the ImageMap.
  //Whenever the cursor is over one of the given areas, it is drawn in red.
  function rectMouseOverEvent(area){

    var coords = area.coords; 
    coords = coords.split(",");
    drawSingleRect(coords,"red");
  }
  
  function circleMouseOverEvent(area){

    var coords = area.coords; 
    coords = coords.split(",");
    drawSingleCircle(coords,"red");
  }
  
  function polyMouseOverEvent(area){

    var coords = area.coords; 
    coords = coords.split(",");
    drawSinglePolygon(coords,"red");

  }
  
  //After the cursor has left the area, it will be drawn in blue again.
  function mouseOutEvent(area){
    drawAll();
  }
  
    
  //At the start, the function drawArea gets called by function drawAll and it draws all given areas from the ImageMap in blue.
 function drawArea(area){
   
   var coords = area.coords; 
   coords = coords.split(",");
   
   if(area.shape == "rect"){
     drawSingleRect(coords,"blue");
   }
   else if(area.shape == "circle"){
     drawSingleCircle(coords,"blue"); 
   }
   else if(area.shape == "poly"){
     drawSinglePolygon(coords,"blue"); 
   }
   
 }
  
  //The function addEventsToAreas adds the mouseover and mouseout functions to the areas.
  function addEventsToAreas(){
    //var area = 0;
    for(var i=0; i<areas.length; i++){
    	var area = areas[i];
      area.addEventListener('mouseout', function(){mouseOutEvent(this)});
      if(area.shape=="rect"){
        area.addEventListener('mouseover', function(){rectMouseOverEvent(this)});
      }
    }
    
    for(var i=0; i<areas.length; i++){
    	var area2 = areas[i];
      if(area2.shape=="poly"){
        area2.addEventListener('mouseover', function(){polyMouseOverEvent(this);});
      }
    }
    
        for(var i=0; i<areas.length; i++){
    	var area3 = areas[i];
      if(area3.shape=="circle"){
        area3.addEventListener('mouseover', function(){circleMouseOverEvent(this);});
      }
    }
    
    
  }
  
  //The drawAll function runs through all given areas and draws them on the canvas.
	function drawAll(){
    
    ctx.clearRect(0, 0, canv.width, canv.height);
    for(var i=0; i<areas.length; i++){
    	var area = areas[i];
      drawArea(area); 
    }
  }
  
	function init(){
    drawAll();
    addEventsToAreas();
  }
 
  mw.loader.using( ['mediawiki.util'] ).done( init );};
  var mhs2 = document.getElementsByClassName("imageMapHighlighter");

  if(mhs2.length > 0){
   start(); 
  }
  
});