<commit_before># Ember Infinite Scroller

Ember Infinite Scroller is a component that sits at the bottom of a page of content. It will
make a REST call to get more content when a user scrolls to the bottom.

## Installation

* Install addon `npm install ember-infinite-scroller --save-dev`
* Generate template and styles `ember g infinite-scroller`

## Implementation
Drop the infinite scroller component into any template. There is one required param: `contextController`.
In most cases it will be `this`.

```
{{infinite-scroller contextController=this}}
```

Other parameters are optional.

* `limit` default: 12

```
{{infinite-scroller  contextController=this limit=30}}
```

* `beginInfinite` default: `true`

Use `beginInfinite` to start or stop manually. For example:

Template:
```
<button {{action 'toggleBeginInfinite'}}>Begin</button>
{{infinite-scroller  contextController=this beginInfinite=beginInfinite}}
```

Controller:
```
actions: {
  toggleBeginInfinite: function() {
    this.toggleProperty('beginInfinite')
  }
}
```

* `content` default: the content of the contextController

The `content` can be customized if the content of the infinite scroller is not the model
of the controller.

```
{{infinite-scroller contextController=this content=otherModel}}
```

* `modelName` default: the name of the model of the content

If the infinite scroller should query a different model than the content of the content,
it can be overwritten.

For example, if the content model type is `'note'` but the query should be for `'comment'`:

```
{{infinite-scroller contextController=this modelName='comment'}}
```

* `query` default:
```
{model: this.get('modelName'), params: {}, callback: null}
```

The `query` has a required `modelName` and `params` and an optional `callback`.

```
{{infinite-scroller contextController=this query=query}}
```

Controller:
```
query: function() {
  var query = {
    model: 'post',
    params: {published: true}
    callback: function(posts) {
      // do cool things with posts when they come back.
    }
  }
  return query
}
```
<commit_msg>add blueprint description to readme<commit_after># Ember Infinite Scroller

Ember Infinite Scroller is a component that sits at the bottom of a page of content. It calls
`store.find` to get more content and pushes the content into a model when a user scrolls to
the bottom.

## Installation

* Install addon `npm install ember-infinite-scroller --save-dev`
* Generate template and styles `ember g infinite-scroller`

## Implementation
Drop the infinite scroller component into any template. There is one required param: `contextController`.
In most cases it will be `this`.

```
{{infinite-scroller contextController=this}}
```

Other parameters are optional.

* `limit` default: 12

```
{{infinite-scroller  contextController=this limit=30}}
```

* `beginInfinite` default: `true`

Use `beginInfinite` to start or stop manually. For example:

Template:
```
<button {{action 'toggleBeginInfinite'}}>Begin</button>
{{infinite-scroller  contextController=this beginInfinite=beginInfinite}}
```

Controller:
```
actions: {
  toggleBeginInfinite: function() {
    this.toggleProperty('beginInfinite')
  }
}
```

* `content` default: the content of the contextController

The `content` can be customized if the content of the infinite scroller is not the model
of the controller.

```
{{infinite-scroller contextController=this content=otherModel}}
```

* `modelName` default: the name of the model of the content

If the infinite scroller should query a different model than the content of the content,
it can be overwritten.

For example, if the content model type is `'note'` but the query should be for `'comment'`:

```
{{infinite-scroller contextController=this modelName='comment'}}
```

* `query` default:
```
{model: this.get('modelName'), params: {}, callback: null}
```

The `query` has a required `modelName` and `params` and an optional `callback`.

```
{{infinite-scroller contextController=this query=query}}
```

Controller:
```
query: function() {
  var query = {
    model: 'post',
    params: {published: true}
    callback: function(posts) {
      // do cool things with posts when they come back.
    }
  }
  return query
}
```

## Blueprint

The blueprint template comes with some handy features, including a `yield` that is
displayed when the infinite scroller is out of content.

```
{{infinite-scroller contextController=this}}
  <span>No more content!</span>
{{/infinite-scroller}}
```

It also includes a loading spnner When the scroller is fetching content, it displays a spinner.
The default is an image, but you can customize the css to change the spinner.
{'fraction_non_alphanumeric': 0.1119914346895075, 'fraction_numerical': 0.0017130620985010706, 'mean_word_length': 4.80248447204969, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 9, 'https://': 0, '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': '3536086', 'n_tokens_mistral': 1384, 'n_tokens_neox': 1327, 'n_words': 530}