Overview
Purpose: Allow components that want to perform layout based on their size to re-render when their size changes.
This mixin does its work at the beginning of the Elix render pipeline.
events ➞ methods → setState → render DOM → post-render
Expects the component to provide:
setState
method compatible withReactiveMixin
's setState.
Provides the component with:
[internal.state].clientHeight
and[internal.state].clientWidth
members that track the component'sclientHeight
andclientWidth
. Tracking these as state allows changes in size to trigger a re-render of the component.
This mixin can only guarantee results on browsers that support ResizeObserver
(as of 22 Mar 2018, only Google Chrome).
On other browsers, the mixin will check the component's size when it is first mounted and when it's finished rendering. It will also check the size if the window resizes. This can catch most cases, but is somewhat inefficient, and misses cases where a component changes size for reasons beyond the component's awareness (e.g., CSS finished loading, something else on the page changed that forced a change in the component's size).
Usage
import ResizeMixin from "elix/src/base/ResizeMixin.js";
class MyElement extends ResizeMixin(HTMLElement) {}
Example
CenteredStrip has custom layout logic that keeps the selected item centered when possible. Accordingly, CenteredStrip
uses ResizeMixin
so that, it can recalculate its layout if it changes size.
API
Used by classes CenteredStrip, PlainCenteredStrip, PlainCenteredStripHighlight, and PlainCenteredStripOpacity.