aurelia-resize

an aurelia add-on that detects DOM-element resize events

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
aurelia-resize
1.1.25 years ago6 years agoMinified + gzip package size for aurelia-resize in KB

Readme

aurelia-resize
an aurelia attribute add-on that detects DOM-element resize events either via window-change or CSS-animation. example view: ```html

width: ${width}

height: ${height}

``` view-model: ```js 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": "../nodemodules/aurelia-resize/dist/amd", "main": "index" }, { "name": "element-resize-detector", "path": "../nodemodules/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` ```javascript export function configure(aurelia) { aurelia.use
.standardConfiguration()
.plugin('aurelia-resize');
``` in your view, add the resizeable attribute and bind to the resize event-handler ```html
``` In your view-model, add an event handler: ```javascript 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. ```html
```

Canvas

one use of this is to resize a canvas so it fits a div: ```html
<canvas ref=elmt></canvas>
``` ```ts //widget.ts @customElement("widget") export class WidgetCustomElement { elmt:HTMLCanvasElement; resize(data){
this.elmt.width = data.width;
this.elmt.height = data.height;
} } ``` ```scss //widget.scss widget { div {
padding: 0;
margin: 0;
display: block;
} canvas {
padding: 0;
margin: 0;
display: block;
} } ```