34 | Installation
35 | Install the package from npm.
36 |
37 |
38 | npm i @juggle/resize-observer
39 |
40 |
41 | Once installed, you can import it like any other module.
42 |
43 |
44 | import { ResizeObserver } from '@juggle/resize-observer';
45 |
46 |
47 | Usage
48 |
49 |
50 | import { ResizeObserver } from '@juggle/resize-observer';
51 |
52 | const ro = new ResizeObserver((entries, observer) => {
53 | for (let entry of entries) {
54 | const { inlineSize, blockSize } = entry.contentBoxSize;
55 | const { width, height } = entry.contentRect; // use for backwards compatibility
56 | entry.target.innerText = `${inlineSize} x ${blockSize}`;
57 | }
58 | });
59 |
60 | ro.observe(someElement);
61 |
62 |
63 |
64 | Pseudo Classes
65 | The library supports user-actioned pseudo classes, like :hover, :active,
66 | :focus
67 | Hover, click or focus me.
68 | Animations*
69 | The library will detect changes which occur during animations.
70 | Tap me.
71 | Transitions*
72 | The library will detect changes which occur during transition.
73 | Tap me.
74 | NB: Slow-starting transitions may not be noticed, unless, other interactions occur in the
75 | application. Any missed calculations will be noticed at the end of the transition.
76 | Performance Test
77 | This animates 200 elements and counts the changes. To start/stop the animation, tap the cell area.
78 | Updates: 0
79 |
80 |
81 | *Once the animation, or, transition has finished, the
82 | observer will sleep and wait for the next interaction. This keeps CPU idle, reducing battery consumption on
83 | portable devices.
84 |
85 |
86 |
87 |
88 |
89 |
90 |
--------------------------------------------------------------------------------
/docs/src/page.css:
--------------------------------------------------------------------------------
1 | html {
2 | height: 100%;
3 | font-family: Heebo,sans-serif;
4 | font-size: 12pt;
5 | font-weight: 300;
6 | background: #f3f3f6;
7 | color: #454548
8 | }
9 |
10 | body {
11 | margin: 0 auto;
12 | padding: 40px;
13 | max-width: 900px
14 | }
15 |
16 | :focus {
17 | outline-color: #f35
18 | }
19 |
20 | h1,h2,h3,h4,h5,h6 {
21 | font-weight: 400
22 | }
23 |
24 | h1 {
25 | font-size: 40pt;
26 | line-height: 1
27 | }
28 |
29 | h2 {
30 | margin: 50px 0 0
31 | }
32 |
33 | hr {
34 | margin: 50px 0 20px;
35 | border: none;
36 | height: 1px;
37 | background: rgba(0,0,0,.2)
38 | }
39 |
40 | header {
41 | display: flex;
42 | flex-flow: row wrap;
43 | align-items: center;
44 | justify-content: space-between
45 | }
46 |
47 | header h1 {
48 | margin: 0
49 | }
50 |
51 | header a {
52 | flex: 0 0 auto;
53 | margin: 20px 0
54 | }
55 |
56 | header div {
57 | flex: 1 1 100%
58 | }
59 |
60 | pre code.hljs {
61 | padding: 0 1em;
62 | box-shadow: inset 0 0 4px rgba(0,0,0,.3);
63 | background: #fff
64 | }
65 |
66 | [resize],
67 | #performance-example div {
68 | min-width: 100px;
69 | min-height: 100px;
70 | height: 100px;
71 | position: relative;
72 | white-space: nowrap;
73 | background: #f35;
74 | color: #fff;
75 | display: flex;
76 | flex-direction: column;
77 | justify-content: center;
78 | align-items: center;
79 | margin: 20px auto;
80 | user-select: none;
81 | box-sizing: border-box;
82 | background-clip: content-box;
83 | border: 0 solid rgba(0,0,0,.2);
84 | cursor: pointer
85 | }
86 |
87 | [resize]:after {
88 | content: attr(dimensions);
89 | font-weight: 400;
90 | padding: 2px 5px 0
91 | }
92 |
93 | #pseudo-example:focus,#pseudo-example:hover {
94 | border-width: 0
95 | }
96 |
97 | #pseudo-example:active {
98 | border-width: 5px
99 | }
100 |
101 | #transition-example {
102 | transition: border-width 1s ease
103 | }
104 |
105 | #transition-example[fill] {
106 | border-width: 0
107 | }
108 |
109 | #animation-example {
110 | animation: fill-in-out 1s infinite alternate;
111 | animation-play-state: paused
112 | }
113 |
114 | #animation-example[animate] {
115 | animation-play-state: running
116 | }
117 |
118 | #performance-example {
119 | display: flex;
120 | flex-flow: row wrap;
121 | animation: squeeze-in-out 1s infinite alternate;
122 | animation-play-state: paused;
123 | width: 100%;
124 | margin: 0;
125 | font-size: 50%;
126 | cursor: pointer
127 | }
128 |
129 | #performance-example:hover {
130 | outline: 1px solid #f35
131 | }
132 |
133 | #performance-example[animate] {
134 | animation-play-state: running
135 | }
136 |
137 | #performance-example div {
138 | margin: 2px;
139 | flex: 1 1 auto;
140 | min-width: 0;
141 | min-height: 10px;
142 | width: calc(5% - 4px);
143 | height: auto
144 | }
145 |
146 | .interactive-example {
147 | border-width: 0 20vw
148 | }
149 |
150 | @media (min-width: 900px) {
151 | .interactive-example {
152 | border-width:0 200px
153 | }
154 | }
155 |
156 | @keyframes fill-in-out {
157 | to {
158 | border-width: 0
159 | }
160 | }
161 |
162 | @keyframes squeeze-in-out {
163 | to {
164 | width: 50%
165 | }
166 | }
167 |
--------------------------------------------------------------------------------
/docs/src/page.js:
--------------------------------------------------------------------------------
1 | import 'core-js/features/symbol';
2 | import 'core-js/features/array/from';
3 | import 'core-js/features/dom-collections/iterator';
4 | import { ResizeObserver } from '../../lib/ResizeObserver';
5 |
6 | window.ResizeObserver = ResizeObserver; // Override global so that people can play :)
7 |
8 | const perfArea = document.getElementById('performance-example');
9 | const perfFragment = document.createDocumentFragment();
10 | const perfCount = document.getElementById('performance-count');
11 | let ticks = 0;
12 |
13 | const ro = new ResizeObserver(entries => {
14 | entries.forEach(entry => {
15 | if (entry.target.parentElement === perfArea) {
16 | ticks += 1;
17 | perfCount.innerText = ticks;
18 | return;
19 | }
20 | const { inlineSize, blockSize } = entry.contentBoxSize[0];
21 | entry.target.setAttribute('dimensions', `${Math.round(inlineSize)} x ${Math.round(blockSize)}`);
22 | });
23 | });
24 |
25 | [...document.querySelectorAll('pre, code')].forEach(el => {
26 | el.innerHTML = el.innerHTML.trim();
27 | });
28 |
29 | const perfEls = [];
30 |
31 | for (let i = 0; i < 200; i += 1) {
32 | const el = document.createElement('div');
33 | perfEls.push(el);
34 | perfFragment.appendChild(el);
35 | }
36 |
37 | perfArea.appendChild(perfFragment);
38 |
39 | if (!('toggleAttribute' in HTMLElement.prototype)) {
40 | HTMLElement.prototype.toggleAttribute = function (attr) {
41 | if (this.hasAttribute(attr)) {
42 | this.removeAttribute(attr);
43 | return false;
44 | }
45 | this.setAttribute(attr, '');
46 | return true;
47 | }
48 | }
49 |
50 | perfArea.addEventListener('click', function () {
51 | const animating = this.toggleAttribute('animate');
52 | perfEls.forEach(el => animating ? ro.observe(el) : ro.unobserve(el));
53 | });
54 |
55 | document.getElementById('transition-example').addEventListener('click', function () {
56 | this.toggleAttribute('fill');
57 | });
58 |
59 | document.getElementById('animation-example').addEventListener('click', function () {
60 | this.toggleAttribute('animate');
61 | });
62 |
63 | [...document.querySelectorAll('[resize]')].forEach(el => ro.observe(el));
64 |
--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | preset: 'ts-jest',
3 | testEnvironment: 'jsdom',
4 | reporters: [
5 | 'default',
6 | 'jest-junit'
7 | ],
8 | collectCoverageFrom: [
9 | 'src/**/*.ts',
10 | '!src/exports/*.ts'
11 | ]
12 | };
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@juggle/resize-observer",
3 | "version": "3.3.1",
4 | "description": "Polyfills the ResizeObserver API and supports box size options from the latest spec",
5 | "main": "lib/exports/resize-observer.umd.js",
6 | "module": "lib/exports/resize-observer.js",
7 | "types": "lib/exports/resize-observer.d.ts",
8 | "files": [
9 | "lib/**/*.{js,ts}"
10 | ],
11 | "scripts": {
12 | "build": "rm -rf lib && npm run build:esm && npm run build:umd",
13 | "build:esm": "tsc",
14 | "build:umd": "rollup -c",
15 | "build:docs": "echo 'no longer building docs for this version'",
16 | "ci-tests": "npm test -- --ci --runInBand && cat coverage/lcov.info | coveralls",
17 | "test": "npm run lint && jest --coverage",
18 | "lint": "eslint '{src,test}/**/*.ts'",
19 | "preVersion": "npm run build-docs",
20 | "prepublishOnly": "npm run build"
21 | },
22 | "repository": {
23 | "type": "git",
24 | "url": "git+ssh://git@github.com/juggle/resize-observer.git"
25 | },
26 | "keywords": [
27 | "ResizeObserver",
28 | "polyfill",
29 | "ponyfill",
30 | "event",
31 | "resize",
32 | "observer",
33 | "typescript",
34 | "javascript",
35 | "element",
36 | "component",
37 | "container",
38 | "queries",
39 | "web components",
40 | "front-end",
41 | "html",
42 | "Angular",
43 | "React",
44 | "Vue"
45 | ],
46 | "author": "Juggle",
47 | "license": "Apache-2.0",
48 | "bugs": {
49 | "url": "https://github.com/juggle/resize-observer/issues"
50 | },
51 | "homepage": "https://juggle.studio/resize-observer/",
52 | "devDependencies": {
53 | "@types/jest": "^28.1.7",
54 | "@typescript-eslint/eslint-plugin": "^5.33.1",
55 | "@typescript-eslint/parser": "^5.33.1",
56 | "core-js": "^3.24.1",
57 | "coveralls": "^3.1.1",
58 | "cssnano": "^5.1.13",
59 | "eslint": "^8.22.0",
60 | "jest": "^28.1.3",
61 | "jest-cli": "^28.1.3",
62 | "jest-environment-jsdom": "^28.1.3",
63 | "jest-junit": "^14.0.0",
64 | "jsdom": "^20.0.0",
65 | "rollup": "^2.78.0",
66 | "ts-jest": "^28.0.8",
67 | "typescript": "^4.7.4"
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | input: 'lib/exports/resize-observer.js',
3 | output: {
4 | file: 'lib/exports/resize-observer.umd.js',
5 | format: 'umd',
6 | name: 'ResizeObserver'
7 | }
8 | };
--------------------------------------------------------------------------------
/src/DOMRectReadOnly.ts:
--------------------------------------------------------------------------------
1 | import { freeze } from './utils/freeze';
2 |
3 | interface Rectangle {
4 | readonly x: number;
5 | readonly y: number;
6 | readonly width: number;
7 | readonly height: number;
8 | }
9 |
10 | type DOMRectJSON = {
11 | x: number,
12 | y: number,
13 | top: number,
14 | right: number,
15 | bottom: number,
16 | left: number,
17 | width: number,
18 | height: number,
19 | }
20 |
21 | /**
22 | * Implementation of DOMRectReadOnly.
23 | * Native DOMRectReadOnly is not available in all browsers.
24 | */
25 | class DOMRectReadOnly {
26 | public readonly x: number;
27 | public readonly y: number;
28 | public readonly width: number;
29 | public readonly height: number;
30 | public readonly top: number;
31 | public readonly left: number;
32 | public readonly bottom: number;
33 | public readonly right: number;
34 | public constructor (x: number, y: number, width: number, height: number) {
35 | this.x = x;
36 | this.y = y;
37 | this.width = width;
38 | this.height = height;
39 | this.top = this.y;
40 | this.left = this.x;
41 | this.bottom = this.top + this.height;
42 | this.right = this.left + this.width;
43 | return freeze(this);
44 | }
45 | public toJSON (): DOMRectJSON {
46 | const { x, y, top, right, bottom, left, width, height } = this;
47 | return { x, y, top, right, bottom, left, width, height };
48 | }
49 | public static fromRect (rectangle: Rectangle): Readonly
3 | 
9 | 
10 | 
11 | 
12 | 