element-measurer - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

CHANGELOG.md

@@ -9,2 +9,6 @@ # Changelog
 
+## [1.0.2] - 2017-12-12
+### Changed
+- Change ElementMeasurer.isDocumentTarget to getter.
+
 ## [1.0.0] - 2017-10-10
@@ -11,0 +15,0 @@ First release. [README.md](https://github.com/archco/element-measurer/blob/master/README.md)

dist/element-measurer.js

@@ -131,3 +131,3 @@ window["ElementMeasurer"] =
     /**
-     * Determine whether a target element is document part or sub element.
+     * Returns whether a target element is document or not.
      *
@@ -138,11 +138,7 @@ * @return {Boolean}
   }, {
-    key: 'isDocumentTarget',
-    value: function isDocumentTarget() {
-      return this._isDocument;
-    }
+    key: '_checkTarget',
 
+
     // private
 
-  }, {
-    key: '_checkTarget',
     value: function _checkTarget() {
@@ -268,2 +264,8 @@ this._isDocument = this.target === document.documentElement || this.target === document.body;
     }
+  }, {
+    key: 'isDocumentTarget',
+    get: function get() {
+      this._checkTarget();
+      return this._isDocument;
+    }
   }]);
@@ -270,0 +272,0 @@

dist/element-measurer.min.js

@@ -1,1 +0,1 @@
-window.ElementMeasurer=function(t){function e(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=0)}([function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var i=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),o=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:document.documentElement;r(this,t),this._isDocument=!1,this.setTarget(e)}return i(t,[{key:"setTarget",value:function(t){if(t instanceof Element)this.target=t;else if(t===window||t===document)this.target=document.documentElement;else{if("string"!=typeof t)throw new TypeError("Target value is not correct type.");this.target=document.querySelector(t)}this._checkTarget()}},{key:"isDocumentTarget",value:function(){return this._isDocument}},{key:"_checkTarget",value:function(){this._isDocument=this.target===document.documentElement||this.target===document.body}},{key:"clientWidth",get:function(){return this._isDocument?window.innerWidth:this.target.getBoundingClientRect().width}},{key:"clientHeight",get:function(){return this._isDocument?window.innerHeight:this.target.getBoundingClientRect().height}},{key:"scrollTop",get:function(){return this._isDocument?window.pageYOffset:this.target.scrollTop},set:function(t){this._isDocument?window.scrollTo(this.scrollLeft,t):this.target.scrollTop=t}},{key:"scrollLeft",get:function(){return this._isDocument?window.pageXOffset:this.target.scrollLeft},set:function(t){this._isDocument?window.scrollTo(t,this.scrollTop):this.target.scrollLeft=t}},{key:"scrollWidth",get:function(){return this.target.scrollWidth}},{key:"scrollHeight",get:function(){return this.target.scrollHeight}},{key:"maxScrollTop",get:function(){return this.scrollHeight-this.clientHeight}},{key:"maxScrollLeft",get:function(){return this.scrollWidth-this.clientWidth}}]),t}();e.default=o}]);
+window.ElementMeasurer=function(t){function e(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=0)}([function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),i=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:document.documentElement;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this._isDocument=!1,this.setTarget(e)}return r(t,[{key:"setTarget",value:function(t){if(t instanceof Element)this.target=t;else if(t===window||t===document)this.target=document.documentElement;else{if("string"!=typeof t)throw new TypeError("Target value is not correct type.");this.target=document.querySelector(t)}this._checkTarget()}},{key:"_checkTarget",value:function(){this._isDocument=this.target===document.documentElement||this.target===document.body}},{key:"clientWidth",get:function(){return this._isDocument?window.innerWidth:this.target.getBoundingClientRect().width}},{key:"clientHeight",get:function(){return this._isDocument?window.innerHeight:this.target.getBoundingClientRect().height}},{key:"scrollTop",get:function(){return this._isDocument?window.pageYOffset:this.target.scrollTop},set:function(t){this._isDocument?window.scrollTo(this.scrollLeft,t):this.target.scrollTop=t}},{key:"scrollLeft",get:function(){return this._isDocument?window.pageXOffset:this.target.scrollLeft},set:function(t){this._isDocument?window.scrollTo(t,this.scrollTop):this.target.scrollLeft=t}},{key:"scrollWidth",get:function(){return this.target.scrollWidth}},{key:"scrollHeight",get:function(){return this.target.scrollHeight}},{key:"maxScrollTop",get:function(){return this.scrollHeight-this.clientHeight}},{key:"maxScrollLeft",get:function(){return this.scrollWidth-this.clientWidth}},{key:"isDocumentTarget",get:function(){return this._checkTarget(),this._isDocument}}]),t}();e.default=i}]);

dist/element-measurer.mod.js

@@ -10,3 +10,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 		root["ElementMeasurer"] = factory();
-})(this, function() {
+})(typeof self !== 'undefined' ? self : this, function() {
 return /******/ (function(modules) { // webpackBootstrap
@@ -141,3 +141,3 @@ /******/ 	// The module cache
     /**
-     * Determine whether a target element is document part or sub element.
+     * Returns whether a target element is document or not.
      *
@@ -148,11 +148,7 @@ * @return {Boolean}
   }, {
-    key: 'isDocumentTarget',
-    value: function isDocumentTarget() {
-      return this._isDocument;
-    }
+    key: '_checkTarget',
 
+
     // private
 
-  }, {
-    key: '_checkTarget',
     value: function _checkTarget() {
@@ -278,2 +274,8 @@ this._isDocument = this.target === document.documentElement || this.target === document.body;
     }
+  }, {
+    key: 'isDocumentTarget',
+    get: function get() {
+      this._checkTarget();
+      return this._isDocument;
+    }
   }]);
@@ -280,0 +282,0 @@

lib/element-measurer.js

@@ -137,7 +137,8 @@ export default class ElementMeasurer {
   /**
-   * Determine whether a target element is document part or sub element.
+   * Returns whether a target element is document or not.
    *
    * @return {Boolean}
    */
-  isDocumentTarget() {
+  get isDocumentTarget() {
+    this._checkTarget();
     return this._isDocument;
@@ -144,0 +145,0 @@ }

package.json

 {
   "name": "element-measurer",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "The javascript class for measure size of DOM.",
@@ -13,3 +13,3 @@ "main": "dist/element-measurer.js",
     "test": "echo \"Please see test/test.html in browser.\" && exit 1",
-    "build": "node ./node_modules/webpack/bin/webpack --hide-modules",
+    "build": "npx webpack --hide-modules",
     "watch": "npm run build -- --watch"
@@ -34,7 +34,7 @@ },
     "babel-loader": "^7.1.2",
-    "babel-preset-env": "^1.6.0",
+    "babel-preset-env": "^1.6.1",
     "chai": "^4.1.2",
     "mocha": "^4.0.1",
-    "uglifyjs-webpack-plugin": "^0.4.6",
-    "webpack": "^3.6.0"
+    "uglifyjs-webpack-plugin": "^1.1.2",
+    "webpack": "^3.10.0"
   },
@@ -41,0 +41,0 @@ "babel": {

README.md

@@ -14,11 +14,15 @@ # ElementMeasurer
 // Measurement of Element.
-const emTarget = new ElementMeasurer('#target');
-let max = emTarget.maxScrollTop; // get maxScrollTop.
+// target: Element | 'selector' | document | window
+const targetSize = new ElementMeasurer('#target');
+let max = targetSize.maxScrollTop; // get maxScrollTop.
 
 // Measurement of Document.
-const emDoc = new ElementMeasurer(document);
-emDoc.scrollTop = 200; // set scrollTop.
+const docSize = new ElementMeasurer(document);
+docSize.scrollTop = 200; // set scrollTop.
 ```
 
 ## API
+
+![Image: element-and-client](https://github.com/archco/element-measurer/blob/master/element-and-client.png)
+
 ### Properties
@@ -25,0 +29,0 @@ - clientWidth: `ReadOnly` Returns inner width of an element in pixels.

test/element-measurer.test.js

@@ -1,29 +0,32 @@
-const expect = window.chai.expect;
-const Module = window.ElementMeasurer;
-const ElementMeasurer = Module.default;
+var expect = window.chai.expect;
+var Module = window.ElementMeasurer;
+var ElementMeasurer = Module.default;
 
-describe('ElementMeasurer', () => {
-  it('ElementMeasurer is function', () => {
+describe('ElementMeasurer', function () {
+  it('ElementMeasurer is function', function () {
     expect(ElementMeasurer).to.be.a('function');
   });
 
-  describe('constructor', () => {
-    it('"target" argument only document, Element or selector string.', () => {
+  describe('constructor', function () {
+    it('"target" argument only document, Element or selector string.', function () {
       // selector string.
-      let elmMeasurer = new ElementMeasurer('#test-target');
+      var elmMeasurer = new ElementMeasurer('#test-target');
       expect(elmMeasurer).to.be.instanceof(ElementMeasurer);
-      expect(elmMeasurer.isDocumentTarget()).to.equal(false);
+      expect(elmMeasurer.isDocumentTarget).to.equal(false);
 
       // document.
-      let docMeasurer = new ElementMeasurer(document);
+      var docMeasurer = new ElementMeasurer(document);
       expect(docMeasurer).to.be.instanceof(ElementMeasurer);
-      expect(docMeasurer.isDocumentTarget()).to.equal(true);
+      expect(docMeasurer.isDocumentTarget).to.equal(true);
 
       // wrong argument.
-      let wrongArg = () => new ElementMeasurer({});
+      var wrongArg = function () {
+        new ElementMeasurer({});
+      };
+
       expect(wrongArg).to.throw(TypeError);
     });
 
-    it('If given value is window, then target as document.documentElement.', () => {
-      let measuerer = new ElementMeasurer(window);
+    it('If given value is window, then target as document.documentElement.', function () {
+      var measuerer = new ElementMeasurer(window);
       expect(measuerer.target).to.equal(document.documentElement);
@@ -33,10 +36,11 @@ });
 
-  describe('#clientWidth and clientHeight', () => {
-    it('Document clientWidth is equal to window.innerWidth.', () => {
-      let docMeasurer = new ElementMeasurer(document);
+  describe('#clientWidth and clientHeight', function () {
+    it('Document clientWidth is equal to window.innerWidth.', function () {
+      var docMeasurer = new ElementMeasurer(document);
       expect(docMeasurer.clientWidth).to.equal(window.innerWidth);
     });
-    it('Element clientHeight is equal to Element.clientHeight.', () => {
-      let elmMeasurer = new ElementMeasurer('#test-target');
-      let elm = document.querySelector('#test-target');
+
+    it('Element clientHeight is equal to Element.clientHeight.', function () {
+      var elmMeasurer = new ElementMeasurer('#test-target');
+      var elm = document.querySelector('#test-target');
       expect(elmMeasurer.clientHeight).to.equal(elm.clientHeight);
@@ -46,6 +50,6 @@ });
 
-  describe('#scrollWidth and scrollHeight', () => {
-    it('scrollHeight is Element.scrollHeight.', () => {
-      let docMeasurer = new ElementMeasurer(document);
-      let html = document.documentElement;
+  describe('#scrollWidth and scrollHeight', function () {
+    it('scrollHeight is Element.scrollHeight.', function () {
+      var docMeasurer = new ElementMeasurer(document);
+      var html = document.documentElement;
       expect(docMeasurer.scrollHeight).to.equal(html.scrollHeight);
@@ -55,11 +59,11 @@ });
 
-  describe('#scrollTop and scrollLeft', () => {
-    it('doc scrollTop is equal to window.pageYOffset.', () => {
-      let docMeasurer = new ElementMeasurer(document);
+  describe('#scrollTop and scrollLeft', function () {
+    it('doc scrollTop is equal to window.pageYOffset.', function () {
+      var docMeasurer = new ElementMeasurer(document);
       expect(docMeasurer.scrollTop).to.equal(window.pageYOffset);
     });
 
-    it('elm scrollLeft is equal to Element.scrollLeft.', () => {
-      let elmMeasurer = new ElementMeasurer('#test-target');
-      let elm = document.querySelector('#test-target');
+    it('elm scrollLeft is equal to Element.scrollLeft.', function () {
+      var elmMeasurer = new ElementMeasurer('#test-target');
+      var elm = document.querySelector('#test-target');
       expect(elmMeasurer.scrollLeft).to.equal(elm.scrollLeft);
@@ -69,6 +73,6 @@ });
 
-  describe('#set scrollTop and set scrollLeft', () => {
+  describe('#set scrollTop and set scrollLeft', function () {
     it('If em.scrollTop set to em.scrollHeight + 200, '
-      + 'then em.scrollTop is maxScrollTop.', () => {
-      let em = new ElementMeasurer('#test-target');
+      + 'then em.scrollTop is maxScrollTop.', function () {
+      var em = new ElementMeasurer('#test-target');
       em.scrollTop = em.scrollHeight + 200;
@@ -79,5 +83,5 @@ expect(em.scrollTop).to.equal(em.maxScrollTop);
 
-  describe('#maxScrollTop and maxScrollLeft', () => {
-    it('maxScrollTop = scrollHeight - clientHeight', () => {
-      let e = new ElementMeasurer(document);
+  describe('#maxScrollTop and maxScrollLeft', function () {
+    it('maxScrollTop = scrollHeight - clientHeight', function () {
+      var e = new ElementMeasurer(document);
       expect(e.maxScrollTop).to.equal(e.scrollHeight - e.clientHeight);
@@ -84,0 +88,0 @@ });

No alert changes

Improved metrics

Total package byte prevSize

51334

increased by34.26%

Lines of code

750

increased by0.67%

Number of lines in readme file

39

increased by11.43%

No dependency changes