html-element-size - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

CHANGELOG.md

+## Changelog
+
+### 1.1.0 (2017-12-14)
+
+- [Rollup](https://rollupjs.org/) is used to build the library for multiple targets.
+
+### 1.0.0 (2017-11-27)
+
+- Initial release.

dist/html-element-size.es.js

+/**
+ * @param {HtmlElement} element
+ * @param {Object} [options]
+ * @param {String|Array} [options.removeClass]
+ * @param {String|Array} [options.addClass]
+ * @returns {Number}
+ */
+function htmlElementSize$1(element, options) {
+    var clonedElement = element.cloneNode(true);
+
+    options = options || {};
+
+    var classNames = clonedElement.className ? clonedElement.className.split(' ') : [];
+
+    var removeClass = options.removeClass || '';
+    if (removeClass) {
+        if (!(removeClass instanceof Array)) {
+            removeClass = removeClass.split(' ');
+        }
+        classNames = classNames.filter(function (className) {
+            return !removeClass.includes(className);
+        });
+    }
+
+    var addClass = options.addClass || '';
+    if (addClass) {
+        if (!(addClass instanceof Array)) {
+            addClass = addClass.split(' ');
+        }
+        addClass.forEach(function (className) {
+            if (!classNames.includes(className)) {
+                classNames.push(className);
+            }
+        });
+    }
+
+    clonedElement.className = classNames.join(' ');
+
+    if (clonedElement.style.height) {
+        delete clonedElement.style.height;
+    }
+
+    if (element.offsetWidth > 0) {
+        clonedElement.style.width = element.offsetWidth + 'px';
+    }
+
+    document.body.appendChild(clonedElement);
+    var width = clonedElement.offsetWidth;
+    var height = clonedElement.offsetHeight;
+    document.body.removeChild(clonedElement);
+
+    return {
+        width: width,
+        height: height
+    };
+}
+
+export default htmlElementSize$1;

lib/index.js

+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _htmlElementSize = require('./htmlElementSize');
+
+var _htmlElementSize2 = _interopRequireDefault(_htmlElementSize);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.default = _htmlElementSize2.default;

dist/html-element-size.js

@@ -1,8 +0,7 @@
-(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.htmlElementSize = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
-'use strict';
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+	typeof define === 'function' && define.amd ? define(factory) :
+	(global.htmlElementSize = factory());
+}(this, (function () { 'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-exports.default = htmlElementSize;
 /**
@@ -15,3 +14,3 @@ * @param {HtmlElement} element
  */
-function htmlElementSize(element, options) {
+function htmlElementSize$1(element, options) {
     var clonedElement = element.cloneNode(true);
@@ -65,5 +64,5 @@
 }
-module.exports = exports['default'];
-},{}]},{},[1])(1)
-});
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vZGVfbW9kdWxlcy9icm93c2VyLXBhY2svX3ByZWx1ZGUuanMiLCJsaWIvaHRtbEVsZW1lbnRTaXplLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0FDQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBIiwiZmlsZSI6ImdlbmVyYXRlZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzQ29udGVudCI6WyIoZnVuY3Rpb24gZSh0LG4scil7ZnVuY3Rpb24gcyhvLHUpe2lmKCFuW29dKXtpZighdFtvXSl7dmFyIGE9dHlwZW9mIHJlcXVpcmU9PVwiZnVuY3Rpb25cIiYmcmVxdWlyZTtpZighdSYmYSlyZXR1cm4gYShvLCEwKTtpZihpKXJldHVybiBpKG8sITApO3ZhciBmPW5ldyBFcnJvcihcIkNhbm5vdCBmaW5kIG1vZHVsZSAnXCIrbytcIidcIik7dGhyb3cgZi5jb2RlPVwiTU9EVUxFX05PVF9GT1VORFwiLGZ9dmFyIGw9bltvXT17ZXhwb3J0czp7fX07dFtvXVswXS5jYWxsKGwuZXhwb3J0cyxmdW5jdGlvbihlKXt2YXIgbj10W29dWzFdW2VdO3JldHVybiBzKG4/bjplKX0sbCxsLmV4cG9ydHMsZSx0LG4scil9cmV0dXJuIG5bb10uZXhwb3J0c312YXIgaT10eXBlb2YgcmVxdWlyZT09XCJmdW5jdGlvblwiJiZyZXF1aXJlO2Zvcih2YXIgbz0wO288ci5sZW5ndGg7bysrKXMocltvXSk7cmV0dXJuIHN9KSIsIid1c2Ugc3RyaWN0JztcblxuT2JqZWN0LmRlZmluZVByb3BlcnR5KGV4cG9ydHMsIFwiX19lc01vZHVsZVwiLCB7XG4gICAgdmFsdWU6IHRydWVcbn0pO1xuZXhwb3J0cy5kZWZhdWx0ID0gaHRtbEVsZW1lbnRTaXplO1xuLyoqXG4gKiBAcGFyYW0ge0h0bWxFbGVtZW50fSBlbGVtZW50XG4gKiBAcGFyYW0ge09iamVjdH0gW29wdGlvbnNdXG4gKiBAcGFyYW0ge1N0cmluZ3xBcnJheX0gW29wdGlvbnMucmVtb3ZlQ2xhc3NdXG4gKiBAcGFyYW0ge1N0cmluZ3xBcnJheX0gW29wdGlvbnMuYWRkQ2xhc3NdXG4gKiBAcmV0dXJucyB7TnVtYmVyfVxuICovXG5mdW5jdGlvbiBodG1sRWxlbWVudFNpemUoZWxlbWVudCwgb3B0aW9ucykge1xuICAgIHZhciBjbG9uZWRFbGVtZW50ID0gZWxlbWVudC5jbG9uZU5vZGUodHJ1ZSk7XG5cbiAgICBvcHRpb25zID0gb3B0aW9ucyB8fCB7fTtcblxuICAgIHZhciBjbGFzc05hbWVzID0gY2xvbmVkRWxlbWVudC5jbGFzc05hbWUgPyBjbG9uZWRFbGVtZW50LmNsYXNzTmFtZS5zcGxpdCgnICcpIDogW107XG5cbiAgICB2YXIgcmVtb3ZlQ2xhc3MgPSBvcHRpb25zLnJlbW92ZUNsYXNzIHx8ICcnO1xuICAgIGlmIChyZW1vdmVDbGFzcykge1xuICAgICAgICBpZiAoIShyZW1vdmVDbGFzcyBpbnN0YW5jZW9mIEFycmF5KSkge1xuICAgICAgICAgICAgcmVtb3ZlQ2xhc3MgPSByZW1vdmVDbGFzcy5zcGxpdCgnICcpO1xuICAgICAgICB9XG4gICAgICAgIGNsYXNzTmFtZXMgPSBjbGFzc05hbWVzLmZpbHRlcihmdW5jdGlvbiAoY2xhc3NOYW1lKSB7XG4gICAgICAgICAgICByZXR1cm4gIXJlbW92ZUNsYXNzLmluY2x1ZGVzKGNsYXNzTmFtZSk7XG4gICAgICAgIH0pO1xuICAgIH1cblxuICAgIHZhciBhZGRDbGFzcyA9IG9wdGlvbnMuYWRkQ2xhc3MgfHwgJyc7XG4gICAgaWYgKGFkZENsYXNzKSB7XG4gICAgICAgIGlmICghKGFkZENsYXNzIGluc3RhbmNlb2YgQXJyYXkpKSB7XG4gICAgICAgICAgICBhZGRDbGFzcyA9IGFkZENsYXNzLnNwbGl0KCcgJyk7XG4gICAgICAgIH1cbiAgICAgICAgYWRkQ2xhc3MuZm9yRWFjaChmdW5jdGlvbiAoY2xhc3NOYW1lKSB7XG4gICAgICAgICAgICBpZiAoIWNsYXNzTmFtZXMuaW5jbHVkZXMoY2xhc3NOYW1lKSkge1xuICAgICAgICAgICAgICAgIGNsYXNzTmFtZXMucHVzaChjbGFzc05hbWUpO1xuICAgICAgICAgICAgfVxuICAgICAgICB9KTtcbiAgICB9XG5cbiAgICBjbG9uZWRFbGVtZW50LmNsYXNzTmFtZSA9IGNsYXNzTmFtZXMuam9pbignICcpO1xuXG4gICAgaWYgKGNsb25lZEVsZW1lbnQuc3R5bGUuaGVpZ2h0KSB7XG4gICAgICAgIGRlbGV0ZSBjbG9uZWRFbGVtZW50LnN0eWxlLmhlaWdodDtcbiAgICB9XG5cbiAgICBpZiAoZWxlbWVudC5vZmZzZXRXaWR0aCA+IDApIHtcbiAgICAgICAgY2xvbmVkRWxlbWVudC5zdHlsZS53aWR0aCA9IGVsZW1lbnQub2Zmc2V0V2lkdGggKyAncHgnO1xuICAgIH1cblxuICAgIGRvY3VtZW50LmJvZHkuYXBwZW5kQ2hpbGQoY2xvbmVkRWxlbWVudCk7XG4gICAgdmFyIHdpZHRoID0gY2xvbmVkRWxlbWVudC5vZmZzZXRXaWR0aDtcbiAgICB2YXIgaGVpZ2h0ID0gY2xvbmVkRWxlbWVudC5vZmZzZXRIZWlnaHQ7XG4gICAgZG9jdW1lbnQuYm9keS5yZW1vdmVDaGlsZChjbG9uZWRFbGVtZW50KTtcblxuICAgIHJldHVybiB7XG4gICAgICAgIHdpZHRoOiB3aWR0aCxcbiAgICAgICAgaGVpZ2h0OiBoZWlnaHRcbiAgICB9O1xufVxubW9kdWxlLmV4cG9ydHMgPSBleHBvcnRzWydkZWZhdWx0J107Il19
+
+return htmlElementSize$1;
+
+})));

