get-node-dimensions
Advanced tools
get-node-dimensions - npm Package Compare versions
Comparing version 1.0.0 to 1.1.0
| ## CHANGELOG | ||
| ### 1.1.0 | ||
| Allow width and height to be set on clone using options | ||
| Use width/height when measuring clone so transforms don't give inaccurate dimensions | ||
| ### 1.0.0 | ||
@@ -3,0 +8,0 @@ Use original node to get style information because clone returns nothing |
@@ -74,14 +74,10 @@ (function webpackUniversalModuleDefinition(root, factory) { | ||
| var rect = node.getBoundingClientRect(); | ||
| var width = rect.width; | ||
| var height = rect.height; | ||
| if (!width || !height || options.clone) { | ||
| if (!rect.width || !rect.height || options.clone) { | ||
| rect = (0, _getCloneDimensions2['default'])(node, options); | ||
| width = rect.width; | ||
| height = rect.height; | ||
| } | ||
| return { | ||
| width: width, | ||
| height: height, | ||
| width: rect.width, | ||
| height: rect.height, | ||
| top: rect.top, | ||
@@ -113,3 +109,5 @@ right: rect.right, | ||
| var style = getComputedStyle(node); | ||
| var rect = {}; | ||
| var rect = undefined, | ||
| width = undefined, | ||
| height = undefined; | ||
@@ -127,10 +125,10 @@ // give the node some context to measure off of | ||
| // set props to get a true dimension calculation | ||
| if (style.getPropertyValue('display') === 'none') { | ||
| if (options.display || style.getPropertyValue('display') === 'none') { | ||
| clone.style.display = options.display || 'block'; | ||
| } | ||
| if (!parseInt(style.getPropertyValue('width'))) { | ||
| clone.style.width = 'auto'; | ||
| if (options.width || !parseInt(style.getPropertyValue('width'))) { | ||
| clone.style.width = options.width || 'auto'; | ||
| } | ||
| if (!parseInt(style.getPropertyValue('height'))) { | ||
| clone.style.height = 'auto'; | ||
| if (options.height || !parseInt(style.getPropertyValue('height'))) { | ||
| clone.style.height = options.height || 'auto'; | ||
| } | ||
@@ -144,4 +142,6 @@ | ||
| // get accurate width and height | ||
| // get accurate dimensions | ||
| rect = clone.getBoundingClientRect(); | ||
| width = clone.offsetWidth; | ||
| height = clone.offsetHeight; | ||
@@ -151,3 +151,10 @@ // destroy clone | ||
| return rect; | ||
| return { | ||
| width: width, | ||
| height: height, | ||
| top: rect.top, | ||
| right: rect.right, | ||
| bottom: rect.bottom, | ||
| left: rect.left | ||
| }; | ||
| } | ||
@@ -154,0 +161,0 @@ |
@@ -1,1 +0,1 @@ | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.getNodeDimensions=t():e.getNodeDimensions=t()}(this,function(){return function(e){function t(n){if(o[n])return o[n].exports;var i=o[n]={exports:{},id:n,loaded:!1};return e[n].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var o={};return t.m=e,t.c=o,t.p="dist/",t(0)}([function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function i(e){var t=arguments.length<=1||void 0===arguments[1]?{}:arguments[1],o=e.getBoundingClientRect(),n=o.width,i=o.height;return n&&i&&!t.clone||(o=(0,d["default"])(e,t),n=o.width,i=o.height),{width:n,height:i,top:o.top,right:o.right,bottom:o.bottom,left:o.left}}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=i;var r=o(1),d=n(r);e.exports=t["default"]},function(e,t){"use strict";function o(e,t){var o=e.parentNode,n=document.createElement("div"),i=e.cloneNode(!0),r=getComputedStyle(e),d={};return n.style.height=0,n.style.overflow="hidden",i.setAttribute("id",""),i.setAttribute("name",""),"none"===r.getPropertyValue("display")&&(i.style.display=t.display||"block"),parseInt(r.getPropertyValue("width"))||(i.style.width="auto"),parseInt(r.getPropertyValue("height"))||(i.style.height="auto"),n.appendChild(i),o.appendChild(n),d=i.getBoundingClientRect(),o.removeChild(n),d}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=o,e.exports=t["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 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"]}])}); |
@@ -14,3 +14,5 @@ 'use strict'; | ||
| var style = getComputedStyle(node); | ||
| var rect = {}; | ||
| var rect = undefined, | ||
| width = undefined, | ||
| height = undefined; | ||
@@ -28,10 +30,10 @@ // give the node some context to measure off of | ||
| // set props to get a true dimension calculation | ||
| if (style.getPropertyValue('display') === 'none') { | ||
| if (options.display || style.getPropertyValue('display') === 'none') { | ||
| clone.style.display = options.display || 'block'; | ||
| } | ||
| if (!parseInt(style.getPropertyValue('width'))) { | ||
| clone.style.width = 'auto'; | ||
| if (options.width || !parseInt(style.getPropertyValue('width'))) { | ||
| clone.style.width = options.width || 'auto'; | ||
| } | ||
| if (!parseInt(style.getPropertyValue('height'))) { | ||
| clone.style.height = 'auto'; | ||
| if (options.height || !parseInt(style.getPropertyValue('height'))) { | ||
| clone.style.height = options.height || 'auto'; | ||
| } | ||
@@ -45,4 +47,6 @@ | ||
| // get accurate width and height | ||
| // get accurate dimensions | ||
| rect = clone.getBoundingClientRect(); | ||
| width = clone.offsetWidth; | ||
| height = clone.offsetHeight; | ||
@@ -52,5 +56,12 @@ // destroy clone | ||
| return rect; | ||
| return { | ||
| width: width, | ||
| height: height, | ||
| top: rect.top, | ||
| right: rect.right, | ||
| bottom: rect.bottom, | ||
| left: rect.left | ||
| }; | ||
| } | ||
| module.exports = exports['default']; |
@@ -18,14 +18,10 @@ 'use strict'; | ||
| var rect = node.getBoundingClientRect(); | ||
| var width = rect.width; | ||
| var height = rect.height; | ||
| if (!width || !height || options.clone) { | ||
| if (!rect.width || !rect.height || options.clone) { | ||
| rect = (0, _getCloneDimensions2['default'])(node, options); | ||
| width = rect.width; | ||
| height = rect.height; | ||
| } | ||
| return { | ||
| width: width, | ||
| height: height, | ||
| width: rect.width, | ||
| height: rect.height, | ||
| top: rect.top, | ||
@@ -32,0 +28,0 @@ right: rect.right, |
| { | ||
| "name": "get-node-dimensions", | ||
| "version": "1.0.0", | ||
| "version": "1.1.0", | ||
| "description": "Get accurate element dimensions, even if it's hidden!", | ||
@@ -5,0 +5,0 @@ "main": "lib/get-node-dimensions.js", |
@@ -11,4 +11,2 @@ ## get-node-dimensions | ||
| `bower install get-node-dimensions --save` | ||
| ```html | ||
@@ -25,3 +23,15 @@ <script src="https://unpkg.com/get-node-dimensions/dist/get-node-dimensions.js"></script> | ||
| const div = document.getElementById('div-to-measure') | ||
| getNodeDimensions(div) // { width, height, top, right, bottom, left } | ||
| console.log(getNodeDimensions(div)) // { width, height, top, right, bottom, left } | ||
| ``` | ||
| ## Usage | ||
| ### elementDimensions = getNodeDimensions(element[, options]) | ||
| Returns element rect which includes `width`, `height`, `top`, `right`, `bottom`, `left`. | ||
| `createOptions`: | ||
| - **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
LicenseThis 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
LicenseThis 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
- increased by9.84%
13315
- Lines of code
- increased by7.61%
198
- Number of lines in readme file
- increased by38.46%
36
No dependency changes