javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 22:29:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Pull to refresh work for scroll #56

Browse Source
This commit is contained in:
Max Lynch
2013-11-07 17:38:33 -06:00
parent fd6f400ddd
commit d37ec6fca2
9 changed files with 230 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
js/ext/angular/src/directive/ionicContent.js vendored
View File

@ -56,5 +56,15 @@ angular.module('ionic.ui.content', [])
};
}
};
});
})
.directive('refresher', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<div class="scroll-refresher" ng-transclude></div>'
}
})
})();

15
js/ext/angular/test/content.html
View File

@ -35,6 +35,16 @@
-webkit-transition: .2s ease-in-out all;
-webkit-transform:translate3d(-100%,0,0);
}
.scroll-refresher {
background-color: #222;
}
#refresh-content {
color: #fff;
padding: 60px 0px;
text-align: center;
font-size: 30px;
}
</style>
</head>
@ -43,6 +53,11 @@
<header class="bar bar-header bar-success">
</header>
<content has-header="true" ng-controller="AppCtrl" class="reveal-animation">
<refresher>
<div id="refresh-content">
Refreshing
</div>
</refresher>
<ul class="list">
<li class="list-item" ng-repeat="item in items">asdf{{$index}}</li>
</ul>

135
js/views/listView.js
View File

