Fixed #315 - scroll size waiting

dist/css/ionic.css

@@ -2611,7 +2611,7 @@ body, .ionic-body {
   height: 3px;
   left: 2px;
   right: 2px;
-  bottom: 0; }
+  bottom: 3px; }
   .scroll-bar-h .scroll-bar-indicator {
     height: 100%; }
 
@@ -2619,14 +2619,14 @@ body, .ionic-body {
   width: 3px;
   bottom: 2px;
   top: 2px;
-  right: 1px; }
+  right: 3px; }
   .scroll-bar-v .scroll-bar-indicator {
     width: 100%; }
 
 .scroll-bar-indicator {
   position: absolute;
   background: rgba(0, 0, 0, 0.3);
-  border-radius: 2px; }
+  border-radius: 4px; }
 
 .scroll-refresher {
   overflow: hidden;

dist/js/ionic-angular.js

@@ -747,6 +747,13 @@ angular.module('ionic.ui.content', [])
               });
             });
 
+            $scope.$parent.$on('scroll.resize', function(e) {
+              // Run the resize after this digest
+              $timeout(function() {
+                sv && sv.resize();
+              })
+            });
+
             $scope.$parent.$on('scroll.refreshComplete', function(e) {
               sv && sv.finishPullToRefresh();
             });
@@ -1657,6 +1664,13 @@ angular.module('ionic.ui.scroll', [])
             });
           });
 
+          $scope.$parent.$on('scroll.resize', function(e) {
+            // Run the resize after this digest
+            $timeout(function() {
+              sv && sv.resize();
+            })
+          });
+
           $scope.$parent.$on('scroll.refreshComplete', function(e) {
             sv && sv.finishPullToRefresh();
           });

dist/js/ionic.js

