WIP - Add resizeObserver component
What does this MR do
It adds a component that uses a ResizeObserver to detect if an element's size is 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 component adds a div
to the DOM, instantiates a ResizeObserver
and subscribes the div
to be observed.
The component emits a resize
event whenever the ResizeObserver
reports a change of the div
s dimensions. The data provided by the ResizeObserver
's notification gets passed on to the handler of the resize
event.
The component also includes a default slot so the div can be used as a wrapper. If the default slot is empty and the div
does have any content its tabindex
will be set to -1.
Note: To cover all supported browsers it uses a polyfill for ResizeObserver
.
Example Usage
<div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<resize-observer @resize="handleResizeEvent" />
</div>
Edited by David Pisek