Nice pull to refresh behavior

This commit is contained in:
Max Lynch
2013-11-08 12:38:58 -06:00
parent 6070db9f42
commit f2ebba53f1
2 changed files with 40 additions and 8 deletions

24
dist/js/ionic.js vendored
View File

@ -2406,21 +2406,29 @@ window.ionic = {
return; return;
} }
this.x = scrollLeft;
this.y = scrollTop;
// Grab the refresher element if using Pull to Refresh // Grab the refresher element if using Pull to Refresh
if(this.hasPullToRefresh) { if(this.hasPullToRefresh) {
this._refresher = document.querySelector('.scroll-refresher'); this._refresher = document.querySelector('.scroll-refresher');
this._refresherHeight = parseFloat(this._refresher.firstElementChild.offsetHeight) || 100; this._refresherHeight = parseFloat(this._refresher.firstElementChild.offsetHeight) || 100;
// We always start the refresher hidden // We always start the refresher hidden
this._isRefresherHidden = true; if(this.y < 0) {
this._isRefresherHidden = true;
this._refresher.style.display = 'none';
} else {
this._isRefresherHidden = false;
this._refresher.style.display = 'block';
}
this._isHoldingRefresh = false;
if(this._refresher) { if(this._refresher) {
this._refresher.classList.remove('scroll-refreshing'); this._refresher.classList.remove('scroll-refreshing');
} }
} }
this.x = scrollLeft;
this.y = scrollTop;
this._drag = { this._drag = {
direction: 'v', direction: 'v',
pointX: e.gesture.touches[0].pageX, pointX: e.gesture.touches[0].pageX,
@ -2530,6 +2538,14 @@ window.ionic = {
// Update the new translated Y point of the container // Update the new translated Y point of the container
_this.el.style.webkitTransform = 'translate3d(' + newX + 'px,' + newY + 'px, 0)'; _this.el.style.webkitTransform = 'translate3d(' + newX + 'px,' + newY + 'px, 0)';
} else { } else {
_this._isHoldingRefresh = false;
// Hide the refresher
if(_this.refresher && !_this._isRefresherHidden) {
_this._refresher.style.display = 'none';
_this._isRefresherHidden = true;
}
// Update the new translated Y point of the container // Update the new translated Y point of the container
_this.el.style.webkitTransform = 'translate3d(' + newX + 'px,' + newY + 'px, 0)'; _this.el.style.webkitTransform = 'translate3d(' + newX + 'px,' + newY + 'px, 0)';
} }

View File

@ -497,21 +497,29 @@
return; return;
} }
this.x = scrollLeft;
this.y = scrollTop;
// Grab the refresher element if using Pull to Refresh // Grab the refresher element if using Pull to Refresh
if(this.hasPullToRefresh) { if(this.hasPullToRefresh) {
this._refresher = document.querySelector('.scroll-refresher'); this._refresher = document.querySelector('.scroll-refresher');
this._refresherHeight = parseFloat(this._refresher.firstElementChild.offsetHeight) || 100; this._refresherHeight = parseFloat(this._refresher.firstElementChild.offsetHeight) || 100;
// We always start the refresher hidden // We always start the refresher hidden
this._isRefresherHidden = true; if(this.y < 0) {
this._isRefresherHidden = true;
this._refresher.style.display = 'none';
} else {
this._isRefresherHidden = false;
this._refresher.style.display = 'block';
}
this._isHoldingRefresh = false;
if(this._refresher) { if(this._refresher) {
this._refresher.classList.remove('scroll-refreshing'); this._refresher.classList.remove('scroll-refreshing');
} }
} }
this.x = scrollLeft;
this.y = scrollTop;
this._drag = { this._drag = {
direction: 'v', direction: 'v',
pointX: e.gesture.touches[0].pageX, pointX: e.gesture.touches[0].pageX,
@ -621,6 +629,14 @@
// Update the new translated Y point of the container // Update the new translated Y point of the container
_this.el.style.webkitTransform = 'translate3d(' + newX + 'px,' + newY + 'px, 0)'; _this.el.style.webkitTransform = 'translate3d(' + newX + 'px,' + newY + 'px, 0)';
} else { } else {
_this._isHoldingRefresh = false;
// Hide the refresher
if(_this.refresher && !_this._isRefresherHidden) {
_this._refresher.style.display = 'none';
_this._isRefresherHidden = true;
}
// Update the new translated Y point of the container // Update the new translated Y point of the container
_this.el.style.webkitTransform = 'translate3d(' + newX + 'px,' + newY + 'px, 0)'; _this.el.style.webkitTransform = 'translate3d(' + newX + 'px,' + newY + 'px, 0)';
} }