@@ -2614,6 +2614,9 @@ ionic.views.Scroll = ionic.views.View.inherit({
   __indicatorX: null,
   __indicatorY: null,
 
+  /** {Boolean} whether we've tried to wait for size already */
+  __didWaitForSize: null,
+  __sizerTimeout: null,
 
   __initEventHandlers: function() {
     var self = this;
@@ -3787,9 +3790,29 @@ ionic.views.Scroll = ionic.views.View.inherit({
     self.__maxScrollLeft = Math.max((self.__contentWidth * zoomLevel) - self.__clientWidth, 0);
     self.__maxScrollTop = Math.max((self.__contentHeight * zoomLevel) - self.__clientHeight, 0);
 
+    if(!self.__didWaitForSize && self.__maxScrollLeft == 0 && self.__maxScrollTop == 0) {
+      self.__didWaitForSize = true;
+      self.__waitForSize();
+    }
   },
 
 
+  /**
+   * If the scroll view isn't sized correctly on start, wait until we have at least some size
+   */
+  __waitForSize: function() {
+
+    var self = this;
+
+    clearTimeout(self.__sizerTimeout);
+    self.__sizerTimeout = setTimeout(function sizer() {
+      self.resize();
+      if(self.__maxScrollLeft == 0 && self.__maxScrollTop == 0) {
+        self.__sizerTimeout = setTimeout(sizer, 1000);
+      }
+    }, 1000);
+
+  },
 
   /*
   ---------------------------------------------------------------------------

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

@@ -123,6 +123,13 @@ angular.module('ionic.ui.content', [])
               });
             });
 
+            $scope.$parent.$on('scroll.resize', function(e) {
+              // Run the resize after this digest
+              $timeout(function() {
+                sv && sv.resize();
+              })
+            });
+
             $scope.$parent.$on('scroll.refreshComplete', function(e) {
               sv && sv.finishPullToRefresh();
             });

js/ext/angular/src/directive/ionicScroll.js

@@ -84,6 +84,13 @@ angular.module('ionic.ui.scroll', [])
             });
           });
 
+          $scope.$parent.$on('scroll.resize', function(e) {
+            // Run the resize after this digest
+            $timeout(function() {
+              sv && sv.resize();
+            })
+          });
+
           $scope.$parent.$on('scroll.refreshComplete', function(e) {
             sv && sv.finishPullToRefresh();
           });

js/ext/angular/test/content.html

@@ -116,6 +116,7 @@
         $scope.onScrollComplete = function(event, scrollTop, scrollLeft) {
           console.log('Scroll complete', scrollTop, scrollLeft);
         }
+        var last = 0;
         $scope.onScroll = function(event, scrollTop, scrollLeft) {
         /*
           if(scrollTop > startTop) {

js/ext/angular/test/content_defer.html

@@ -0,0 +1,111 @@
+<html ng-app="navTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Content</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
+
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/angular/angular.js"></script>
+    <script src="../../../../dist/js/angular/angular-animate.js"></script>
+    <script src="../../../../dist/js/angular/angular-route.js"></script>
+    <script src="../../../../dist/js/angular/angular-touch.js"></script>
+    <script src="../../../../dist/js/angular/angular-sanitize.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
+  </head>
+  <body ng-controller="ThisCtrl">
+    <pane>
+      <header-bar id="header" title="'Title'" type="bar-primary" hides-header></header-bar>
+
+      <content id="container"
+        on-scroll="onScroll(event, scrollTop, scrollLeft)"
+        on-scroll-complete="onScrollComplete(scrollTop, scrollLeft)"
+        on-refresh="onRefresh()"
+        on-refresh-opening="onRefreshOpening(amount)"
+        refresh-complete="refreshComplete"
+        has-tabs="true"
+        has-header="true"
+        >
+        <div ng-repeat="items in items">{{$index}}</div>
+      </content>
+      <nav id="tab-bar" class="tabs tabs-icon-top">
+        <a class="tab-item" href="#">
+          <i class="icon ion-game-controller-a"></i>
+          Fun
+        </a>
+        <a class="tab-item">
+          <i class="icon ion-locked"></i>
+          Security
+        </a>
+        <a class="tab-item">
+          <i class="icon ion-heart"></i>
+          Simple
+        </a>
+        <a class="tab-item">
+          <i class="icon ion-leaf"></i>
+          Light
+        </a>
+        <a class="tab-item">
+          <i class="icon ion-waterdrop"></i>
+          Clean
+        </a>
+      </nav>
+      
+    </pane>
+
+    <script>
+      angular.module('navTest', ['ionic'])
+
+      .directive('hidesHeader', function() {
+        return {
+          link: function($scope, $element, $attr) {
+            var startTop = $element[0].offsetTop;
+            console.log("Starting", startTop);
+          }
+        }
+      })
+
+      .controller('ThisCtrl', function($scope, $timeout) {
+        var header = document.getElementById('header');
+        var content = document.getElementById('container');
+        var startTop = header.offsetTop;
+        $scope.onScrollComplete = function(event, scrollTop, scrollLeft) {
+        }
+        $timeout(function() {
+          $scope.items = [];
+          for(var i = 0; i < 70; i++) {
+            $scope.items.push({
+            });
+          }
+        }, 2000);
+        $timeout(function() {
+          for(var i = 0; i < 70; i++) {
+            $scope.items.push({
+            });
+          }
+          $scope.$broadcast('scroll.resize');
+        }, 4000);
+        var last = 0;
+        $scope.onScroll = function(event, scrollTop, scrollLeft) {
+        /*
+          if(scrollTop > startTop) {
+            var diff = scrollTop - startTop;
+            console.log(diff);
+            header.style.webkitTransform = 'translate3d(0px, -' + diff + 'px, 0)';
+            content.style.marginTop = -diff + 'px';
+          }
+          console.log('Scroll', scrollTop, scrollLeft);
+          */
+        };
+      })
+
+      .controller('AppCtrl', function($scope, $compile, $timeout, $element) {
+          /*
+          */
+      })
+    </script>
+  </body>
+</html>
+

js/views/scrollView.js

@@ -547,6 +547,9 @@ ionic.views.Scroll = ionic.views.View.inherit({
   __indicatorX: null,
   __indicatorY: null,
 
+  /** {Boolean} whether we've tried to wait for size already */
+  __didWaitForSize: null,
+  __sizerTimeout: null,
 
   __initEventHandlers: function() {
     var self = this;
@@ -1720,9 +1723,29 @@ ionic.views.Scroll = ionic.views.View.inherit({
     self.__maxScrollLeft = Math.max((self.__contentWidth * zoomLevel) - self.__clientWidth, 0);
     self.__maxScrollTop = Math.max((self.__contentHeight * zoomLevel) - self.__clientHeight, 0);
 
+    if(!self.__didWaitForSize && self.__maxScrollLeft == 0 && self.__maxScrollTop == 0) {
+      self.__didWaitForSize = true;
+      self.__waitForSize();
+    }
   },
 
 
+  /**
+   * If the scroll view isn't sized correctly on start, wait until we have at least some size
+   */
+  __waitForSize: function() {
+
+    var self = this;
+
+    clearTimeout(self.__sizerTimeout);
+    self.__sizerTimeout = setTimeout(function sizer() {
+      self.resize();
+      if(self.__maxScrollLeft == 0 && self.__maxScrollTop == 0) {
+        self.__sizerTimeout = setTimeout(sizer, 1000);
+      }
+    }, 1000);
+
+  },
 
   /*
   ---------------------------------------------------------------------------

scss/_scaffolding.scss

@@ -112,7 +112,7 @@ body, .ionic-body {
   height: 3px;
   left: 2px;
   right: 2px;
-  bottom: 0;
+  bottom: 3px;
 
   .scroll-bar-indicator {
     height: 100%;
@@ -123,7 +123,7 @@ body, .ionic-body {
   width: 3px;
   bottom: 2px;
   top: 2px;
-  right: 1px;
+  right: 3px;
 
   .scroll-bar-indicator {
     width: 100%;
@@ -132,7 +132,7 @@ body, .ionic-body {
 .scroll-bar-indicator {
   position: absolute;
   background:rgba(0,0,0,0.3);
-  border-radius: 2px;
+  border-radius: 4px;
 }