dist/html-element-size.min.js

@@ -1,1 +0,1 @@
-!function(f){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=f();else if("function"==typeof define&&define.amd)define([],f);else{("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).htmlElementSize=f()}}(function(){return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n||e)},l,l.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=function(element,options){var clonedElement=element.cloneNode(!0);options=options||{};var classNames=clonedElement.className?clonedElement.className.split(" "):[],removeClass=options.removeClass||"";removeClass&&(removeClass instanceof Array||(removeClass=removeClass.split(" ")),classNames=classNames.filter(function(className){return!removeClass.includes(className)}));var addClass=options.addClass||"";addClass&&(addClass instanceof Array||(addClass=addClass.split(" ")),addClass.forEach(function(className){classNames.includes(className)||classNames.push(className)})),clonedElement.className=classNames.join(" "),clonedElement.style.height&&delete clonedElement.style.height,element.offsetWidth>0&&(clonedElement.style.width=element.offsetWidth+"px"),document.body.appendChild(clonedElement);var width=clonedElement.offsetWidth,height=clonedElement.offsetHeight;return document.body.removeChild(clonedElement),{width:width,height:height}},module.exports=exports.default},{}]},{},[1])(1)});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.htmlElementSize=t()}(this,function(){"use strict";return function(e,t){var i=e.cloneNode(!0);t=t||{};var n=i.className?i.className.split(" "):[],o=t.removeClass||"";o&&(o instanceof Array||(o=o.split(" ")),n=n.filter(function(e){return!o.includes(e)}));var s=t.addClass||"";s&&(s instanceof Array||(s=s.split(" ")),s.forEach(function(e){n.includes(e)||n.push(e)})),i.className=n.join(" "),i.style.height&&delete i.style.height,e.offsetWidth>0&&(i.style.width=e.offsetWidth+"px"),document.body.appendChild(i);var d=i.offsetWidth,f=i.offsetHeight;return document.body.removeChild(i),{width:d,height:f}}});

lib/htmlElementSize.js

@@ -62,3 +62,2 @@ 'use strict';
     };
-}
-module.exports = exports['default'];
+}

