This package contains two Polymer 3.0 elements:
plastic-resize-aware is a container element that fires an event when its size changes.
plastic-element-query is a non visual element that allows you to use CSS media query style
expressions as element queries to apply and remove CSS classes on a target element.
Please see the element resize-aware for a version that works with Polymer 1.0 or 2.0. The prior version does not include element queries.
Why and How
Sometimes you may need to take some action when the rendered size of an element changes. This element provides the something like the window resize event but for an individual element.
There are many reasons an element's size could change - CSS or class changes, content changes, content of other elements affecting the flow, viewport changes, etc.
plastic-resize-aware element uses a
ResizeObserver which is polyfilled if necessary (so no polling).
plastic-element-query element depends on a
plastic-resize-aware element for size detection. As the reference element changes size the element query gets compared to the new size.
npm install --save plastic-resize-aware
How to Use
any content that could have been in a div
The idea with this element is that there is a reference element which must be a
plastic-resize-aware element, who's size is monitored. There is also a target element
which can be the same as the reference element or a different element. The target element
is changed by modifying its
classList depending on the
queryExpression matching or
not matching the reference element's size.
In this example, the reference element and target element were not specified so both
default to the parent
When the width of the plastic-resize-aware element is at least 50em and the height is at least 40px, the classes bigfiz, bin and baz will be added to the plastic-resize-aware element. When that is no longer true, those classes will be removed.
When the width of the plastic-resize-aware element is at most 225px or the height is at most 20px, the class tinytext will be added to the plastic-resize-aware element. When that is no longer true, that class will be removed.
It is not necessary to locate the
plastic-resize-aware nor is it
required to apply the CSS modification to the
plastic-resize-aware element. The
attribute can be used to point to an instance of
plastic-resize-aware by id (string). In code
you can set
refElement to an id string or an element reference to a
Similarly the target for applying CSS classes does not have to be a parent
plastic-resize-aware or even
plastic-resize-aware at all. Use the
target-element attribute to specify an id or set in code to
an element reference.
plastic-element-query fires a
element-query-match event when the matching status
queryExpression changes. The event detail includes:
queryExpression: // the query expressionmatches: // boolean - new matching statustargetElement: // reference to the target elementclassList: // the list of class nameswidth: // width of the ref-elementheight: // height of the ref-element
Please submit issues via the github repository.
Contributions via a PR are welcome.