A custom attribute for managing common element size observation and changes notification
npm install aurelia-content-size-attribute --save
- Standard process: pull, install and build
npm install npm run build
npm run test
Simplest form of plugin configuration:
// main.js
import { configure as configureContentSizeAttribute } from 'aurelia-content-size-attribute';
export function main(aurelia) {
aurelia
.use
.plugin(configureContentSizeAttribute)
// ...
}The plugin uses ResizeObserver, which is quite a new feature of the web,
which mean you may want to supply your own polyfill. Recommended polyfill at https://github.com/que-etc/resize-observer-polyfill . By default, the plugin uses the default ResizeObserver in global of PLATFORM, but you can override this by specifying it in 2nd parameter of plugin configuration:
// main.js
import { configure as configureContentSizeAttribute } from 'aurelia-content-size-attribute';
import ResizeObserver from 'resize-observer-polyfill';
export function main(aurelia) {
aurelia
.use
.plugin(configureContentSizeAttribute, { resizeObserver: ResizeObserver })
// ...
}Annotate any element that has its content size that needs to be observed with attribute content-size and bind command. like the following:
<!-- app.html -->
<template>
<div class='container' content-size.bind="containerSize">
</div>
</template>By default, the binding direction is from-view, which means only the custom attribute will notify the view model it resides in. (And the other direction doesn't make sense).
Sometimes in an application, it is desirable to be notified after dimension of an element has changed. There are many valid reasons for this: to adjust display, to reform functionalities. The causes are from many places: it could be because new content has been added to the element or some css effect / pseudo elements like :before & :after.
There is standard feature at ResizeObserver for this purpose. This plugin (read content-size attribute) is a convenient way to use the observer in an Aurelia application.