aurelia-resize
an aurelia attribute add-on that detects DOM-element resize events either via window-change or CSS-animation.
view:
width: ${width} height: ${height}
view-model:
{ thiswidth = xwidth; thisheight = xheight;}
Dependencies element-resize-detector
Install (Aurelia CLI)
Install with npm:
npm install aurelia-resize --save
Add to your bundles:
{
"name": "aurelia-resize",
"path": "../node_modules/aurelia-resize/dist/amd",
"main": "index"
},
{
"name": "element-resize-detector",
"path": "../node_modules/element-resize-detector/dist",
"main": "element-resize-detector"
}
Install (JSPM)
jspm install npm:aurelia-resize
Install (Webpack 2)
Install with npm:
npm install aurelia-resize --save
Usage
Use the plug-in in your `main.js``
{ aureliause ;
in your view, add the resizeable
attribute and bind to the resize
event-handler
In your view-model, add an event handler:
{ console; console; console; console;}
you can also throttle, or debounce the events if you need to slow them down.
Canvas
one use of this is to resize a canvas so it fits a div:
<!--widget.html-->
//widget.ts
//widget.scss widget