You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+15-26Lines changed: 15 additions & 26 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,9 +6,9 @@ ResizeObserver Polyfill
6
6
7
7
A polyfill for the Resize Observer API.
8
8
9
-
Implementation is based on the MutationObserver (no polling unless DOM changes) with a fall back to a continuous dirty checking cycle if the first one is not supported. Handles non-delayed CSS transitions/animations and can optionally observe resizing of a `<textarea>` element along with changes caused by the `:hover` pseudo-class.
9
+
Implementation is based on the MutationObserver (no polling unless DOM changes) with a fall back to a continuous dirty checking cycle if the first one is not supported. Doesn't modify observed elements. Handles non-delayed CSS transitions/animations and can optionally observe resizing of a `<textarea>` element along with changes caused by the `:hover` pseudo-class.
10
10
11
-
Compliant with the [spec](http://rawgit.com/WICG/ResizeObserver/master/index.html) and the native implementation. Doesn't contain any publicly available methods except for those described in spec. The size is _3.0kb_ when minified and gzipped.
11
+
Compliant with the [spec](http://rawgit.com/WICG/ResizeObserver/master/index.html) and the native implementation. The size is _3.0kb_ when minified and gzipped.
12
12
13
13
[Live demo](http://que-etc.github.io/resize-observer-polyfill) (has style problems in IE10 and lower).
14
14
@@ -43,7 +43,6 @@ Polyfill has been tested and known to work in the following browsers:
43
43
44
44
## Usage Examples
45
45
46
-
### Local export
47
46
It's recommended to use this library in the form of the [ponyfill](https://github.com/sindresorhus/ponyfill), which doesn't inflict modifications of the global object.
Package's main file is a ES5 [UMD](https://github.com/umdjs/umd) module and it will be dynamically substituted by the ES6 version for those bundlers that are aware of the [jnext:main](https://github.com/rollup/rollup/wiki/jsnext:main) or `module` fields, e.g. for [Rollup](https://github.com/rollup/rollup).
66
-
67
-
In case you want to specify which version to use, you can either take `resize-observer-polyfill/index` for ES6 modules or `resize-observer-polyfill/dist/ResizeObserver` for UMD.
68
-
69
-
### Global export
70
-
Use following versions if you want polyfill to extend global object.
71
-
72
-
ES6 module:
63
+
Though you always can extend the global object manually if you need it.
Package's main file is a ES5 [UMD](https://github.com/umdjs/umd) module and it will be dynamically substituted by the ES6 version for those bundlers that are aware of the [jnext:main](https://github.com/rollup/rollup/wiki/jsnext:main) or `module` fields, e.g. for [Rollup](https://github.com/rollup/rollup) or [Webpack 2](https://webpack.js.org/).
81
72
82
-
You can also take minified bundles: `ResizeObserver.min.js` or `ResizeObserver.global.min.js`.
73
+
**Note**: global versions (`index.global` and `dist/ResizeObserver.global`) and will be removed in the next major release.
83
74
84
75
## Configuration
85
76
86
77
`ResizeObserver` class additionally implements following static accessor property:
87
78
88
79
### continuousUpdates
89
80
90
-
By default things like resizing of a `<textarea>` element, changes caused by the CSS `:hover` pseudo-class and delayed CSS transitions are not tracked. To handle them you can set `ResizeObserver.continuousUpdates = true` which in turn will start a continuous update cycle which runs every `100` milliseconds (as a RAF callback, of course). Keep in mind that this is going to affect the performance.
81
+
By default things like resizing of a `<textarea>` element, changes caused by the CSS `:hover` pseudo-class and delayed CSS transitions are not tracked. To handle them you can set `ResizeObserver.continuousUpdates = true` which in turn will start a continuous update cycle which runs every `100` milliseconds (as a RAF callback). Keep in mind that this is going to affect the performance.
91
82
92
83
**NOTE:** changes made to this property affect all existing and future instances of ResizeObserver.
93
84
94
85
## Building and testing
95
86
96
-
First make sure that you have all dependencies installed by running `npm install`. Then you can execute following tasks either with a gulp CLI or with the `npm run gulp` command.
97
-
98
-
To build polyfill. This will create UMD bundles in the `dist` folder:
87
+
To build polyfill. Creates UMD bundle in the `dist` folder:
99
88
100
89
```sh
101
-
gulp build
90
+
npm run build
102
91
```
103
92
104
93
To run a code style test:
105
94
```sh
106
-
gulp test:lint
95
+
npm run test:lint
107
96
```
108
97
109
-
Functional tests for all available browsers defined in `karma.config.js` file:
98
+
Running unit tests:
110
99
```sh
111
-
gulp test:spec
100
+
npm run test:spec
112
101
```
113
102
114
103
To test in a browser that is not present in karmas' config file:
115
104
```sh
116
-
gulp test:spec:custom
105
+
npm run test:spec:custom
117
106
```
118
107
119
108
Testing against a native implementation:
120
109
```sh
121
-
gulp test:spec:native
110
+
npm run test:spec:native
122
111
```
123
112
124
113
**NOTE:** after you invoke `spec:native` and `spec:custom` commands head to the `http://localhost:9876/debug.html` page.
0 commit comments