Skip to content

Commit 2285c24

Browse files
mlynchmlynch
committed
Fixed #264 and #286 - snapping scroll
1 parent edeac33 commit 2285c24

File tree

6 files changed

+178
-171
lines changed

6 files changed

+178
-171
lines changed

‎dist/js/ionic-angular.js‎

Lines changed: 83 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -707,56 +707,58 @@ angular.module('ionic.ui.content', [])
707707

708708

709709
// Otherwise, supercharge this baby!
710-
sv = new ionic.views.Scroll({
711-
el: $element[0],
712-
scrollbarX: $scope.$eval($scope.scrollbarX) !== false,
713-
scrollbarY: $scope.$eval($scope.scrollbarY) !== false,
714-
scrollingX: $scope.$eval($scope.hasScrollX) == true,
715-
scrollingY: $scope.$eval($scope.hasScrollY) !== false,
716-
scrollEventInterval: parseInt($scope.scrollEventInterval, 10) || 20,
717-
scrollingComplete: function() {
718-
$scope.onScrollComplete({
719-
scrollTop: this.__scrollTop,
720-
scrollLeft: this.__scrollLeft
710+
$timeout(function() {
711+
sv = new ionic.views.Scroll({
712+
el: $element[0],
713+
scrollbarX: $scope.$eval($scope.scrollbarX) !== false,
714+
scrollbarY: $scope.$eval($scope.scrollbarY) !== false,
715+
scrollingX: $scope.$eval($scope.hasScrollX) == true,
716+
scrollingY: $scope.$eval($scope.hasScrollY) !== false,
717+
scrollEventInterval: parseInt($scope.scrollEventInterval, 10) || 20,
718+
scrollingComplete: function() {
719+
$scope.onScrollComplete({
720+
scrollTop: this.__scrollTop,
721+
scrollLeft: this.__scrollLeft
722+
});
723+
}
724+
});
725+
726+
// Activate pull-to-refresh
727+
if(refresher) {
728+
sv.activatePullToRefresh(50, function() {
729+
refresher.classList.add('active');
730+
}, function() {
731+
refresher.classList.remove('refreshing');
732+
refresher.classList.remove('active');
733+
}, function() {
734+
refresher.classList.add('refreshing');
735+
$scope.onRefresh();
736+
$scope.$parent.$broadcast('scroll.onRefresh');
721737
});
722738
}
723-
});
724739

725-
// Activate pull-to-refresh
726-
if(refresher) {
727-
sv.activatePullToRefresh(50, function() {
728-
refresher.classList.add('active');
729-
}, function() {
730-
refresher.classList.remove('refreshing');
731-
refresher.classList.remove('active');
732-
}, function() {
733-
refresher.classList.add('refreshing');
734-
$scope.onRefresh();
735-
$scope.$parent.$broadcast('scroll.onRefresh');
740+
$element.bind('scroll', function(e) {
741+
$scope.onScroll({
742+
event: e,
743+
scrollTop: e.detail ? e.detail.scrollTop : e.originalEvent ? e.originalEvent.detail.scrollTop : 0,
744+
scrollLeft: e.detail ? e.detail.scrollLeft: e.originalEvent ? e.originalEvent.detail.scrollLeft : 0
745+
});
736746
});
737-
}
738747

739-
$element.bind('scroll', function(e) {
740-
$scope.onScroll({
741-
event: e,
742-
scrollTop: e.detail ? e.detail.scrollTop : e.originalEvent ? e.originalEvent.detail.scrollTop : 0,
743-
scrollLeft: e.detail ? e.detail.scrollLeft: e.originalEvent ? e.originalEvent.detail.scrollLeft : 0
748+
$scope.$parent.$on('scroll.resize', function(e) {
749+
// Run the resize after this digest
750+
$timeout(function() {
751+
sv && sv.resize();
752+
})
744753
});
745-
});
746-
747-
$scope.$parent.$on('scroll.resize', function(e) {
748-
// Run the resize after this digest
749-
$timeout(function() {
750-
sv && sv.resize();
751-
})
752-
});
753754

754-
$scope.$parent.$on('scroll.refreshComplete', function(e) {
755-
sv && sv.finishPullToRefresh();
755+
$scope.$parent.$on('scroll.refreshComplete', function(e) {
756+
sv && sv.finishPullToRefresh();
757+
});
758+
759+
// Let child scopes access this
760+
$scope.$parent.scrollView = sv;
756761
});
757-
758-
// Let child scopes access this
759-
$scope.$parent.scrollView = sv;
760762

761763

762764

@@ -1627,49 +1629,51 @@ angular.module('ionic.ui.scroll', [])
16271629
var hasScrollingX = $scope.direction.indexOf('x') >= 0;
16281630
var hasScrollingY = $scope.direction.indexOf('y') >= 0;
16291631

1630-
sv = new ionic.views.Scroll({
1631-
el: $element[0],
1632-
scrollbarX: $scope.$eval($scope.scrollbarX) !== false,
1633-
scrollbarY: $scope.$eval($scope.scrollbarY) !== false,
1634-
scrollingX: hasScrollingX,
1635-
scrollingY: hasScrollingY
1636-
});
1637-
1638-
// Activate pull-to-refresh
1639-
if(refresher) {
1640-
sv.activatePullToRefresh(refresherHeight, function() {
1641-
refresher.classList.add('active');
1642-
}, function() {
1643-
refresher.classList.remove('refreshing');
1644-
refresher.classList.remove('active');
1645-
}, function() {
1646-
refresher.classList.add('refreshing');
1647-
$scope.onRefresh();
1648-
$scope.$parent.$broadcast('scroll.onRefresh');
1632+
$timeout(function() {
1633+
sv = new ionic.views.Scroll({
1634+
el: $element[0],
1635+
scrollbarX: $scope.$eval($scope.scrollbarX) !== false,
1636+
scrollbarY: $scope.$eval($scope.scrollbarY) !== false,
1637+
scrollingX: hasScrollingX,
1638+
scrollingY: hasScrollingY
16491639
});
1650-
}
16511640

1652-
$element.bind('scroll', function(e) {
1653-
$scope.onScroll({
1654-
event: e,
1655-
scrollTop: e.detail ? e.detail.scrollTop : e.originalEvent ? e.originalEvent.detail.scrollTop : 0,
1656-
scrollLeft: e.detail ? e.detail.scrollLeft: e.originalEvent ? e.originalEvent.detail.scrollLeft : 0
1641+
// Activate pull-to-refresh
1642+
if(refresher) {
1643+
sv.activatePullToRefresh(refresherHeight, function() {
1644+
refresher.classList.add('active');
1645+
}, function() {
1646+
refresher.classList.remove('refreshing');
1647+
refresher.classList.remove('active');
1648+
}, function() {
1649+
refresher.classList.add('refreshing');
1650+
$scope.onRefresh();
1651+
$scope.$parent.$broadcast('scroll.onRefresh');
1652+
});
1653+
}
1654+
1655+
$element.bind('scroll', function(e) {
1656+
$scope.onScroll({
1657+
event: e,
1658+
scrollTop: e.detail ? e.detail.scrollTop : e.originalEvent ? e.originalEvent.detail.scrollTop : 0,
1659+
scrollLeft: e.detail ? e.detail.scrollLeft: e.originalEvent ? e.originalEvent.detail.scrollLeft : 0
1660+
});
16571661
});
1658-
});
16591662

1660-
$scope.$parent.$on('scroll.resize', function(e) {
1661-
// Run the resize after this digest
1662-
$timeout(function() {
1663-
sv && sv.resize();
1664-
})
1665-
});
1663+
$scope.$parent.$on('scroll.resize', function(e) {
1664+
// Run the resize after this digest
1665+
$timeout(function() {
1666+
sv && sv.resize();
1667+
})
1668+
});
16661669

1667-
$scope.$parent.$on('scroll.refreshComplete', function(e) {
1668-
sv && sv.finishPullToRefresh();
1670+
$scope.$parent.$on('scroll.refreshComplete', function(e) {
1671+
sv && sv.finishPullToRefresh();
1672+
});
1673+
1674+
// Let child scopes access this
1675+
$scope.$parent.scrollView = sv;
16691676
});
1670-
1671-
// Let child scopes access this
1672-
$scope.$parent.scrollView = sv;
16731677
};
16741678
}
16751679
};

‎dist/js/ionic.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2643,7 +2643,6 @@ ionic.views.Scroll = ionic.views.View.inherit({
26432643
if (e.target.tagName.match(/input|textarea|select/i)) {
26442644
return;
26452645
}
2646-
26472646

26482647
self.doTouchStart(e.touches, e.timeStamp);
26492648
e.preventDefault();
@@ -3869,14 +3868,17 @@ ionic.views.Scroll = ionic.views.View.inherit({
38693868
var self = this;
38703869

38713870
clearTimeout(self.__sizerTimeout);
3872-
self.__sizerTimeout = setTimeout(function sizer() {
3871+
3872+
var sizer = function() {
38733873
self.resize();
38743874

38753875
if((self.options.scrollingX && self.__maxScrollLeft == 0) || (self.options.scrollingY && self.__maxScrollTop == 0)) {
38763876
//self.__sizerTimeout = setTimeout(sizer, 1000);
38773877
}
3878-
}, 1000);
3878+
};
38793879

3880+
sizer();
3881+
self.__sizerTimeout = setTimeout(sizer, 1000);
38803882
},
38813883

38823884
/*
@@ -3941,7 +3943,7 @@ ionic.views.Scroll = ionic.views.View.inherit({
39413943
}
39423944

39433945
// Animate to grid when snapping is active, otherwise just fix out-of-boundary positions
3944-
self.scrollTo(self.__scrollLeft, self.__scrollTop, self.options.snapping);
3946+
//self.scrollTo(self.__scrollLeft, self.__scrollTop, self.options.snapping);
39453947
};
39463948

39473949
// Start animation and switch on flag

‎js/ext/angular/src/directive/ionicContent.js‎

Lines changed: 44 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -84,56 +84,58 @@ angular.module('ionic.ui.content', [])
8484

8585

8686
// Otherwise, supercharge this baby!
87-
sv = new ionic.views.Scroll({
88-
el: $element[0],
89-
scrollbarX: $scope.$eval($scope.scrollbarX) !== false,
90-
scrollbarY: $scope.$eval($scope.scrollbarY) !== false,
91-
scrollingX: $scope.$eval($scope.hasScrollX) == true,
92-
scrollingY: $scope.$eval($scope.hasScrollY) !== false,
93-
scrollEventInterval: parseInt($scope.scrollEventInterval, 10) || 20,
94-
scrollingComplete: function() {
95-
$scope.onScrollComplete({
96-
scrollTop: this.__scrollTop,
97-
scrollLeft: this.__scrollLeft
87+
$timeout(function() {
88+
sv = new ionic.views.Scroll({
89+
el: $element[0],
90+
scrollbarX: $scope.$eval($scope.scrollbarX) !== false,
91+
scrollbarY: $scope.$eval($scope.scrollbarY) !== false,
92+
scrollingX: $scope.$eval($scope.hasScrollX) == true,
93+
scrollingY: $scope.$eval($scope.hasScrollY) !== false,
94+
scrollEventInterval: parseInt($scope.scrollEventInterval, 10) || 20,
95+
scrollingComplete: function() {
96+
$scope.onScrollComplete({
97+
scrollTop: this.__scrollTop,
98+
scrollLeft: this.__scrollLeft
99+
});
100+
}
101+
});
102+
103+
// Activate pull-to-refresh
104+
if(refresher) {
105+
sv.activatePullToRefresh(50, function() {
106+
refresher.classList.add('active');
107+
}, function() {
108+
refresher.classList.remove('refreshing');
109+
refresher.classList.remove('active');
110+
}, function() {
111+
refresher.classList.add('refreshing');
112+
$scope.onRefresh();
113+
$scope.$parent.$broadcast('scroll.onRefresh');
98114
});
99115
}
100-
});
101116

102-
// Activate pull-to-refresh
103-
if(refresher) {
104-
sv.activatePullToRefresh(50, function() {
105-
refresher.classList.add('active');
106-
}, function() {
107-
refresher.classList.remove('refreshing');
108-
refresher.classList.remove('active');
109-
}, function() {
110-
refresher.classList.add('refreshing');
111-
$scope.onRefresh();
112-
$scope.$parent.$broadcast('scroll.onRefresh');
117+
$element.bind('scroll', function(e) {
118+
$scope.onScroll({
119+
event: e,
120+
scrollTop: e.detail ? e.detail.scrollTop : e.originalEvent ? e.originalEvent.detail.scrollTop : 0,
121+
scrollLeft: e.detail ? e.detail.scrollLeft: e.originalEvent ? e.originalEvent.detail.scrollLeft : 0
122+
});
113123
});
114-
}
115124

116-
$element.bind('scroll', function(e) {
117-
$scope.onScroll({
118-
event: e,
119-
scrollTop: e.detail ? e.detail.scrollTop : e.originalEvent ? e.originalEvent.detail.scrollTop : 0,
120-
scrollLeft: e.detail ? e.detail.scrollLeft: e.originalEvent ? e.originalEvent.detail.scrollLeft : 0
125+
$scope.$parent.$on('scroll.resize', function(e) {
126+
// Run the resize after this digest
127+
$timeout(function() {
128+
sv && sv.resize();
129+
})
121130
});
122-
});
123131

124-
$scope.$parent.$on('scroll.resize', function(e) {
125-
// Run the resize after this digest
126-
$timeout(function() {
127-
sv && sv.resize();
128-
})
129-
});
130-
131-
$scope.$parent.$on('scroll.refreshComplete', function(e) {
132-
sv && sv.finishPullToRefresh();
132+
$scope.$parent.$on('scroll.refreshComplete', function(e) {
133+
sv && sv.finishPullToRefresh();
134+
});
135+
136+
// Let child scopes access this
137+
$scope.$parent.scrollView = sv;
133138
});
134-
135-
// Let child scopes access this
136-
$scope.$parent.scrollView = sv;
137139

138140

139141

0 commit comments

Comments
 (0)