@ -20,121 +20,6 @@
};
/**
* The Pull To Refresh drag operation handles the well-known
* "pull to refresh" concept seen on various apps. This lets
* the user indicate they want to refresh a given list by dragging
* down.
*
* @param {object} opts the options for the pull to refresh drag.
*/
var PullToRefreshDrag = function(opts) {
this.dragThresholdY = opts.dragThresholdY || 10;
this.onRefreshOpening = opts.onRefreshOpening || function() {};
this.onRefresh = opts.onRefresh || function() {};
this.onRefreshHolding = opts.onRefreshHolding || function() {};
this.el = opts.el;
};
PullToRefreshDrag.prototype = new DragOp();
PullToRefreshDrag.prototype.start = function(e) {
var content, refresher;
content = ionic.DomUtil.getParentOrSelfWithClass(e.target, 'list');
if(!content) { return; }
// Grab the refresher element that will show as you drag down
refresher = content.querySelector('.list-refresher');
if(!refresher) {
refresher = this._injectRefresher();
}
// Disable animations while dragging
refresher.classList.remove('list-refreshing');
this._currentDrag = {
refresher: refresher,
content: content,
isHolding: false
};
};
PullToRefreshDrag.prototype._injectRefresher = function() {
var refresher = document.createElement('div');
refresher.className = 'list-refresher';
this.el.insertBefore(refresher, this.el.firstChild);
return refresher;
};
PullToRefreshDrag.prototype.drag = function(e) {
var _this = this;
window.requestAnimationFrame(function() {
// We really aren't dragging
if(!_this._currentDrag) {
return;
}
// Check if we should start dragging. Check if we've dragged past the threshold,
// or we are starting from the open state.
if(!_this._isDragging && Math.abs(e.gesture.deltaY) > _this.dragThresholdY) {
_this._isDragging = true;
}
if(_this._isDragging) {
var refresher = _this._currentDrag.refresher;
var currentHeight = parseFloat(refresher.style.height);
refresher.style.height = e.gesture.deltaY + 'px';
var newHeight = parseFloat(refresher.style.height);
var firstChildHeight = parseFloat(refresher.firstElementChild.offsetHeight);
if(newHeight > firstChildHeight && !_this._currentDrag.isHolding) {
// The user is holding the refresh but hasn't let go of it
_this._currentDrag.isHolding = true;
_this.onRefreshHolding && _this.onRefreshHolding();
} else {
// Indicate what ratio of opening the list refresh drag is
var ratio = Math.min(1, newHeight / firstChildHeight);
_this.onRefreshOpening && _this.onRefreshOpening(ratio);
}
}
});
};
PullToRefreshDrag.prototype.end = function(e, doneCallback) {
var _this = this;
// There is no drag, just end immediately
if(!this._currentDrag) {
return;
}
var refresher = this._currentDrag.refresher;
var currentHeight = parseFloat(refresher.style.height);
refresher.style.height = e.gesture.deltaY + 'px';
var firstChildHeight = parseFloat(refresher.firstElementChild.offsetHeight);
if(currentHeight > firstChildHeight) {
//this.refreshing();
refresher.classList.add('list-refreshing');
refresher.style.height = firstChildHeight + 'px';
this.onRefresh && _this.onRefresh();
} else {
// Enable animations
refresher.classList.add('list-refreshing');
refresher.style.height = '0px';
this.onRefresh && _this.onRefresh();
}
this._currentDrag = null;
doneCallback && doneCallback();
};
var SlideDrag = function(opts) {
this.dragThresholdX = opts.dragThresholdX || 10;
@ -497,26 +382,6 @@
}
}
// Check if this is a "pull down" drag for pull to refresh
/*
else if(e.gesture.direction == 'down') {
this._dragOp = new PullToRefreshDrag({
el: this.el,
onRefresh: function() {
_this.onRefresh && _this.onRefresh();
},
onRefreshHolding: function() {
_this.onRefreshHolding && _this.onRefreshHolding();
},
onRefreshOpening: function(ratio) {
_this.onRefreshOpening && _this.onRefreshOpening(ratio);
}
});
this._dragOp.start(e);
}
*/
// Or check if this is a swipe to the side drag
else if((e.gesture.direction == 'left' || e.gesture.direction == 'right') && Math.abs(e.gesture.deltaX) > 5) {
this._dragOp = new SlideDrag({ el: this.el });

96
js/views/scrollView.js
View File

@ -29,6 +29,40 @@
toiletSeat: 'cubic-bezier(0.05, 0.60, 0.05, 0.60)'
};
/**
* The Pull To Refresh drag operation handles the well-known
* "pull to refresh" concept seen on various apps. This lets
* the user indicate they want to refresh a given list by dragging
* down.
*
* @param {object} opts the options for the pull to refresh drag.
*/
/*
var PullToRefreshDrag = function(opts) {
this.dragThresholdY = opts.dragThresholdY || 10;
this.onRefreshOpening = opts.onRefreshOpening || function() {};
this.onRefresh = opts.onRefresh || function() {};
this.onRefreshHolding = opts.onRefreshHolding || function() {};
this.el = opts.el;
};
PullToRefreshDrag.prototype.end = function(e, doneCallback) {
if(currentHeight > firstChildHeight) {
//this.refreshing();
} else {
// Enable animations
refresher.classList.add('list-refreshing');
refresher.style.height = '0px';
this.onRefresh && _this.onRefresh();
}
this._currentDrag = null;
doneCallback && doneCallback();
};
*/
ionic.views.Scroll = ionic.views.View.inherit({
initialize: function(opts) {
@ -46,6 +80,13 @@
scrollEventName: 'momentumScrolled',
scrollEndEventName: 'momentumScrollEnd',
hasPullToRefresh: true,
// Called as the refresher is opened, an amount is passed
onRefreshOpening: function() {},
// Called when let go and is refreshing
onRefresh: function() {},
// How frequently to fire scroll events in the case of
// a flick or momentum scroll where the finger is no longer
// touching the screen. If your event handler is a performance
@ -438,6 +479,12 @@
return;
}
// Grab the refresher element if using Pull to Refresh
if(this.hasPullToRefresh) {
this._refresher = document.querySelector('.scroll-refresher');
this._refresher.classList.remove('scroll-refreshing');
}
this.x = scrollLeft;
this.y = scrollTop;
@ -452,8 +499,6 @@
};
},
/**
* Process the drag event to move the item to the left or right.
*
@ -519,12 +564,10 @@
var newX = _this.x + deltaX;
var newY = _this.y + deltaY;
if(newX > 0 || (-newX + parentWidth) > totalWidth) {
// Rubber band
newX = _this.x + deltaX / _this.rubberBandResistance;
}
// Check if the dragging is beyond the bottom or top
if(newY > 0 || (-newY + parentHeight) > totalHeight) {
if(newY > 0) {
newY = _this.y + deltaY / _this.rubberBandResistance;
} else if ((-newY + parentHeight) > totalHeight) {
// Rubber band
newY = _this.y + deltaY / _this.rubberBandResistance;
}
@ -536,8 +579,25 @@
newY = 0;
}
// Update the new translated Y point of the container
_this.el.style.webkitTransform = 'translate3d(' + newX + 'px,' + newY + 'px, 0)';
if(_this._refresher && newY > 0) {
// We are pulling to refresh, so update the refresher
_this._refresher.style.height = newY + 'px';
var firstChildHeight = parseFloat(_this._refresher.firstElementChild.offsetHeight);
if(newY > firstChildHeight && !_this._isHoldingRefresh) {
_this._isHoldingRefresh = true;
// Trigger refresh holding event here
} else {
// Trigger refresh open amount
var ratio = Math.min(1, newY / firstChildHeight);
}
// Update the new translated Y point of the container
_this.el.style.webkitTransform = 'translate3d(' + newX + 'px,0, 0)';
} else {
// Update the new translated Y point of the container
_this.el.style.webkitTransform = 'translate3d(' + newX + 'px,' + newY + 'px, 0)';
}
// Store the last points
_this.x = newX;
@ -607,12 +667,28 @@
var time = 0;
var easing = '';
if(_this._refresher && _this.y > 0) {
// Pull to refresh
var firstChildHeight = parseFloat(_this._refresher.firstElementChild.offsetHeight);
if(Math.ceil(_this.y) >= firstChildHeight) {
// REFRESH
_this._refresher.classList.add('scroll-refreshing');
_this._refresher.style.height = firstChildHeight + 'px';
_this.onRefresh && _this.onRefresh();
} else {
_this._refresher.classList.add('scroll-refreshing');
_this._refresher.style.height = 0 + 'px';
_this.onRefresh && _this.onRefresh();
}
return;
}
var newX = Math.round(_this.x);
var newY = Math.round(_this.y);
_this._scrollTo(newX, newY);
// Check if we just snap back to bounds
if(_this.wrapScrollPosition(_this.bounceTime)) {
return;