Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

element-measurer

Package Overview
Dependencies
Maintainers
1
Versions
19
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

element-measurer - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

src/element-measurer.d.ts

19

CHANGELOG.md
# Changelog
All notable changes to this project will be documented in this file.

@@ -9,16 +10,32 @@

## [1.2.0] - 2018-01-24
### Changed
- Migrates to typescript. #3
### Deprecated
- Getter `.isDocumentTarget` is deprecated. instead use `.isDocument`.
## [1.1.0] - 2017-12-21
### Added
- Add method "getOffset()". #2
## [1.0.2] - 2017-12-12
### Changed
- Change ElementMeasurer.isDocumentTarget to getter.
## [1.0.0] - 2017-10-10
First release. [README.md](https://github.com/archco/element-measurer/blob/master/README.md)
[Unreleased]: https://github.com/archco/element-measurer/compare/v1.1.0...HEAD
[Unreleased]: https://github.com/archco/element-measurer/compare/v1.2.0...HEAD
[1.2.0]: https://github.com/archco/element-measurer/compare/v1.1.0...v1.2.0
[1.1.0]: https://github.com/archco/element-measurer/compare/v1.0.2...v1.1.0
[1.0.2]: https://github.com/archco/element-measurer/compare/v1.0.0...v1.0.2
[1.0.0]: https://github.com/archco/element-measurer/compare/361bfbb...v1.0.0

364

dist/element-measurer.js

@@ -1,3 +0,12 @@

window["ElementMeasurer"] =
/******/ (function(modules) { // webpackBootstrap
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["ElementMeasurer"] = factory();
else
root["ElementMeasurer"] = factory();
})(typeof self !== 'undefined' ? self : this, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache

@@ -69,233 +78,144 @@ /******/ var installedModules = {};

/* 0 */
/***/ (function(module, exports, __webpack_require__) {
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var ElementMeasurer = function () {
/**
* constructor
*
* @param {Element} [ target = document.documentElement ]
* @return {void}
*/
function ElementMeasurer() {
var target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document.documentElement;
_classCallCheck(this, ElementMeasurer);
this._isDocument = false;
this.setTarget(target);
}
// public
/**
* Returns inner width of an element in pixels.
*
* @return {Number}
*/
_createClass(ElementMeasurer, [{
key: 'setTarget',
/**
* Set target element.
*
* @param {Element|String|Window|Document} val
*/
value: function setTarget(val) {
if (val instanceof Element) {
this.target = val;
} else if (val === window || val === document) {
this.target = document.documentElement;
} else if (typeof val === 'string') {
this.target = document.querySelector(val);
} else {
throw new TypeError('Target value is not correct type.');
}
this._checkTarget();
return this;
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
var ElementMeasurer = /** @class */ (function () {
function ElementMeasurer(target) {
if (target === void 0) { target = document.documentElement; }
this.setTarget(target);
}
Object.defineProperty(ElementMeasurer.prototype, "isDocument", {
get: function () {
return this.target === document.documentElement
|| this.target === document.body;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ElementMeasurer.prototype, "isDocumentTarget", {
/** @deprecated use isDocument instead. */
get: function () {
return this.isDocument;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ElementMeasurer.prototype, "clientWidth", {
get: function () {
return this.isDocument
? window.innerWidth
: this.target.getBoundingClientRect().width;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ElementMeasurer.prototype, "clientHeight", {
get: function () {
return this.isDocument
? window.innerHeight
: this.target.getBoundingClientRect().height;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ElementMeasurer.prototype, "scrollTop", {
get: function () {
return this.isDocument ? window.pageYOffset : this.target.scrollTop;
},
set: function (val) {
if (this.isDocument) {
window.scrollTo(this.scrollLeft, val);
}
else {
this.target.scrollTop = val;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(ElementMeasurer.prototype, "scrollLeft", {
get: function () {
return this.isDocument ? window.pageXOffset : this.target.scrollLeft;
},
set: function (val) {
if (this.isDocument) {
window.scrollTo(val, this.scrollTop);
}
else {
this.target.scrollLeft = val;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(ElementMeasurer.prototype, "scrollWidth", {
get: function () {
return this.target.scrollWidth;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ElementMeasurer.prototype, "scrollHeight", {
get: function () {
return this.target.scrollHeight;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ElementMeasurer.prototype, "maxScrollTop", {
get: function () {
return this.scrollHeight - this.clientHeight;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ElementMeasurer.prototype, "maxScrollLeft", {
get: function () {
return this.scrollWidth - this.clientWidth;
},
enumerable: true,
configurable: true
});
ElementMeasurer.prototype.setTarget = function (val) {
if (val instanceof HTMLElement) {
this.target = val;
}
else if (val instanceof Element) {
this.target = val;
}
else if (val === window || val === document) {
this.target = document.documentElement;
}
else if (typeof val === 'string') {
this.target = document.querySelector(val);
}
else {
throw new TypeError('Target value is not correct type.');
}
return this;
};
/**
* Returns whether a target element is document or not.
*
* @return {Boolean}
*/
}, {
key: 'getOffset',
/**
* Returns top and left values that indicates offset distance to html document.
* @see https://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element#answer-442474
*
* @return {Object}
*/
value: function getOffset() {
var elm = this.target;
var top = 0;
var left = 0;
ElementMeasurer.prototype.getOffset = function () {
var elm = this.target;
var top = 0;
var left = 0;
while (elm && !isNaN(elm.offsetLeft) && !isNaN(elm.offsetTop)) {
left += elm.offsetLeft - elm.scrollLeft;
top += elm.offsetTop - elm.scrollTop;
elm = elm.offsetParent;
}
return { top: top, left: left };
};
return ElementMeasurer;
}());
/* harmony default export */ __webpack_exports__["default"] = (ElementMeasurer);
while (elm && !isNaN(elm.offsetLeft) && !isNaN(elm.offsetTop)) {
left += elm.offsetLeft - elm.scrollLeft;
top += elm.offsetTop - elm.scrollTop;
elm = elm.offsetParent;
}
return { top: top, left: left };
}
// private
}, {
key: '_checkTarget',
value: function _checkTarget() {
this._isDocument = this.target === document.documentElement || this.target === document.body;
}
}, {
key: 'clientWidth',
get: function get() {
return this._isDocument ? window.innerWidth : this.target.getBoundingClientRect().width;
}
/**
* Returns inner height of an element in pixels.
*
* @return {Number}
*/
}, {
key: 'clientHeight',
get: function get() {
return this._isDocument ? window.innerHeight : this.target.getBoundingClientRect().height;
}
/**
* Gets the number of pixels that an element's content is scrolled vertically.
*
* @return {Number}
*/
}, {
key: 'scrollTop',
get: function get() {
return this._isDocument ? window.pageYOffset : this.target.scrollTop;
}
/**
* Sets scrolled vertically.
*
* @param {Number} val
*/
,
set: function set(val) {
if (this._isDocument) {
window.scrollTo(this.scrollLeft, val);
} else {
this.target.scrollTop = val;
}
}
/**
* Gets the number of pixels that an element's content is scrolled to the left.
*
* @return {Number}
*/
}, {
key: 'scrollLeft',
get: function get() {
return this._isDocument ? window.pageXOffset : this.target.scrollLeft;
}
/**
* Sets scrolled to the left.
*
* @param {Number} val
*/
,
set: function set(val) {
if (this._isDocument) {
window.scrollTo(val, this.scrollTop);
} else {
this.target.scrollLeft = val;
}
}
/**
* Returns the width of the entire content of an element.
*
* @return {Number}
*/
}, {
key: 'scrollWidth',
get: function get() {
return this.target.scrollWidth;
}
/**
* Returns the height of the entire content of an element.
*
* @return {Number}
*/
}, {
key: 'scrollHeight',
get: function get() {
return this.target.scrollHeight;
}
/**
* Returns maximum top scroll offset possible for the element.
*
* @return {Number}
*/
}, {
key: 'maxScrollTop',
get: function get() {
return this.scrollHeight - this.clientHeight;
}
/**
* Returns maximum left scroll offset possible for the element.
*
* @return {Number}
*/
}, {
key: 'maxScrollLeft',
get: function get() {
return this.scrollWidth - this.clientWidth;
}
}, {
key: 'isDocumentTarget',
get: function get() {
this._checkTarget();
return this._isDocument;
}
}]);
return ElementMeasurer;
}();
exports.default = ElementMeasurer;
/***/ })
/******/ ]);
});
//# sourceMappingURL=element-measurer.js.map

@@ -1,1 +0,1 @@

window.ElementMeasurer=function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,e),o.l=!0,o.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}}(),o=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)}return this._checkTarget(),this}},{key:"getOffset",value:function(){for(var t=this.target,e=0,n=0;t&&!isNaN(t.offsetLeft)&&!isNaN(t.offsetTop);)n+=t.offsetLeft-t.scrollLeft,e+=t.offsetTop-t.scrollTop,t=t.offsetParent;return{top:e,left:n}}},{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=o}]);
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.ElementMeasurer=t():e.ElementMeasurer=t()}("undefined"!=typeof self?self:this,function(){return function(e){var t={};function o(r){if(t[r])return t[r].exports;var n=t[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,o),n.l=!0,n.exports}return o.m=e,o.c=t,o.d=function(e,t,r){o.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=0)}([function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e){void 0===e&&(e=document.documentElement),this.setTarget(e)}return Object.defineProperty(e.prototype,"isDocument",{get:function(){return this.target===document.documentElement||this.target===document.body},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"isDocumentTarget",{get:function(){return this.isDocument},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"clientWidth",{get:function(){return this.isDocument?window.innerWidth:this.target.getBoundingClientRect().width},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"clientHeight",{get:function(){return this.isDocument?window.innerHeight:this.target.getBoundingClientRect().height},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"scrollTop",{get:function(){return this.isDocument?window.pageYOffset:this.target.scrollTop},set:function(e){this.isDocument?window.scrollTo(this.scrollLeft,e):this.target.scrollTop=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"scrollLeft",{get:function(){return this.isDocument?window.pageXOffset:this.target.scrollLeft},set:function(e){this.isDocument?window.scrollTo(e,this.scrollTop):this.target.scrollLeft=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"scrollWidth",{get:function(){return this.target.scrollWidth},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"scrollHeight",{get:function(){return this.target.scrollHeight},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"maxScrollTop",{get:function(){return this.scrollHeight-this.clientHeight},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"maxScrollLeft",{get:function(){return this.scrollWidth-this.clientWidth},enumerable:!0,configurable:!0}),e.prototype.setTarget=function(e){if(e instanceof HTMLElement)this.target=e;else if(e instanceof Element)this.target=e;else if(e===window||e===document)this.target=document.documentElement;else{if("string"!=typeof e)throw new TypeError("Target value is not correct type.");this.target=document.querySelector(e)}return this},e.prototype.getOffset=function(){for(var e=this.target,t=0,o=0;e&&!isNaN(e.offsetLeft)&&!isNaN(e.offsetTop);)o+=e.offsetLeft-e.scrollLeft,t+=e.offsetTop-e.scrollTop,e=e.offsetParent;return{top:t,left:o}},e}();t.default=r}])});
{
"name": "element-measurer",
"version": "1.1.0",
"description": "The javascript class for measure size of DOM.",
"version": "1.2.0",
"description": "The javascript library class for measures size of Element.",
"main": "dist/element-measurer.js",
"module": "dist/element-measurer.mod.js",
"types": "src/element-measurer.d.ts",
"directories": {
"lib": "lib",
"test": "test"

@@ -31,15 +30,11 @@ },

"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"awesome-typescript-loader": "^3.4.1",
"chai": "^4.1.2",
"mocha": "^4.0.1",
"uglifyjs-webpack-plugin": "^1.1.4",
"webpack": "^3.10.0"
},
"babel": {
"presets": [
"env"
]
"source-map-loader": "^0.2.3",
"typescript": "^2.6.2",
"uglifyjs-webpack-plugin": "^1.1.6",
"webpack": "^3.10.0",
"webpack-notifier": "^1.5.1"
}
}
# ElementMeasurer
The javascript class for measure size of Element.
The javascript library class for measures size of Element.
## Install
```sh
``` sh
npm install element-measurer

@@ -10,11 +12,12 @@ ```

## Usage
```javascript
``` js
import ElementMeasurer from 'element-measurer';
// Measurement of Element.
// target: Element | 'selector' | document | window
// Measures on a element.
// target: HTMLElement | 'selector' | document | window
const targetSize = new ElementMeasurer('#target');
let max = targetSize.maxScrollTop; // get maxScrollTop.
// Measurement of Document.
// Measures on the whole Document.
const docSize = new ElementMeasurer(document);

@@ -29,2 +32,3 @@ docSize.scrollTop = 200; // set scrollTop.

### Properties
- clientWidth: `ReadOnly` Returns inner width of an element in pixels.

@@ -40,9 +44,11 @@ - clientHeight: `ReadOnly` Returns inner height of an element in pixels.

### Methods
#### setTarget
Set target element.
- Syntax
``` js
elementMeasurer.setTarget(target);
```
``` js
elementMeasurer.setTarget(target);
```
- Param `Element|String|Window|Document` target

@@ -52,11 +58,13 @@ - Return `ElementMeasurer`

#### getOffset
Returns top and left values that indicates offset distance to html document.
- Syntax
``` js
let obj = elementMeasurer.getOffset();
```
``` js
let obj = elementMeasurer.getOffset();
```
- Return `Object` { top, left }
## License
[MIT License](https://github.com/archco/element-measurer/blob/master/LICENSE)

@@ -15,3 +15,3 @@ var expect = window.chai.expect;

expect(elmMeasurer).to.be.instanceof(ElementMeasurer);
expect(elmMeasurer.isDocumentTarget).to.equal(false);
expect(elmMeasurer.isDocument).to.equal(false);

@@ -21,3 +21,3 @@ // document.

expect(docMeasurer).to.be.instanceof(ElementMeasurer);
expect(docMeasurer.isDocumentTarget).to.equal(true);
expect(docMeasurer.isDocument).to.equal(true);

@@ -24,0 +24,0 @@ // wrong argument.

const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const WebpackNotifierPlugin = require('webpack-notifier');
const jsRule = {
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env'],
},
module.exports = {
entry: {
'element-measurer': './src/element-measurer.ts',
'element-measurer.min': './src/element-measurer.ts',
},
};
const Library = {
entry: './lib/element-measurer.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'element-measurer.js',
filename: '[name].js',
library: 'ElementMeasurer',
libraryTarget: 'window',
libraryTarget: 'umd',
},
module: {
rules: [
jsRule,
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: 'awesome-typescript-loader',
},
{
test: /\.js$/,
use: 'source-map-loader',
enforce: 'pre',
},
],
},
resolve: {
extensions: ['.js', '.ts'],
},
plugins: [
new UglifyJsPlugin({
sourceMap: false,
include: /\.min\.js$/,
}),
new WebpackNotifierPlugin({
title: 'Webpack',
alwaysNotify: true,
sound: false,
}),
],
devtool: 'source-map',
};
const Minify = {
entry: './lib/element-measurer.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'element-measurer.min.js',
library: 'ElementMeasurer',
libraryTarget: 'window',
},
module: {
rules: [
jsRule,
],
},
plugins: [new UglifyJsPlugin()],
};
const Mod = {
entry: './lib/element-measurer.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'element-measurer.mod.js',
library: 'ElementMeasurer',
libraryTarget: 'umd',
},
module: {
rules: [
jsRule,
],
},
};
module.exports = [Library, Minify, Mod];

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc