├── .gitignore
├── README.md
├── index.js
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 | npm-debug.log
4 | .DS_Store
5 | package-lock.json
6 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # simple-element-resize-detector [![NPM](https://img.shields.io/npm/v/simple-element-resize-detector.svg?style=flat)](https://www.npmjs.org/package/simple-element-resize-detector)
 2 | 
 3 | 
 4 | Observes resizing of an element using a hidden iframe.
 5 | 
 6 | [**JSFiddle Demo**](https://jsfiddle.net/developit/62Lgh3wz/)
 7 | 
 8 | ## Installation
 9 | 
10 | ```sh
11 | npm i -S simple-element-resize-detector
12 | ```
13 | 
14 | 
15 | ## Usage
16 | 
17 | ```js
18 | import observeResize from 'simple-element-resize-detector';
19 | 
20 | // any DOM element that can have children
21 | let element = document.createElement('div');
22 | 
23 | // listen for resize
24 | observeResize(element, () => {
25 | 	console.log('new size: ', {
26 | 		width: element.clientWidth,
27 | 		height: element.clientHeight
28 | 	});
29 | });
30 | ```
31 | 
32 | To stop observing resize events, simply remove the returned detector frame:
33 | 
34 | ```js
35 | let detector = observeResize(el, () => {});
36 | 
37 | detector.remove();
38 | 
39 | // or, for better browser compatibility:
40 | // detector.parentNode.removeChild(detector)
41 | ```
42 | 
43 | ## Notes
44 | 
45 | * `element` passed to `observeResize()` must have `position: relative` style to be correctly observed, otherwise nearest relative ancestor will be observed instead.
46 | * This library uses `<iframe>`s to detect when an element resizes. `<iframe>`s are heavy objects are usually take good amount of memory. Be careful and don't abuse it.
47 | 
48 | ## License
49 | 
50 | MIT
51 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | const CSS = `position:absolute;left:0;top:-100%;width:100%;height:100%;margin:1px 0 0;border:none;opacity:0;pointer-events:none;`;
 2 | 
 3 | export default (element, handler) => {
 4 | 	const frame = document.createElement('iframe');
 5 | 	const supportsPE = document.documentMode < 11 && 'pointerEvents' in frame.style;
 6 | 
 7 | 	frame.style.cssText = `${CSS}${supportsPE ? '' : 'visibility:hidden;'}`;
 8 | 	frame.onload = () => {
 9 | 		frame.contentWindow.onresize = () => {
10 | 			handler(element);
11 | 		};
12 | 	};
13 | 	element.appendChild(frame);
14 | 	return frame;
15 | };
16 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "simple-element-resize-detector",
 3 |   "amdName": "simpleElementResizeDetector",
 4 |   "version": "1.3.0",
 5 |   "description": "Observes resizing of an element using a hidden iframe.",
 6 |   "main": "dist/simple-element-resize-detector.js",
 7 |   "umd:main": "dist/simple-element-resize-detector.js",
 8 |   "module": "dist/simple-element-resize-detector.module.js",
 9 |   "source": "index.js",
10 |   "scripts": {
11 |     "build": "microbundle -f es,umd",
12 |     "test": "eslint src test",
13 |     "prepublish": "npm run -s build && npm t",
14 |     "release": "npm run -s build && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish"
15 |   },
16 |   "files": [
17 |     "index.js",
18 |     "dist"
19 |   ],
20 |   "eslintConfig": {
21 |     "extends": "developit"
22 |   },
23 |   "keywords": [
24 |     "element resize",
25 |     "resize observer",
26 |     "ResizeObserver",
27 |     "element size"
28 |   ],
29 |   "repository": "developit/simple-element-resize-detector",
30 |   "author": "Jason Miller <jason@developit.ca>",
31 |   "license": "MIT",
32 |   "devDependencies": {
33 |     "eslint": "^4.19.1",
34 |     "eslint-config-developit": "^1.1.1",
35 |     "microbundle": "^0.11.0"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------