MediaWiki:Gadget-responsiveimagemap.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

;(function(window, $, mw) {
    if (window.responsiveImageMapLoaded) return;
    window.responsiveImageMapLoaded = true;

    function rwdImageMap($img) {
        $img.each(function() {
            var that = this;
            var $that = $(that);

            // Only proceed if the image has a usemap attribute
            if (typeof($(this).attr('usemap')) === 'undefined') return;

            // Handle WebKit image load issues by using onload
            $('<img />').on('load', function() {
                var attrW = 'width', attrH = 'height';
                var w = $that.attr(attrW), h = $that.attr(attrH);

                // Fallback if width/height attributes are missing
                if (!w || !h) {
                    var temp = new Image();
                    temp.src = $that.attr('src');
                    if (!w) w = temp.width;
                    if (!h) h = temp.height;
                }

                var wPercent = $that.width() / 100,
                    hPercent = $that.height() / 100,
                    map = $that.attr('usemap').replace('#', ''),
                    c = 'coords';

                // Update each area element's coordinates within the map
                $that.siblings('map[name="' + map + '"]').find('area').each(function() {
                    var $this = $(this);
                    if (!$this.data(c))
                        $this.data(c, $this.attr(c));

                    var coords = $this.data(c).split(','),
                        coordsPercent = [];

                    for (var i = 0; i < coords.length; ++i) {
                        // Recalculate each coordinate based on image scaling
                        if (i % 2 === 0)
                            coordsPercent[i] = parseInt(((coords[i] / w) * 100) * wPercent);
                        else
                            coordsPercent[i] = parseInt(((coords[i] / h) * 100) * hPercent);
                    }

                    // Update the area element's coords with recalculated coordinates
                    $this.attr(c, coordsPercent.join(','));
                });
            }).attr('src', $that.attr('src')); // Trigger image load
        });
    }

    // Trigger on page load
    mw.hook('wikipage.content').add(function($e) {
        var $img = $e.find('.responsive-imagemap .noresize:not(.made-responsive)')
            .css({'width': '', 'height': ''})
            .addClass('made-responsive')
            .find('img[usemap]');
        
        rwdImageMap($img);
    });

    // Trigger on window resize
    $(window).resize(function() {
        rwdImageMap($('.responsive-imagemap .made-responsive img[usemap]'));
    });

})(this, jQuery, mediaWiki);