<commit_before># ember-infinite-scroller

<a href="http://emberobserver.com/addons/ember-infinite-scroller"><img src="http://emberobserver.com/badges/ember-infinite-scroller.svg"></a> &nbsp; <a href="https://david-dm.org/amk221/ember-infinite-scroller#badge-embed"><img src="https://david-dm.org/amk221/ember-infinite-scroller.svg"></a> &nbsp; <a href="https://david-dm.org/amk221/ember-infinite-scroller#dev-badge-embed"><img src="https://david-dm.org/amk221/ember-infinite-scroller/dev-status.svg"></a> &nbsp; <a href="https://codeclimate.com/github/amk221/ember-infinite-scroller"><img src="https://codeclimate.com/github/amk221/ember-infinite-scroller/badges/gpa.svg" /></a> &nbsp; <a href="http://travis-ci.org/amk221/ember-infinite-scroller"><img src="https://travis-ci.org/amk221/ember-infinite-scroller.svg?branch=master"></a>

This Ember addon provides a simple component that fires an action whenever it is scrolled to the bottom.
Allowing you to load more data. It is not coupled to Ember-Data like some other infinite scrolling implementations.

### Installation
```
ember install ember-infinite-scroller
```

### Example usage

```handlebars
{{#infinite-scroller on-load-more=(action 'loadMore') as |scroller|}}
  {{#each things as |thing|}}
    ...
  {{/each}}
  {{if scroller.isLoading 'Please wait...'}}
{{/infinite-scroller}}
```

#### With Ember-Data

```javascript
actions: {
  loadMore() {
    this.incrementProperty('page');
    return this.get('store').query('things', {
      page: this.get('page')
    }).then(things => {
      this.set('things', this.get('store').peekAll('thing'));
    });
  }
}
```

#### Without Ember-Data

```javascript
actions: {
  loadMore() {
    this.incrementProperty('page');
    return jQuery.ajax('/things', {
      data: {
        page: this.get('page')
      }
    }).then(things => {
      this.get('things').pushObjects(things);
    });
  }
}
```

## Configuration

Either make your component scrollable:

```css
.my-element {
  max-height: 300px;
  overflow: auto;
}
```

**OR**

Set `use-document=true` if your component is not scrollable.

```handlebars
{{#infinite-scroller use-document=true}}
  {{! action will fire when the document is scrolled to the bottom }}
{{/infinite-scroller}}
```

### Yielded API

The component will yield a hash that provides:

<table>
  <tr>
    <td>isLoading</td>
    <td>true when the promise for more data has not resolved yet</td>
  </tr>
  <tr>
    <td>error</td>
    <td>the caught error from the last attempt to load more</td>
  </tr>
</table><commit_msg>document loadMore<commit_after># ember-infinite-scroller

<a href="http://emberobserver.com/addons/ember-infinite-scroller"><img src="http://emberobserver.com/badges/ember-infinite-scroller.svg"></a> &nbsp; <a href="https://david-dm.org/amk221/ember-infinite-scroller#badge-embed"><img src="https://david-dm.org/amk221/ember-infinite-scroller.svg"></a> &nbsp; <a href="https://david-dm.org/amk221/ember-infinite-scroller#dev-badge-embed"><img src="https://david-dm.org/amk221/ember-infinite-scroller/dev-status.svg"></a> &nbsp; <a href="https://codeclimate.com/github/amk221/ember-infinite-scroller"><img src="https://codeclimate.com/github/amk221/ember-infinite-scroller/badges/gpa.svg" /></a> &nbsp; <a href="http://travis-ci.org/amk221/ember-infinite-scroller"><img src="https://travis-ci.org/amk221/ember-infinite-scroller.svg?branch=master"></a>

This Ember addon provides a simple component that fires an action whenever it is scrolled to the bottom.
Allowing you to load more data. It is not coupled to Ember-Data like some other infinite scrolling implementations.

### Installation
```
ember install ember-infinite-scroller
```

### Example usage

```handlebars
{{#infinite-scroller on-load-more=(action 'loadMore') as |scroller|}}
  {{#each things as |thing|}}
    ...
  {{/each}}
  {{if scroller.isLoading 'Please wait...'}}
{{/infinite-scroller}}
```

#### With Ember-Data

```javascript
actions: {
  loadMore() {
    this.incrementProperty('page');
    return this.get('store').query('things', {
      page: this.get('page')
    }).then(things => {
      this.set('things', this.get('store').peekAll('thing'));
    });
  }
}
```

#### Without Ember-Data

```javascript
actions: {
  loadMore() {
    this.incrementProperty('page');
    return jQuery.ajax('/things', {
      data: {
        page: this.get('page')
      }
    }).then(things => {
      this.get('things').pushObjects(things);
    });
  }
}
```

## Configuration

Either make your component scrollable:

```css
.my-element {
  max-height: 300px;
  overflow: auto;
}
```

**OR**

Set `use-document=true` if your component is not scrollable.

```handlebars
{{#infinite-scroller use-document=true}}
  {{! action will fire when the document is scrolled to the bottom }}
{{/infinite-scroller}}
```

### Yielded API

The component will yield a hash that provides:

<table>
  <tr>
    <td>isLoading</td>
    <td>true when the promise for more data has not resolved yet</td>
  </tr>
  <tr>
    <td>error</td>
    <td>the caught error from the last attempt to load more</td>
  </tr>
  <tr>
    <td>loadMore</td>
    <td>action for manually loading more</td>
  </tr>
</table>
{'fraction_non_alphanumeric': 0.18460057747834457, 'fraction_numerical': 0.01039461020211742, 'mean_word_length': 4.049562682215743, 'pattern_counts': {'":': 0, '<': 67, '<?xml version=': 0, '>': 71, 'https://': 14, 'lorem ipsum': 0, 'www.': 0, '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': '1100373', 'n_tokens_mistral': 1859, 'n_tokens_neox': 1774, 'n_words': 370}