resize-image-map - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

build/resize-image.js

@@ -1,1 +0,1 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:!0});function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError('Cannot call a class as a function')}var ImageResize=function a(b){_classCallCheck(this,a),_initialiseProps.call(this);var c=b.width,d=b.height,f=b.element;this.imageW=c,this.imageH=d,this.imageMap=document.querySelector(f);var g=this.imageMap.getAttribute('usemap'),h=document.querySelector('map[name="'+g.substring(1,g.length)+'"]').children;this.areaArray=Array.from(h),window.addEventListener('resize',this.resizeEvent),setTimeout(this.imgMap,500)},_initialiseProps=function(){var a=this;this.getCoords=function(b){var c=b.dataset.coords;return c||(c=b.getAttribute('coords'),b.dataset.coords=c),c},this.imgMap=function(){a.wPercent=a.imageMap.offsetWidth/100,a.hPercent=a.imageMap.offsetHeight/100,a.areaArray.forEach(a.areaLoop)},this.areaLoop=function(b){var c=a.getCoords(b).split(','),d=c.map(a.mapCoords).join();b.setAttribute('coords',d)},this.mapCoords=function(b,c){return 0==c%2?parseInt(100*(b/a.imageW)*a.wPercent,10):parseInt(100*(b/a.imageH)*a.hPercent,10)},this.resizeEvent=function(){a.imgMap()}};exports.default=ImageResize;
+'use strict';Object.defineProperty(exports,'__esModule',{value:!0});function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError('Cannot call a class as a function')}var ImageResize=function a(b){_classCallCheck(this,a),_initialiseProps.call(this);var c=b.width,d=b.height,f=b.element;this.imageW=c,this.imageH=d,this.imageMap=document.querySelector(f);var g=this.imageMap.getAttribute('usemap'),h='map[name="'+g.substring(1,g.length)+'"]',i=document.querySelector(h).children;this.areaArray=Array.from(i),window.addEventListener('resize',this.resizeEvent),setTimeout(this.imgMap,500)},_initialiseProps=function(){var a=this;this.getCoords=function(b){var c=b.dataset.coords;return c||(c=b.getAttribute('coords'),b.dataset.coords=c),c},this.imgMap=function(){a.wPercent=a.imageMap.offsetWidth/100,a.hPercent=a.imageMap.offsetHeight/100,a.areaArray.forEach(a.areaLoop)},this.areaLoop=function(b){var c=a.getCoords(b).split(','),d=c.map(a.mapCoords).join();b.setAttribute('coords',d)},this.mapCoords=function(b,c){var d=parseInt(b,10);return 0==c%2?a.coordMath(d,a.imageW,a.wPercent):a.coordMath(d,a.imageH,a.hPercent)},this.coordMath=function(b,c,d){return 100*(b/c)*d},this.resizeEvent=function(){a.imgMap()}};exports.default=ImageResize;

image-resize.js

@@ -0,10 +1,23 @@
+/**
+ * Example config
+ * {
+    width: 1024, Natural width
+    height: 768, Natural height
+    element : '#power-puff__map' Selector
+   }
+ */
 export default class ImageResize {
+  /**
+   * constructor - make image maps responsive
+   * @param {Object} config - setting for responsive image map
+   */
   constructor(config) {
     const {width, height, element} = config
 
-    this.imageW = width;
+    this.imageW = width
     this.imageH = height
     this.imageMap = document.querySelector(element)
     const mapId = this.imageMap.getAttribute('usemap')
-    const area = document.querySelector(`map[name="${mapId.substring(1, mapId.length)}"]`).children
+    const mapElem = `map[name="${mapId.substring(1, mapId.length)}"]`
+    const area = document.querySelector(mapElem).children
     this.areaArray = Array.from(area)
@@ -15,2 +28,7 @@
   }
+  /**
+   * getCoords - get image map coordinates
+   * @param  {Node} elem - area tag
+   * @return {String} - area map coordinates
+   */
   getCoords = (elem) => {
@@ -33,2 +51,6 @@ let areaCords = elem.dataset.coords
   }
+  /**
+   * areaLoop - Loop through area tags for image map
+   * @param  {Node} area - Area tag
+   */
   areaLoop = (area) => {
@@ -40,7 +62,27 @@ const coords = this.getCoords(area).split(",")
   }
+  /**
+   * mapCoords - Set new image map coordinates based on new image width and height
+   * @param  {Num} coord - coordinates from image map array
+   * @param  {Num} index - Loop index
+   * @return {Num} - New image map coordinates
+   */
   mapCoords = (coord, index) => {
+    const parseCoord = parseInt(coord, 10)
+
     return (index % 2) === 0
-      ? parseInt(((coord / this.imageW) * 100) * this.wPercent, 10)
-      : parseInt(((coord / this.imageH) * 100) * this.hPercent, 10)
+      ? this.coordMath(parseCoord, this.imageW, this.wPercent)
+      : this.coordMath(parseCoord, this.imageH,  this.hPercent)
   }
+  /**
+   * coordMath Set new coordinates from orginal image map coordinates
+   * @param  {Num} coord - Orginal image map coordinat
+   * @param  {Num} imgVal - Image width or height value
+   * @param  {Num} percentVal - New image width or height divided by 100
+   * @return {Num} - New iamge map coordinates
+   */
+  coordMath = (coord, imgVal, percentVal) => coord / imgVal * 100 * percentVal
+  /**
+   * resizeEvent - Resize Event
+   * @param  {Obj} e - Event object
+   */
   resizeEvent = (e) => {
@@ -47,0 +89,0 @@ this.imgMap()

index.js

@@ -1,2 +0,2 @@
-import ImageResize from './image-resize'
+import ImageResize from './build/resize-image'
 
@@ -3,0 +3,0 @@ new ImageResize({

package.json

 {
   "name": "resize-image-map",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "responsive image map",
   "main": "build/resize-image.js",
   "scripts": {
-    "start": "webpack --config webpack.config.js --mode development",
-    "server": "webpack-dev-server --mode development"
+    "start": "npm run localBuild | npm run server",
+    "localBuild": "webpack --config webpack.config.js --mode development",
+    "server": "webpack-dev-server --mode development",
+    "build": "webpack --config webpack.prod.js --mode production"
   },
@@ -10,0 +12,0 @@ "repository": {

No alert changes

Improved metrics

Total package byte prevSize

11423

increased by17.59%

Number of package files

10

increased by11.11%

Lines of code

133

increased by84.72%

No dependency changes