Add resizeObserver directive
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