javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/driftyco/ionic

Browse Source
This commit is contained in:
Adam Bradley
2014-04-17 15:21:45 -05:00
parent 445d9420b6 fb5b65e33b
commit 715b7876ed
4 changed files with 90 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
js/angular/directive/infiniteScroll.js vendored
View File

@@ -93,13 +93,24 @@ IonicModule
return angular.isDefined($attrs.icon) ? $attrs.icon : 'ion-loading-d';
};
$scope.$on('scroll.infiniteScrollComplete', function() {
var onInfinite = function() {
$element[0].classList.add('active');
infiniteScrollCtrl.isLoading = true;
$scope.$parent && $scope.$parent.$apply($attrs.onInfinite || '');
}
var finishInfiniteScroll = function() {
$element[0].classList.remove('active');
$timeout(function() {
scrollView.resize();
}, 0, false);
infiniteScrollCtrl.isLoading = false;
};
$scope.$on('scroll.infiniteScrollComplete', function() {
finishInfiniteScroll();
});
$scope.$on('$destroy', function() {
scrollCtrl.$element.off('scroll', checkBounds);
});
@@ -116,11 +127,13 @@ IonicModule
var scrollValues = scrollView.getValues();
var maxScroll = infiniteScrollCtrl.getMaxScroll();
if(maxScroll.top === 0) {
return;
}
if ((maxScroll.left !== -1 && scrollValues.left >= maxScroll.left) ||
(maxScroll.top !== -1 && scrollValues.top >= maxScroll.top)) {
$element[0].classList.add('active');
infiniteScrollCtrl.isLoading = true;
$scope.$parent && $scope.$parent.$apply($attrs.onInfinite || '');
onInfinite();
}
}
}

31
js/views/scrollView.js
View File

@@ -946,28 +946,34 @@ ionic.views.Scroll = ionic.views.View.inherit({
if (helperElem.style[perspectiveProperty] !== undef) {
return function(left, top, zoom) {
return function(left, top, zoom, wasResize) {
content.style[transformProperty] = 'translate3d(' + (-left) + 'px,' + (-top) + 'px,0)';
self.__repositionScrollbars();
self.triggerScrollEvent();
if(!wasResize) {
self.triggerScrollEvent();
}
};
} else if (helperElem.style[transformProperty] !== undef) {
return function(left, top, zoom) {
return function(left, top, zoom, wasResize) {
content.style[transformProperty] = 'translate(' + (-left) + 'px,' + (-top) + 'px)';
self.__repositionScrollbars();
self.triggerScrollEvent();
if(!wasResize) {
self.triggerScrollEvent();
}
};
} else {
return function(left, top, zoom) {
return function(left, top, zoom, wasResize) {
content.style.marginLeft = left ? (-left/zoom) + 'px' : '';
content.style.marginTop = top ? (-top/zoom) + 'px' : '';
content.style.zoom = zoom || '';
self.__repositionScrollbars();
self.triggerScrollEvent();
if(!wasResize) {
self.triggerScrollEvent();
}
};
}
@@ -1010,7 +1016,7 @@ ionic.views.Scroll = ionic.views.View.inherit({
self.__resizeScrollbars();
// Refresh scroll position
self.scrollTo(self.__scrollLeft, self.__scrollTop, true);
self.scrollTo(self.__scrollLeft, self.__scrollTop, true, null, true);
},
@@ -1224,8 +1230,7 @@ ionic.views.Scroll = ionic.views.View.inherit({
* @param animate {Boolean} Whether the scrolling should happen using an animation
* @param zoom {Number} Zoom level to go to
*/
scrollTo: function(left, top, animate, zoom) {
scrollTo: function(left, top, animate, zoom, wasResize) {
var self = this;
// Stop deceleration
@@ -1293,7 +1298,7 @@ ionic.views.Scroll = ionic.views.View.inherit({
}
// Publish new values
self.__publish(left, top, zoom, animate);
self.__publish(left, top, zoom, animate, wasResize);
},
@@ -1745,7 +1750,7 @@ ionic.views.Scroll = ionic.views.View.inherit({
* @param top {Number} Top scroll position
* @param animate {Boolean} Whether animation should be used to move to the new coordinates
*/
__publish: function(left, top, zoom, animate) {
__publish: function(left, top, zoom, animate, wasResize) {
var self = this;
@@ -1781,7 +1786,7 @@ ionic.views.Scroll = ionic.views.View.inherit({
// Push values out
if (self.__callback) {
self.__callback(self.__scrollLeft, self.__scrollTop, self.__zoomLevel);
self.__callback(self.__scrollLeft, self.__scrollTop, self.__zoomLevel, wasResize);
}
}
@@ -1815,7 +1820,7 @@ ionic.views.Scroll = ionic.views.View.inherit({
// Push values out
if (self.__callback) {
self.__callback(left, top, zoom);
self.__callback(left, top, zoom, wasResize);
}
// Fix max scroll ranges

2
scss/_scaffolding.scss
View File

@@ -249,7 +249,7 @@ ion-infinite-scroll .scroll-infinite {
.scroll-infinite-content {
position: absolute;
bottom: 15px;
bottom: -1px;
left: 0;
width: 100%;
color: #666666;

54
test/html/infinite-scroll.html Normal file
View File

@@ -0,0 +1,54 @@
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Sample UL</title>
<link href="../../../../dist/css/ionic.css" rel="stylesheet">
<script src="../../../../dist/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-content>
<ion-list>
<ion-item ng-repeat="item in data.items">
{{item.title}}
</ion-item>
</ion-list>
<ion-infinite-scroll on-infinite="onInfinite()" distance="5px"></ion-infinite-scroll>
</ion-content>
<script>
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', ['$scope', function($scope) {
$scope.data = { items: [] };
var fetchItems = function() {
console.log('Pushing item');
$scope.data.items.push({
title: 'Item ' + $scope.data.items.length
});
$scope.$broadcast('scroll.infiniteScrollComplete');
};
$scope.onInfinite = function() {
fetchItems();
};
for(var i = 0; i < 10; i++) {
$scope.data.items.push({ title: 'Item ' + i });
}
}]);
</script>
</body>
</html>