v2.0.1 - cleanup/simplify "handleImageLoad" logic

Author: clarketm

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "image-map",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "author": {
     "name": "Travis Clarke",
     "email": "[email protected]",

dist/image-map.es.js

@@ -27,7 +27,7 @@ function _createClass(Constructor, protoProps, staticProps) {
   return Constructor;
 }
 
-var version = "2.0.0";
+var version = "2.0.1";
 
 var RESIZE = "resize";
 var LOAD = "load";
@@ -108,8 +108,6 @@ var ImageMap = /*#__PURE__*/function () {
       return function (e) {
         var w = e.target.width;
         var h = e.target.height;
-        var wPercent = offsetWidth / 100;
-        var hPercent = offsetHeight / 100;
         var mapName = e.target.getAttribute(USEMAP).replace(/^#/, "");
         var areas = document.querySelectorAll(ImageMap.genAreaSelector(mapName));
 
@@ -118,7 +116,8 @@ var ImageMap = /*#__PURE__*/function () {
           var coordsString = area.dataset[COORDS] = area.dataset[COORDS] || area.getAttribute(COORDS);
           var coordsArrayOld = coordsString.split(",");
           var coordsArrayNew = coordsArrayOld.map(function (_, i) {
-            return i % 2 === 0 ? Number(coordsArrayOld[i] / w * 100 * wPercent) : Number(coordsArrayOld[i] / h * 100 * hPercent);
+            // Scale the coordinate from the original width/height to the actual rendered width/height (i.e. offset)
+            return i % 2 === 0 ? Number(coordsArrayOld[i] / w * offsetWidth) : Number(coordsArrayOld[i] / h * offsetHeight);
           });
           area.setAttribute(COORDS, coordsArrayNew.toString());
         };

dist/image-map.jquery.js

@@ -32,7 +32,7 @@
     return Constructor;
   }
 
-  var version = "2.0.0";
+  var version = "2.0.1";
 
   var RESIZE = "resize";
   var LOAD = "load";
@@ -113,8 +113,6 @@
         return function (e) {
           var w = e.target.width;
           var h = e.target.height;
-          var wPercent = offsetWidth / 100;
-          var hPercent = offsetHeight / 100;
           var mapName = e.target.getAttribute(USEMAP).replace(/^#/, "");
           var areas = document.querySelectorAll(ImageMap.genAreaSelector(mapName));
 
@@ -123,7 +121,8 @@
             var coordsString = area.dataset[COORDS] = area.dataset[COORDS] || area.getAttribute(COORDS);
             var coordsArrayOld = coordsString.split(",");
             var coordsArrayNew = coordsArrayOld.map(function (_, i) {
-              return i % 2 === 0 ? Number(coordsArrayOld[i] / w * 100 * wPercent) : Number(coordsArrayOld[i] / h * 100 * hPercent);
+              // Scale the coordinate from the original width/height to the actual rendered width/height (i.e. offset)
+              return i % 2 === 0 ? Number(coordsArrayOld[i] / w * offsetWidth) : Number(coordsArrayOld[i] / h * offsetHeight);
             });
             area.setAttribute(COORDS, coordsArrayNew.toString());
           };

dist/image-map.js

@@ -33,7 +33,7 @@
     return Constructor;
   }
 
-  var version = "2.0.0";
+  var version = "2.0.1";
 
   var RESIZE = "resize";
   var LOAD = "load";
@@ -114,8 +114,6 @@
         return function (e) {
           var w = e.target.width;
           var h = e.target.height;
-          var wPercent = offsetWidth / 100;
-          var hPercent = offsetHeight / 100;
           var mapName = e.target.getAttribute(USEMAP).replace(/^#/, "");
           var areas = document.querySelectorAll(ImageMap.genAreaSelector(mapName));
 
@@ -124,7 +122,8 @@
             var coordsString = area.dataset[COORDS] = area.dataset[COORDS] || area.getAttribute(COORDS);
             var coordsArrayOld = coordsString.split(",");
             var coordsArrayNew = coordsArrayOld.map(function (_, i) {
-              return i % 2 === 0 ? Number(coordsArrayOld[i] / w * 100 * wPercent) : Number(coordsArrayOld[i] / h * 100 * hPercent);
+              // Scale the coordinate from the original width/height to the actual rendered width/height (i.e. offset)
+              return i % 2 === 0 ? Number(coordsArrayOld[i] / w * offsetWidth) : Number(coordsArrayOld[i] / h * offsetHeight);
             });
             area.setAttribute(COORDS, coordsArrayNew.toString());
           };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "image-map",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Response, dynamic image maps",
   "main": "dist/image-map.js",
   "module": "dist/image-map.es.js",

src/image-map.js

@@ -65,8 +65,6 @@ class ImageMap {
     return e => {
       const w = e.target.width;
       const h = e.target.height;
-      const wPercent = offsetWidth / 100;
-      const hPercent = offsetHeight / 100;
       const mapName = e.target.getAttribute(USEMAP).replace(/^#/, "");
 
       const areas = document.querySelectorAll(ImageMap.genAreaSelector(mapName));
@@ -75,9 +73,10 @@ class ImageMap {
 
         const coordsString = (area.dataset[COORDS] = area.dataset[COORDS] || area.getAttribute(COORDS));
         const coordsArrayOld = coordsString.split(",");
-        const coordsArrayNew = coordsArrayOld.map((_, i) =>
-          i % 2 === 0 ? Number((coordsArrayOld[i] / w) * 100 * wPercent) : Number((coordsArrayOld[i] / h) * 100 * hPercent)
-        );
+        const coordsArrayNew = coordsArrayOld.map((_, i) => {
+          // Scale the coordinate from the original width/height to the actual rendered width/height (i.e. offset)
+          return i % 2 === 0 ? Number((coordsArrayOld[i] / w) * offsetWidth) : Number((coordsArrayOld[i] / h) * offsetHeight);
+        });
         area.setAttribute(COORDS, coordsArrayNew.toString());
       }
     };