package.json

 {
   "name": "html-element-size",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Helper function to get size of unvisible HTML element or HTML element not attached to DOM",
-  "main": "lib/htmlElementSize.js",
+  "main": "lib/index.js",
+  "jsnext:main": "dist/html-element-size.es.js",
+  "module": "dist/html-element-size.es.js",
   "scripts": {
-    "clean": "rimraf lib dist",
-    "build": "npm run transpile && npm run browserify && npm run uglify",
-    "rebuild": "npm run clean && npm run build",
+    "build": "rimraf lib dist && npm run transpile && npm run dist",
     "transpile": "babel src -d lib",
-    "browserify": "mkdirp dist && browserify lib/htmlElementSize.js --standalone htmlElementSize -o dist/html-element-size.js -d",
-    "uglify": "uglifyjs -c warnings=false -o dist/html-element-size.min.js -- dist/html-element-size.js",
+    "dist": "npm run dist:es && npm run dist:umd:dev && npm run dist:umd:prod",
+    "dist:es": "rollup --config rollup.config.es.js",
+    "dist:umd": "rollup --config rollup.config.js",
+    "dist:umd:dev": "cross-env NODE_ENV=development npm run dist:umd",
+    "dist:umd:prod": "cross-env NODE_ENV=production npm run dist:umd",
+    "watch:es": "node --require babel-register rollup.watch.es.js",
     "lint": "eslint ./src",
@@ -18,3 +22,3 @@ "lint:test": "eslint -c test/.eslintrc.json ./test",
     "test:coveralls": "npm run test:coverage && cat ./coverage/lcov.info | coveralls",
-    "prepublishOnly": "npm run lint && npm test && npm run rebuild"
+    "prepublishOnly": "npm run lint && npm run lint:test && npm test && npm run build"
   },
@@ -41,16 +45,20 @@ "repository": {
     "babel-core": "^6.26.0",
-    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-external-helpers": "^6.22.0",
     "babel-preset-env": "^1.6.1",
     "babel-register": "^6.26.0",
-    "browserify": "^14.5.0",
     "chai": "^4.1.2",
+    "chokidar": "^1.7.0",
     "coveralls": "^3.0.0",
+    "cross-env": "^5.1.1",
     "eslint": "^4.12.0",
-    "eslint-config-ezze": "^0.2.0",
-    "istanbul": "^0.4.5",
+    "eslint-config-ezze": "^0.3.0",
+    "istanbul": "^1.0.0-alpha.2",
     "mkdirp": "^0.5.1",
     "mocha": "^4.0.1",
     "rimraf": "^2.6.2",
-    "uglify-js": "^3.2.0"
+    "rollup": "^0.52.1",
+    "rollup-plugin-babel": "^3.0.2",
+    "rollup-plugin-uglify": "^2.0.1",
+    "uglify-es": "^3.2.2"
   }
 }

