MediaWiki:Gadget-ImageMaps.js

/* Makes image maps responsive by making the areas resize along with the backing image */ /* Adapted from https://github.com/davidjbradshaw/image-map-resizer */ /* The jQuery plugin used to work directly but it longer does since we transitioned to Fandom's file CDN */

$(document).ready(function{	$('.responsive-imagemap map').each(function { var map = this; var scaleImageMap = imageMapScaler(map); scaleImageMap; window.addEventListener('resize', debounce(250, scaleImageMap), false); window.addEventListener('focus', scaleImageMap, false); //Cope with window being resized whilst on another tab }); });

function debounce(wait, fn) { var timer = null; return function { clearTimeout(timer); timer = setTimeout(fn, wait); }; }

function imageMapScaler(map) { var img = map.nextElementSibling; var areas = map.getElementsByTagName('area'); var originalCoords = Array.prototype.map.call(areas, function(area) { return Array.from(area.coords) }); return function scaleImageMap { var scalingFactor = { width: img.width / Number(img.attributes['width'].value), height: img.height / Number(img.attributes['height'].value) };		if (scalingFactor.width === 1 && scalingFactor.height === 1) { return map; }		for (i = 0; i < areas.length; i++) { areas[i].coords = originalCoords .split(',') .map(scaleCoord) .join(','); }		function scaleCoord(coord, idx) { var dimension = idx % 2 === 0 ? 'width' : 'height'; // Even-index coords are always width coords, odd ones are always height return Math.floor(Number(coord) * scalingFactor[dimension]); }	}; }