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 () {
    'use strict';

    function resizeImageMap(container) {
        const img = container.querySelector('img');
        const map = container.querySelector('map');
        if (!img || !map) return;

        const originalWidth = parseInt(img.dataset.fileWidth, 10);
        const originalHeight = parseInt(img.dataset.fileHeight, 10);

        const currentWidth = img.clientWidth;
        const currentHeight = img.clientHeight;

        const scaleX = currentWidth / originalWidth;
        const scaleY = currentHeight / originalHeight;

        map.querySelectorAll('area').forEach(area => {
            const originalCoords = area.dataset.originalCoords;
            if (!originalCoords) return;

            const coords = originalCoords.split(',').map(Number);
            const newCoords = coords.map((value, index) =>
                index % 2 === 0
                    ? Math.round(value * scaleX)
                    : Math.round(value * scaleY)
            );
            area.coords = newCoords.join(',');
        });
    }

    function initResponsiveImageMaps() {
        document.querySelectorAll('.responsive-imagemap').forEach(container => {
            const map = container.querySelector('map');
            if (!map) return;

            map.querySelectorAll('area').forEach(area => {
                if (!area.dataset.originalCoords) {
                    area.dataset.originalCoords = area.coords;
                }
            });

            const img = container.querySelector('img');
            if (!img) return;

            // Resize on load and on resize
            img.addEventListener('load', () => resizeImageMap(container));
            window.addEventListener('resize', () => resizeImageMap(container));

            // Initial resize
            resizeImageMap(container);
        });
    }

    // Wait for DOM and images to be ready
    if (document.readyState === 'complete') {
        initResponsiveImageMaps();
    } else {
        window.addEventListener('load', initResponsiveImageMaps);
    }
})();