get-node-dimensions - npm Package Compare versions

Comparing version 1.1.0 to 1.2.2

CHANGELOG.md

 ## CHANGELOG
+### 1.2.0
+Account for margins
+
 ### 1.1.0
@@ -3,0 +6,0 @@ Allow width and height to be set on clone using options

dist/get-node-dimensions.js

@@ -70,2 +70,6 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
+	var _getMargin = __webpack_require__(2);
+
+	var _getMargin2 = _interopRequireDefault(_getMargin);
+
 	function getNodeDimensions(node) {
@@ -75,10 +79,29 @@ var options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
 	  var rect = node.getBoundingClientRect();
+	  var width = undefined,
+	      height = undefined,
+	      margin = undefined;
 
+	  // determine if we need to clone the element to get proper dimensions or not
 	  if (!rect.width || !rect.height || options.clone) {
-	    rect = (0, _getCloneDimensions2['default'])(node, options);
+	    var cloneDimensions = (0, _getCloneDimensions2['default'])(node, options);
+	    rect = cloneDimensions.rect;
+	    margin = cloneDimensions.margin;
 	  }
+	  // if no cloning needed, we need to determine if margin should be accounted for
+	  else if (options.margin) {
+	      margin = (0, _getMargin2['default'])(getComputedStyle(node));
+	    }
 
+	  // include margin in width/height calculation if desired
+	  if (options.margin) {
+	    width = margin.left + rect.width + margin.right;
+	    height = margin.top + rect.height + margin.bottom;
+	  } else {
+	    width = rect.width;
+	    height = rect.height;
+	  }
+
 	  return {
-	    width: rect.width,
-	    height: rect.height,
+	    width: width,
+	    height: height,
 	    top: rect.top,
@@ -95,3 +118,3 @@ right: rect.right,
 /* 1 */
-/***/ function(module, exports) {
+/***/ function(module, exports, __webpack_require__) {
 
@@ -105,2 +128,8 @@ 'use strict';
 
+	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+	var _getMargin = __webpack_require__(2);
+
+	var _getMargin2 = _interopRequireDefault(_getMargin);
+
 	function getCloneDimensions(node, options) {
@@ -114,3 +143,4 @@ var parentNode = node.parentNode;
 	      width = undefined,
-	      height = undefined;
+	      height = undefined,
+	      margin = undefined;
 
@@ -153,8 +183,11 @@ // give the node some context to measure off of
 	  return {
-	    width: width,
-	    height: height,
-	    top: rect.top,
-	    right: rect.right,
-	    bottom: rect.bottom,
-	    left: rect.left
+	    rect: {
+	      width: width,
+	      height: height,
+	      top: rect.top,
+	      right: rect.right,
+	      bottom: rect.bottom,
+	      left: rect.left
+	    },
+	    margin: (0, _getMargin2['default'])(style)
 	  };
@@ -165,2 +198,27 @@ }
 
+/***/ },
+/* 2 */
+/***/ function(module, exports) {
+
+	"use strict";
+
+	Object.defineProperty(exports, "__esModule", {
+	  value: true
+	});
+	exports["default"] = getMargin;
+	var toNumber = function toNumber(n) {
+	  return parseInt(n) || 0;
+	};
+
+	function getMargin(style) {
+	  return {
+	    top: toNumber(style.marginTop),
+	    right: toNumber(style.marginRight),
+	    bottom: toNumber(style.marginBottom),
+	    left: toNumber(style.marginLeft)
+	  };
+	}
+
+	module.exports = exports["default"];
+
 /***/ }
@@ -167,0 +225,0 @@ /******/ ])

dist/get-node-dimensions.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.getNodeDimensions=e():t.getNodeDimensions=e()}(this,function(){return function(t){function e(i){if(o[i])return o[i].exports;var d=o[i]={exports:{},id:i,loaded:!1};return t[i].call(d.exports,d,d.exports,e),d.loaded=!0,d.exports}var o={};return e.m=t,e.c=o,e.p="dist/",e(0)}([function(t,e,o){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}function d(t){var e=arguments.length<=1||void 0===arguments[1]?{}:arguments[1],o=t.getBoundingClientRect();return o.width&&o.height&&!e.clone||(o=(0,r["default"])(t,e)),{width:o.width,height:o.height,top:o.top,right:o.right,bottom:o.bottom,left:o.left}}Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=d;var n=o(1),r=i(n);t.exports=e["default"]},function(t,e){"use strict";function o(t,e){var o=t.parentNode,i=document.createElement("div"),d=t.cloneNode(!0),n=getComputedStyle(t),r=void 0,l=void 0,u=void 0;return i.style.height=0,i.style.overflow="hidden",d.setAttribute("id",""),d.setAttribute("name",""),(e.display||"none"===n.getPropertyValue("display"))&&(d.style.display=e.display||"block"),!e.width&&parseInt(n.getPropertyValue("width"))||(d.style.width=e.width||"auto"),!e.height&&parseInt(n.getPropertyValue("height"))||(d.style.height=e.height||"auto"),i.appendChild(d),o.appendChild(i),r=d.getBoundingClientRect(),l=d.offsetWidth,u=d.offsetHeight,o.removeChild(i),{width:l,height:u,top:r.top,right:r.right,bottom:r.bottom,left:r.left}}Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=o,t.exports=e["default"]}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.getNodeDimensions=e():t.getNodeDimensions=e()}(this,function(){return function(t){function e(i){if(o[i])return o[i].exports;var r=o[i]={exports:{},id:i,loaded:!1};return t[i].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var o={};return e.m=t,e.c=o,e.p="dist/",e(0)}([function(t,e,o){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}function r(t){var e=arguments.length<=1||void 0===arguments[1]?{}:arguments[1],o=t.getBoundingClientRect(),i=void 0,r=void 0,n=void 0;if(o.width&&o.height&&!e.clone)e.margin&&(n=(0,l["default"])(getComputedStyle(t)));else{var u=(0,d["default"])(t,e);o=u.rect,n=u.margin}return e.margin?(i=n.left+o.width+n.right,r=n.top+o.height+n.bottom):(i=o.width,r=o.height),{width:i,height:r,top:o.top,right:o.right,bottom:o.bottom,left:o.left}}Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=r;var n=o(1),d=i(n),u=o(2),l=i(u);t.exports=e["default"]},function(t,e,o){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}function r(t,e){var o=t.parentNode,i=document.createElement("div"),r=t.cloneNode(!0),n=getComputedStyle(t),u=void 0,l=void 0,a=void 0;return i.style.height=0,i.style.overflow="hidden",r.setAttribute("id",""),r.setAttribute("name",""),(e.display||"none"===n.getPropertyValue("display"))&&(r.style.display=e.display||"block"),!e.width&&parseInt(n.getPropertyValue("width"))||(r.style.width=e.width||"auto"),!e.height&&parseInt(n.getPropertyValue("height"))||(r.style.height=e.height||"auto"),i.appendChild(r),o.appendChild(i),u=r.getBoundingClientRect(),l=r.offsetWidth,a=r.offsetHeight,o.removeChild(i),{rect:{width:l,height:a,top:u.top,right:u.right,bottom:u.bottom,left:u.left},margin:(0,d["default"])(n)}}Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=r;var n=o(2),d=i(n);t.exports=e["default"]},function(t,e){"use strict";function o(t){return{top:i(t.marginTop),right:i(t.marginRight),bottom:i(t.marginBottom),left:i(t.marginLeft)}}Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=o;var i=function(t){return parseInt(t)||0};t.exports=e["default"]}])});

lib/get-clone-dimensions.js

@@ -8,2 +8,8 @@ 'use strict';
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var _getMargin = require('./get-margin');
+
+var _getMargin2 = _interopRequireDefault(_getMargin);
+
 function getCloneDimensions(node, options) {
@@ -17,3 +23,4 @@ var parentNode = node.parentNode;
       width = undefined,
-      height = undefined;
+      height = undefined,
+      margin = undefined;
 
@@ -56,8 +63,11 @@ // give the node some context to measure off of
   return {
-    width: width,
-    height: height,
-    top: rect.top,
-    right: rect.right,
-    bottom: rect.bottom,
-    left: rect.left
+    rect: {
+      width: width,
+      height: height,
+      top: rect.top,
+      right: rect.right,
+      bottom: rect.bottom,
+      left: rect.left
+    },
+    margin: (0, _getMargin2['default'])(style)
   };
@@ -64,0 +74,0 @@ }

lib/get-node-dimensions.js

@@ -14,2 +14,6 @@ 'use strict';
 
+var _getMargin = require('./get-margin');
+
+var _getMargin2 = _interopRequireDefault(_getMargin);
+
 function getNodeDimensions(node) {
@@ -19,10 +23,29 @@ var options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
   var rect = node.getBoundingClientRect();
+  var width = undefined,
+      height = undefined,
+      margin = undefined;
 
+  // determine if we need to clone the element to get proper dimensions or not
   if (!rect.width || !rect.height || options.clone) {
-    rect = (0, _getCloneDimensions2['default'])(node, options);
+    var cloneDimensions = (0, _getCloneDimensions2['default'])(node, options);
+    rect = cloneDimensions.rect;
+    margin = cloneDimensions.margin;
   }
+  // if no cloning needed, we need to determine if margin should be accounted for
+  else if (options.margin) {
+      margin = (0, _getMargin2['default'])(getComputedStyle(node));
+    }
 
+  // include margin in width/height calculation if desired
+  if (options.margin) {
+    width = margin.left + rect.width + margin.right;
+    height = margin.top + rect.height + margin.bottom;
+  } else {
+    width = rect.width;
+    height = rect.height;
+  }
+
   return {
-    width: rect.width,
-    height: rect.height,
+    width: width,
+    height: height,
     top: rect.top,
@@ -29,0 +52,0 @@ right: rect.right,

package.json

 {
   "name": "get-node-dimensions",
-  "version": "1.1.0",
+  "version": "1.2.2",
   "description": "Get accurate element dimensions, even if it's hidden!",
   "main": "lib/get-node-dimensions.js",
-  "files": ["dist", "lib"],
+  "files": [
+    "dist",
+    "lib"
+  ],
   "scripts": {
@@ -8,0 +11,0 @@ "build": "npm run build:lib && NODE_ENV=production webpack --config webpack.config.js",

README.md

@@ -34,3 +34,4 @@ ## get-node-dimensions
 
+- **margin** {bool}: Whether or not to account for element margins in calculation
 - **clone** {bool}: Whether or not to use a clone to measure. If no width/height found, the element will automatically be cloned in order to obtain proper dimensions
 - **display|width|height** {string}: sets respective clone property

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17106

increased by28.47%

Number of package files

9

increased by12.5%

Lines of code

288

increased by45.45%

Number of lines in readme file

37

increased by2.78%

No dependency changes