README.md

 # html-element-size
 
-[![NPM Version](https://badge.fury.io/js/html-element-size.svg)](https://badge.fury.io/js/html-element-size)
+[![npm](https://img.shields.io/npm/v/html-element-size.svg)](https://www.npmjs.com/package/html-element-size)
 [![Build Status](https://travis-ci.org/ezze/html-element-size.svg?branch=develop)](https://travis-ci.org/ezze/html-element-size)
 [![Coverage Status](https://coveralls.io/repos/github/ezze/html-element-size/badge.svg?branch=develop)](https://coveralls.io/github/ezze/html-element-size?branch=develop)
+[![License](https://img.shields.io/github/license/mashape/apistatus.svg)](LICENSE)
 
@@ -11,35 +12,47 @@ Helper function to get size of unvisible HTML element or HTML element not attached to DOM.
 
-```bash
-npm install html-element-size --save
 ```
+npm install html-element-size
+```
     
 ## Usage
 
-- require with Node.js:
+- ES6:
 
-    ```javascript
-    var htmlElementSize = require('html-element-size');
-    ```
+   ```javascript
+   import htmlElementSize from 'html-element-size';
+   const size = htmlElementSize(document.querySelector('.my-element'), {
+       removeClass: 'my-element-hidden',
+       addClass: 'my-element-some-class'
+   });
+   console.log(size); // => { width: 200; height: 100 }
+   ```
+   
+- Common.js: 
 
-- in browser include `dist/html-element-size.js` or `dist/html-element-size.min.js` script:
+   ```javascript
+   var htmlElementSize = require('html-element-size');
+   var size = htmlElementSize(document.querySelector('.my-element'), {
+       removeClass: 'my-element-hidden',
+       addClass: 'my-element-some-class'
+   });
+   ```
 
-    ```javascript
-    var htmlElementSize = window.htmlElementSize;
-    ```
-    
-and then    
-    
-```javascript    
-var size = htmlElementSize(document.querySelector('.my-element'), {
-    removeClass: 'my-element-hidden',
-    addClass: 'my-element-some-class'
-});
-console.log(size); // => { width: 200; height: 100 }
-```
+- Browser (include `dist/html-element-size.js` or `dist/html-element-size.min.js`):
 
+   ```javascript
+   var htmlElementSize = window.htmlElementSize;
+   var size = htmlElementSize(document.querySelector('.my-element'), {
+       removeClass: 'my-element-hidden',
+       addClass: 'my-element-some-class'
+   });
+   console.log(size); // => { width: 200; height: 100 }
+   ```
+
 ## Building
 
 In order to build library run:
-                                          
-    npm run build
+
+```
+npm run build
+```
     
@@ -52,3 +65,3 @@ ## Testing
    
-Run tests coverage:
+Run tests with coverage:
 
@@ -59,3 +72,3 @@ npm run test:coverage
     
-Before making a pull request, please, be sure that your changes are rebased to `develop` branch.
+Before making a pull request, please, be sure that you start from `develop` branch.
 
@@ -62,0 +75,0 @@ ## License

No alert changes

Improved metrics

Number of package files

9

50%

Lines of code

163

29.37%

Number of lines in readme file

75

20.97%

Worsened metrics

Total package byte prevSize

11559

-19.03%

Dev dependency count

19

26.67%

No dependency changes