aurelia-resize
v1.1.2
Published
an aurelia add-on that detects DOM-element resize events
Downloads
1,362
Maintainers
Readme
aurelia-resize
an aurelia attribute add-on that detects DOM-element resize events either via window-change or CSS-animation.
view:
<window>
<div style="background-color:#6bb329" resizeable resize.trigger="onContentResize($event.detail)"></div>
<h2>width: ${width}</h2>
<h2>height: ${height}</h2>
</window>
view-model:
onContentResize(x) {
this.width = x.width;
this.height = x.height;
}
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``
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.plugin('aurelia-resize');
in your view, add the resizeable
attribute and bind to the resize
event-handler
<div resizeable resize.trigger="foo($event.detail)">
In your view-model, add an event handler:
foo(detail){
console.log("width=" + detail.width);
console.log("height=" + detail.height);
console.log("old width=" + detail.widthOld);
console.log("old height=" + detail.heightOld);
}
you can also throttle, or debounce the events if you need to slow them down.
<div resizeable resize.trigger="foo($event.detail) & throttle:250">
<div resizeable resize.trigger="foo($event.detail) & debounce:500">
Canvas
one use of this is to resize a canvas so it fits a div:
<!--widget.html-->
<template>
<require from="./widget.css"></require>
<div id="host" resizeable resize.trigger="resize($event.detail) & throttle:500">
<canvas ref=elmt></canvas>
</div>
</template>
//widget.ts
@customElement("widget")
export class WidgetCustomElement {
elmt:HTMLCanvasElement;
resize(data){
this.elmt.width = data.width;
this.elmt.height = data.height;
}
}
//widget.scss
widget {
div {
padding: 0;
margin: 0;
display: block;
}
canvas {
padding: 0;
margin: 0;
display: block;
}
}