Skip to content

Add resizeObserver directive

David Pisek requested to merge 366-add-resize-observer-directive into master

What does this MR do

It adds a directive that uses a ResizeObserver to detect if an element's dimensions are changing. This approach has advantages over listening to window.resize:

  • Using window.resize can be wasteful as a change in the viewport's dimensions does not necessarily effect the element of interest
  • Updates to the DOM may change the layout and dimensions of elements but this does not get picked up by window.resize

Implementation Details

The directive instantiates a ResizeObserver and subscribes the given DOM-element to be observed.

The directive takes a callback, which will receive the contentRect passed in by the ResizeObserver. (https://drafts.csswg.org/resize-observer/#resize-observer-entry-interface)

Note: To cover all supported browsers it uses a polyfill for ResizeObserver.

Example Usage

<div v-gl-resize-observer="resizeHandler">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
Edited by David Pisek

Merge request reports