Skip to content

Commit

Permalink
fix(scrollView): make xy scrolling work on ionScroll and ionContent
Browse files Browse the repository at this point in the history 
Closes #1462
  • Loading branch information
@ajoslin
ajoslin committed May 21, 2014
1 parent 93e0191 commit 49f06f9
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 11 deletions.
12 changes: 7 additions & 5 deletions js/angular/directive/content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,14 @@
*
* @param {string=} delegate-handle The handle used to identify this scrollView
* with {@link ionic.service:$ionicScrollDelegate}.
* @param {string=} direction Which way to scroll. 'x' or 'y' or 'xy'. Default 'y'.
* @param {boolean=} padding Whether to add padding to the content.
* of the content. Defaults to true on iOS, false on Android.
* @param {boolean=} scroll Whether to allow scrolling of content. Defaults to true.
* @param {boolean=} overflow-scroll Whether to use overflow-scrolling instead of
* Ionic scroll.
* @param {boolean=} scrollbar-x Whether to show the horizontal scrollbar. Default true.
* @param {boolean=} scrollbar-y Whether to show the vertical scrollbar. Default true.
* @param {boolean=} has-bouncing Whether to allow scrolling to bounce past the edges
* of the content. Defaults to true on iOS, false on Android.
* @param {expression=} on-scroll Expression to evaluate when the content is scrolled.
Expand Down Expand Up @@ -77,20 +80,19 @@ function($timeout, $controller, $ionicBind) {
$scope.$hasFooter = $scope.$hasSubfooter =
$scope.$hasTabs = $scope.$hasTabsTop =
false;

$ionicBind($scope, $attr, {
$onScroll: '&onScroll',
$onScrollComplete: '&onScrollComplete',
hasBouncing: '@',
padding: '@',
hasScrollX: '@',
hasScrollY: '@',
direction: '@',
scrollbarX: '@',
scrollbarY: '@',
startX: '@',
startY: '@',
scrollEventInterval: '@'
});
$scope.direction = $scope.direction || 'y';

if (angular.isDefined($attr.padding)) {
$scope.$watch($attr.padding, function(newVal) {
Expand All @@ -113,8 +115,8 @@ function($timeout, $controller, $ionicBind) {
startY: $scope.$eval($scope.startY) || 0,
scrollbarX: $scope.$eval($scope.scrollbarX) !== false,
scrollbarY: $scope.$eval($scope.scrollbarY) !== false,
scrollingX: $scope.$eval($scope.hasScrollX) === true,
scrollingY: $scope.$eval($scope.hasScrollY) !== false,
scrollingX: $scope.direction.indexOf('x') >= 0,
scrollingY: $scope.direction.indexOf('y') >= 0,
scrollEventInterval: parseInt($scope.scrollEventInterval, 10) || 10,
scrollingComplete: function() {
$scope.$onScrollComplete({
Expand Down
1 change: 1 addition & 0 deletions js/angular/directive/list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,7 @@
* }
* .animated-item {
* line-height: 52px;
* max-height: 52px;
* padding-top: 0;
* padding-bottom: 0;
* -webkit-transition: all 0.15s linear;
Expand Down
5 changes: 3 additions & 2 deletions js/angular/directive/scroll.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@
*
* @param {string=} delegate-handle The handle used to identify this scrollView
* with {@link ionic.service:$ionicScrollDelegate}.
* @param {string=} direction Which way to scroll. 'x' or 'y'. Default 'y'.
* @param {string=} direction Which way to scroll. 'x' or 'y' or 'xy'. Default 'y'.
* @param {boolean=} paging Whether to scroll with paging.
* @param {expression=} on-refresh Called on pull-to-refresh, triggered by an {@link ionic.directive:ionRefresher}.
* @param {expression=} on-scroll Called whenever the user scrolls.
* @param {boolean=} scrollbar-x Whether to show the horizontal scrollbar. Default false.
* @param {boolean=} scrollbar-x Whether to show the horizontal scrollbar. Default true.
* @param {boolean=} scrollbar-y Whether to show the vertical scrollbar. Default true.
* @param {boolean=} zooming Whether to support pinch-to-zoom
* @param {integer=} min-zoom The smallest zoom amount allowed (default is 0.5)
Expand Down Expand Up @@ -53,6 +53,7 @@ function($timeout, $controller, $ionicBind) {
minZoom: '@',
maxZoom: '@'
});
$scope.direction = $scope.direction || 'y';

if (angular.isDefined($attr.padding)) {
$scope.$watch($attr.padding, function(newVal) {
Expand Down
50 changes: 46 additions & 4 deletions test/html/scroll.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,8 @@
<body ng-controller="ThisCtrl">
<ion-pane>

<ion-content class="has-header" scroll="false">
<ion-scroll class="has-header" direction="xy" style="width:100%;height:50%;">
<h3>Hourly Forecast</h3>
<ion-scroll direction="x" style="width: 100%; height: 20%;">
<div class="hours">
<div ng-repeat="hour in hours">
<div class="icons">
Expand All @@ -65,14 +64,57 @@ <h3>Hourly Forecast</h3>
</div>
</div>
</div>
</ion-scroll>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<a class="button" ng-click="scrollTo()">
Scroll to 100
</a>
<ion-scroll direction="y" style="height: 400px; width: 300px; background: red;">
<div style="width: 100px; height: 4000px; background: url('tree_bark.png') repeat"></div>
</ion-scroll>
</ion-content>
</ion-scroll>
</ion-pane>

<script>
Expand Down

0 comments on commit 49f06f9

Please sign in to comment.