ResizeObserverService

ResizeObserverService allows to use a single ResizeObserver instance for observing multiple elements to achieve better performance.

Why? Using multiple ResizeObserver instances can result in a noticeable performance penalty.

This service can be used to create any tools that can benefit from using a single centralized ResizeObserver. For example, you can create a modifier for handling Element's size changes: <div {{on-resize @onResize}} /> (the full example in the usage section).

It has good test coverage and is ready for production👍

Installation

ember install ember-resize-observer-service

If you need a ResizeObserver polyfill (caniuse.com):

ember install ember-resize-observer-polyfill

Usage

Service API

isEnabled

It is true if ResizeObserver is available, otherwise the service will ignore any method calls (e.g. in FastBoot environment).

observe(element, callback)

Initiates the observing of the provided element or adds an additional callback if the element is already observed.

Parameters

• element HTMLElement - An element which size changes we want to observe.
• callback function - A function that will be called whenever the size of the element changes. It is called with ResizeObserverEntry object for the given element.

unobserve(element [, callback ])

Ends the observing of the given element or just removes the provided callback.

It will unobserve the element if the callback is not provided or there are no more callbacks left for this element.

Parameters

• element HTMLElement - An element to unobserve or remove callback for.
• callback function? - A callback which will not respond to the element's size changes anymore.

clear()

Unobserve all observed elements.

Example

Here is a simplified example of {{on-resize}} modifier using the ResizeObserverService:

<div {{on-resize @onResize}}>
  Resize me
</div>

import Modifier from 'ember-modifier';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

export default class OnResizeModifier extends Modifier {
  @service resizeObserver;

  didInstall() {
    this.resizeObserver.observe(this.element, this.handleResize);
  }

  willRemove() {
    this.resizeObserver.unobserve(this.element, this.handleResize);
  }

  @action
  handleResize(...args) {
    let [callback] = this.args.positional;
    callback(...args);
  }
}

Related addons

• ember-resize-observer-component
• ember-on-resize-modifier
• ember-resize-observer-polyfill

Compatibility

• Ember.js v3.20 or above
• Ember CLI v3.20 or above
• Node.js v12 or above

• Modern browsers (for IE 11 install polyfill)

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.