MediaWiki:ImageMapHighlighter.js

$(document).ready(function() {

    function start() {

        var areaOpacity = "0.1";
        //In this part it receives the original Image and the given areas for the ImageMap.
        var img = $("img[usemap^='#ImageMap_']")[0];
        var areas = $("map[name^='ImageMap_']").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;
        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.
        img.parentNode.insertBefore(img2, img);

        //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;
        $(canv).insertAfter("map[name^='ImageMap_']");
        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 mhs = document.getElementsByClassName("imageMapHighlighter");
    if (mhs.length > 0) {
        start();
    }

});