From 49f06f9c3dc9c8ee68bdf91090df497dc5cbbc02 Mon Sep 17 00:00:00 2001
From: Andrew Joslin <andytjoslin@gmail.com>
Date: Wed, 21 May 2014 13:09:35 -0600
Subject: [PATCH] fix(scrollView): make xy scrolling work on ionScroll and
 ionContent

Closes #1462
---
 js/angular/directive/content.js | 12 ++++----
 js/angular/directive/list.js    |  1 +
 js/angular/directive/scroll.js  |  5 ++--
 test/html/scroll.html           | 50 ++++++++++++++++++++++++++++++---
 4 files changed, 57 insertions(+), 11 deletions(-)

diff --git a/js/angular/directive/content.js b/js/angular/directive/content.js
index 8276f06f185..ef44d5767be 100644
--- a/js/angular/directive/content.js
+++ b/js/angular/directive/content.js
@@ -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.
@@ -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) {
@@ -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({
diff --git a/js/angular/directive/list.js b/js/angular/directive/list.js
index 252068fa63b..d5c01b1a5cd 100644
--- a/js/angular/directive/list.js
+++ b/js/angular/directive/list.js
@@ -203,6 +203,7 @@
  * }
  * .animated-item {
  *   line-height: 52px;
+ *   max-height: 52px;
  *   padding-top: 0;
  *   padding-bottom: 0;
  *   -webkit-transition: all 0.15s linear;
diff --git a/js/angular/directive/scroll.js b/js/angular/directive/scroll.js
index e32f283d25d..a362d22990e 100644
--- a/js/angular/directive/scroll.js
+++ b/js/angular/directive/scroll.js
@@ -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)
@@ -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) {
diff --git a/test/html/scroll.html b/test/html/scroll.html
index 6842edd8f3b..0c6db4fef9c 100644
--- a/test/html/scroll.html
+++ b/test/html/scroll.html
@@ -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">
@@ -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>