Easy Pull To Refresh Library With Pure JavaScript – pulltorefresh.js

Category: Javascript , Loading , Recommended | December 7, 2016
Author: BoxFactura
Views Total: 659
Official Page: Go to website
Last Update: December 7, 2016
License: MIT

Preview:

Easy Pull To Refresh Library With Pure JavaScript – pulltorefresh.js

Description:

pulltorefresh.js is a lightweight, customizable JavaScript library that adds the pull to refresh (swipe to refresh) functionality to your webpages using pure JavaScript.

How to use it:

Download and include the pulltorefresh.js on your webpage.

<script src="pulltorefresh.js"></script>

Initialize the PullToRefresh with some options.

PullToRefresh.init({
  mainElement: '#main',
  onRefresh: function() { alert('refresh') }
});

Customize the trigger element.

PullToRefresh.init({
  mainElement: '#main',
  triggerElement: '.trigger',
  onRefresh: function() { alert('refresh') }
});

Promise support:

PullToRefresh.init({
  mainElement: '#main', // above which element?
  onRefresh: function(){
    var promise = new Promise(
      function(resolve, reject){
        setTimeout(()=>{
          resolve();
          alert('refresh');
        }, 1500);
      }
    );
    return promise;
  }
});

All default options.

// Minimum distance required to trigger the refresh
distTreshold: 60,

// Maximum distance possible for the element
distMax: 80,

// After the distTreshold is reached and released, the element will have this height
distReload: 50,

bodyOffset: 20,

// Before which element the pull to refresh elements will be
mainElement: 'body',

// Which element should trigger the pull to refresh
triggerElement: 'body',

// What class will the main element have?
ptrElement: '.ptr',

// What class prefix for the elements?
classPrefix: 'ptr--',

// What property will be used to calculate the element's proportions?
cssProp: 'min-height',

// The icon for both instructionsPullToRefresh and instructionsReleaseToRefresh
iconArrow: '&#8675;',

// The icon when the refresh is in progress.
iconRefreshing: '&hellip;',

// The initial instructions string.
instructionsPullToRefresh: 'Pull down to refresh',

// The instructions string when the distTreshold has been reached.
instructionsReleaseToRefresh: 'Release to refresh',

// The refreshing text.
instructionsRefreshing: 'Refreshing',

// The delay, in milliseconds before the onRefresh is triggered.
refreshTimeout: 500,

// The initialize function.
onInit: function () {},

// What will the pull to refresh trigger? You can return a promise. 
onRefresh: function () { return location.reload(); },

// The resistance function, accepts one parameter, must return a number, capping at 1.
resistanceFunction: function (t) { return Math.min(1, t / 2.5); },