# aurelia-resize

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

Latest version **1.1.2** (published 2017-04-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install aurelia-resize
pnpm add aurelia-resize
yarn add aurelia-resize
bun add aurelia-resize
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2017-04-19 |
| First published | 2016-10-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16 |
| Author | Meirion Huighes |
| Maintainers | meirionhughes |
| Keywords | aurelia, plugin, resize, event, layout |

## Links

- npm: https://www.npmjs.com/package/aurelia-resize
- Repository: https://github.com/MeirionHughes/aurelia-resize
- Issues: https://github.com/MeirionHughes/aurelia-resize/issues
- npm.io page: https://npm.io/package/aurelia-resize

## Dependencies (2)

- [aurelia-pal](https://npm.io/package/aurelia-pal.md) ^1.3.0
- [element-resize-detector](https://npm.io/package/element-resize-detector.md) ^1.1.10

## Alternatives

- [async-exit-hook](https://npm.io/package/async-exit-hook.md) — 3.7M weekly downloads
- [evnty](https://npm.io/package/evnty.md) — 7.2K weekly downloads
- [eleventy-plugin-asciidoc](https://npm.io/package/eleventy-plugin-asciidoc.md) — 3.5K weekly downloads
- [@jswork/next-get2get](https://npm.io/package/@jswork/next-get2get.md) — 945 weekly downloads
- [@dashersw/axon](https://npm.io/package/@dashersw/axon.md) — 934 weekly downloads

## Recent versions

- 1.1.2 (latest) — 2017-04-19
- 1.0.3-beta.4 (beta) — 2017-01-05
- 1.1.1 — 2017-04-19
- 1.1.0 — 2017-04-17
- 1.0.4 — 2017-01-25
- 1.0.3 — 2017-01-05
- 1.0.3-beta.3 — 2017-01-05
- 1.0.3-beta.2 — 2017-01-05
- 1.0.3-beta.1 — 2017-01-05
- 1.0.2 — 2016-11-15
- 1.0.1 — 2016-10-19

## README

# aurelia-resize

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

![example](https://cloud.githubusercontent.com/assets/3584509/25091546/b16f97e6-2381-11e7-93ba-05cefe91c839.gif)

view:
```html
<window>
  <div style="background-color:#6bb329" resizeable resize.trigger="onContentResize($event.detail)"></div>
  <h2>width: ${width}</h2>
  <h2>height: ${height}</h2>
</window>
```
view-model: 
```js
onContentResize(x) {
  this.width = x.width;
  this.height = x.height;
}
```

Dependencies
[element-resize-detector](https://www.npmjs.com/package/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``
```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
<div resizeable resize.trigger="foo($event.detail)">
 ```

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
<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: 

```html
<!--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>
```

```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;
  }
}
```

---
_Source: https://npm.io/package/aurelia-resize · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._