<commit_before># aurelia-resize-plugin

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

[Detection code by <NAME>](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/)

Install with jspm
```
jspm install aurelia-resize=github:meirionhughes/aurelia-resize-plugin@0.2.0
```

Use the plug-in in your `main.js``
```javascript
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .plugin('aurelia-resize');
```

In your view-model, add an event handler:

```javascript
resizeListener = (width, height) => {
    console.log("width=" + width);
    console.log("height=" + height);
  }
```

in your view, add the attribute and bind to your handler

```html
<div resize-event="handler.bind:resizeListener">
 ```

you can throttle...

```html
<div resize-event="handler.bind:resizeListener; throttle:250 ">
 ```

... or debounce

 ```html
 <div resize-event="handler.bind:resizeListener; debounce:500 ">
  ```

... both of which you can bind:

```html
<div resize-event="handler.bind:resizeListener; throttle.bind:somevalue ">
 ```

you should not use set both throttle and debounce; throttle will be selected before debounce.


<commit_msg>Remove reference to binding throttle<commit_after># aurelia-resize-plugin

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

[Detection code by <NAME>](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/)

Install with jspm
```
jspm install aurelia-resize=github:meirionhughes/aurelia-resize-plugin@0.2.0
```

Use the plug-in in your `main.js``
```javascript
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .plugin('aurelia-resize');
```

In your view-model, add an event handler:

```javascript
resizeListener = (width, height) => {
    console.log("width=" + width);
    console.log("height=" + height);
  }
```

in your view, add the attribute and bind to your handler

```html
<div resize-event="handler.bind:resizeListener">
 ```

you can throttle...

```html
<div resize-event="handler.bind:resizeListener; throttle:250 ">
 ```

... or debounce

 ```html
 <div resize-event="handler.bind:resizeListener; debounce:500 ">
  ```



{'fraction_non_alphanumeric': 0.14585115483319075, 'fraction_numerical': 0.01454234388366125, 'mean_word_length': 4.595693779904306, 'pattern_counts': {'":': 0, '<': 12, '<?xml version=': 0, '>': 14, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1607579', 'n_tokens_mistral': 804, 'n_tokens_neox': 736, 'n_words': 191}