Author: | BoxFactura |
---|---|
Views Total: | 2,628 views |
Official Page: | Go to website |
Last Update: | February 27, 2021 |
License: | MIT |
Preview:

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: '⇣', // The icon when the refresh is in progress. iconRefreshing: '…', // 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); }, // Which condition should be met for pullToRefresh to trigger? shouldPullToRefresh: function () { return !window.scrollY; }
Changelog:
02/27/2021
- v0.1.22: Bugfix
11/03/2020
- v0.1.21: Updated
11/09/2019
- v0.1.20: Fixed CSS selector
09/11/2018
- v0.1.19: shouldPTR defaults to !window.scrollY; tests and documentation on this use case; more security fixes
08/03/2018
- v0.1.18
05/08/2018
- v0.1.17
12/08/2018
- Fix bad-scope; cleanup
10/02/2018
- Build files and minor fixes
09/08/2018
- v0.1.14: minor fixes
Very excellent and easy to use plugin