react-image-map-resizer/dist/index.js

This is a simple library that makes HTML Image Maps responsive, so that they automatically stay scaled to the size of the image they are attached to using a React hook and native html img and map elements.

"use strict";var e=require("react");module.exports=function(t){var n=e.useRef(null),r=e.useRef([]),i=e.useRef(100);return e.useEffect((function(){var e=function(){if(n.current){var i=n.current.getElementsByTagName("area"),o=document.querySelector('img[usemap="#'.concat(t,'"]'));if(o&&o.complete){0===r.current.length&&i.length>0&&(r.current=Array.from(i).map((function(e){return e.getAttribute("coords")||""})));var u={width:o.width/o.naturalWidth,height:o.height/o.naturalHeight},a=window.getComputedStyle(o),c={width:parseInt(a.getPropertyValue("padding-left"),10)||0,height:parseInt(a.getPropertyValue("padding-top"),10)||0};Array.from(i).forEach((function(e,t){var n,i=(null===(n=r.current[t])||void 0===n?void 0:n.split(","))||[];if(0!==i.length){var o=i.map((function(e,t){var n=t%2==0?"width":"height";return c[n]+Math.floor(Number(e)*u[n])})).join(",");e.setAttribute("coords",o)}}))}else null==o||o.addEventListener("load",e,{once:!0})}},o=function(){clearTimeout(i.current),i.current=window.setTimeout(e,100)};if("undefined"!=typeof ResizeObserver){var u=document.querySelector('img[usemap="#'.concat(t,'"]'));if(u){var a=new ResizeObserver(o);return a.observe(u),function(){a.disconnect(),window.removeEventListener("resize",o),window.removeEventListener("focus",e),window.removeEventListener("readystatechange",e),document.removeEventListener("fullscreenchange",e)}}}return e(),window.addEventListener("resize",o),window.addEventListener("focus",e),window.addEventListener("readystatechange",e),document.addEventListener("fullscreenchange",e),setTimeout(e,100),function(){clearTimeout(i.current),window.removeEventListener("resize",o),window.removeEventListener("focus",e),window.removeEventListener("readystatechange",e),document.removeEventListener("fullscreenchange",e)}}),[t]),n};
//# sourceMappingURL=index.js.map