mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 22:29:44 +08:00
Pull to refresh work for scroll #56
This commit is contained in:
Max Lynch
13
dist/css/ionic.css
vendored
13
dist/css/ionic.css
vendored
@ -2243,6 +2243,14 @@ body, .ionic-body {
|
||||
-o-text-size-adjust: none;
|
||||
text-size-adjust: none; }
|
||||
|
||||
.scroll-refresher {
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
background-color: white; }
|
||||
|
||||
.scroll-refreshing {
|
||||
-webkit-transition: height 0.1s ease-in-out; }
|
||||
|
||||
.overflow-scroll {
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch; }
|
||||
@ -3487,11 +3495,6 @@ button.item-button-right:after {
|
||||
color: #222222;
|
||||
font-weight: bold; }
|
||||
|
||||
.list-refresher {
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
background-color: red; }
|
||||
|
||||
.card.list .list-item {
|
||||
padding-right: 1px;
|
||||
padding-left: 1px; }
|
||||
|
||||
12
dist/js/ionic-angular.js
vendored
12
dist/js/ionic-angular.js
vendored
@ -523,7 +523,17 @@ angular.module('ionic.ui.content', [])
|
||||
};
|
||||
}
|
||||
};
|
||||
});
|
||||
})
|
||||
|
||||
.directive('refresher', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
template: '<div class="scroll-refresher" ng-transclude></div>'
|
||||
}
|
||||
})
|
||||
|
||||
})();
|
||||
;
|
||||
(function() {
|
||||
|
||||
231
dist/js/ionic.js
vendored
231
dist/js/ionic.js
vendored
@ -1906,6 +1906,40 @@ window.ionic = {
|
||||
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) {
|
||||
@ -1923,6 +1957,13 @@ window.ionic = {
|
||||
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
|
||||
@ -2315,6 +2356,12 @@ window.ionic = {
|
||||
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;
|
||||
|
||||
@ -2329,8 +2376,6 @@ window.ionic = {
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Process the drag event to move the item to the left or right.
|
||||
*
|
||||
@ -2396,12 +2441,10 @@ window.ionic = {
|
||||
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;
|
||||
}
|
||||
@ -2413,8 +2456,25 @@ window.ionic = {
|
||||
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;
|
||||
@ -2484,12 +2544,28 @@ window.ionic = {
|
||||
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;
|
||||
@ -2653,121 +2729,6 @@ window.ionic = {
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 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;
|
||||
@ -3130,26 +3091,6 @@ window.ionic = {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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 });
|
||||
|
||||
12
js/ext/angular/src/directive/ionicContent.js
vendored
12
js/ext/angular/src/directive/ionicContent.js
vendored
@ -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>'
|
||||
}
|
||||
})
|
||||
|
||||
})();
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 });
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -37,17 +37,6 @@
|
||||
}
|
||||
|
||||
|
||||
// List Refresher
|
||||
// -------------------------------
|
||||
|
||||
.list-refresher {
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
background-color: red;
|
||||
}
|
||||
.list-refreshing {
|
||||
}
|
||||
|
||||
|
||||
// when its a card make sure it doesn't duplicate top and bottom borders
|
||||
.card.list .list-item {
|
||||
|
||||
@ -106,13 +106,24 @@ body, .ionic-body {
|
||||
-o-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
}
|
||||
// Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
|
||||
// Note: For these to work, content must come after both bars in the markup
|
||||
|
||||
// Scroll refresher (for pull to refresh)
|
||||
.scroll-refresher {
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
background-color: white;
|
||||
}
|
||||
.scroll-refreshing {
|
||||
-webkit-transition: height 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.overflow-scroll {
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
// Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
|
||||
// Note: For these to work, content must come after both bars in the markup
|
||||
.has-header {
|
||||
top: $bar-height;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user