pull2refresh/README.md

Pull to refresh library

Pull2Refresh (Pull To Refresh)
[![Build Status](https://travis-ci.org/kserin/pull2refresh.svg?branch=master)](https://travis-ci.org/kserin/pull2refresh)
[![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](https://tldrlegal.com/license/mit-license#summary)
====
A pull to refresh library without any dependency.

## Screenshot
![Example gif](example/example.gif)

Example available [here](https://github.com/kserin/pull2refresh/tree/master/example/example.html).

## Installation
```shell
npm install --save pull2refresh
```

## Usage
```html
<div class="content">
  <div class="pulltorefresh" style="display: none">
    <i class="fa fa-refresh fa-2x" aria-hidden="true"></i>
  </div>

  <h1>Pull down to refresh</h1>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

<script type="text/javascript" src="pull2refresh.js"></script>
<script>
  var p2r = new pull2refresh({
    // Pullable content
    pullableElement: document.querySelector(".content"),

    // Block that will appear when pulling
    refreshElement: document.querySelector(".pulltorefresh"),

    // Refresh callback
    onRefresh: function() {
      console.log("refresh !");
      p2r.done();
    },

    // Pull callback
    onPull: function(ratio) {
      console.log("pull percentage: " + (ratio * 100));
    }
  });
</script>
```

## API
### Constructor
```javascript
var p2r = new pull2refresh({
  pullableElement,                        // Required. HTMLElement that can be pulled.
  refreshElement: HTMLElement;            // Required. HTLMElement that will appear during pull.
  onRefresh: () => void;                  // Required. Callback that will be called at the end of the pull.
  onPull?: (percentage: number) => void;  // Optionnal. Callback called during pull. A number between 0 and 1, representing the progression of the pull, is passed as argument of the callback.
  threshold?: number;                     // Optionnal. Threshold in pixel to reach to consider the pull finished. By default this threshold is the height of the refreshElement.
});
```

### done()
```javascript
p2r.done();
```
Function to call to indicate the refresh is done.
After calling this function, the `refreshElement` will be hidden and a new pull to refresh action can be done.

## Build
```shell
# Build js library and type.d.ts file
npm run build

# Build minified js library and type.d.ts file
npm run build:min
```

## Licence
pull2refresh is released under the [MIT license](https://tldrlegal.com/license/mit-license#summary).