ember-on-resize-modifier
v2.0.2
Modifier relying on a single ResizeObserver instance for better performance.
0/weekUpdated 3 days agoMITUnpacked: 11.7 KB
Published by Precision Nutrition Team
npm install ember-on-resize-modifier{{on-resize}} modifier
{{on-resize}} modifier allows to use [ResizeObserver][resize-observer] to respond to an element's size changes. It relies on a single [ResizeObserver][resize-observer] instance to achieve better performance (using multiple instances can result in a [noticeable performance penalty][performance-penalty]).
It has good test coverage and is ready for production👍
Installation
``
ember install ember-on-resize-modifier
If you need a [ResizeObserver polyfill][resize-observer-polyfill] ([caniuse.com][caniuse]):
`
ember install ember-resize-observer-polyfill
Usage
The
will be called:- when the element is inserted to the DOM
- whenever the size of the element changes
- when
element.style.display gets set to none (then all contentRect props will be 0)The
callback will be always called with the only argument wich is [ResizeObserverEntry][resize-observer-entry] object.Example
`hbs
Resize me
`js
@action
handleResize({ contentRect: { width, height } }) {
target.classList.toggle('large', width > 1200);
target.classList.toggle('portrait', height > width);
}
``Related addons
- [ember-resize-observer-component][resize-observer-component]
- [ember-resize-observer-service][resize-observer-service]
- [ember-resize-observer-polyfill][resize-observer-polyfill]
Compatibility
* Ember.js v3.20 or above
* Ember CLI v3.20 or above
* Node.js v12 or above
- [Modern browsers][caniuse] (for IE 11 install [polyfill][resize-observer-polyfill])
Contributing
See the Contributing guide for details.
License
This project is licensed under the MIT License.
[resize-observer]: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
[resize-observer-entry]: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry
[performance-penalty]: https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/z6ienONUb5A/F5-VcUZtBAAJ
[caniuse]: https://caniuse.com/#feat=resizeobserver
[resize-observer-component]: https://github.com/PrecisionNutrition/ember-resize-kitchen-sink/tree/main/packages/ember-resize-observer-component
[resize-observer-service]: https://github.com/PrecisionNutrition/ember-resize-kitchen-sink/tree/main/packages/ember-resize-observer-service
[resize-observer-polyfill]: https://github.com/PrecisionNutrition/ember-resize-observer-polyfill