Starting for #53 plus more stuff

dist/css/ionic-ios7.css

@@ -370,8 +370,7 @@ body, .ionic-body {
 .content {
   position: absolute;
   width: 100%;
-  top: 0;
+  height: 100%;
-  bottom: 0;
   overflow: auto;
   -webkit-overflow-scrolling: touch; }
 
@@ -548,6 +547,14 @@ address {
     border-bottom-width: 1px; }
   .bar.bar-footer {
     border-top-width: 1px; }
+  .bar.bar-clear {
+    background: none;
+    color: #fff;
+    border: none; }
+    .bar.bar-clear .button {
+      color: #fff; }
+    .bar.bar-clear .title {
+      color: #fff; }
   .bar.bar-default {
     background-color: rgba(255, 255, 255, 0.9);
     border-color: #dddddd;

dist/css/ionic-scoped.css

@@ -1142,8 +1142,7 @@
   .ionic .content {
     position: absolute;
     width: 100%;
-    top: 0;
+    height: 100%;
-    bottom: 0;
     overflow: auto;
     -webkit-overflow-scrolling: touch; }
   .ionic .has-header {
@@ -1316,6 +1315,14 @@
       border-bottom-width: 1px; }
     .ionic .bar.bar-footer {
       border-top-width: 1px; }
+    .ionic .bar.bar-clear {
+      background: none;
+      color: #fff;
+      border: none; }
+      .ionic .bar.bar-clear .button {
+        color: #fff; }
+      .ionic .bar.bar-clear .title {
+        color: #fff; }
     .ionic .bar.bar-default {
       background-color: rgba(255, 255, 255, 0.9);
       border-color: #dddddd;

dist/css/ionic.css

@@ -1449,8 +1449,7 @@ body, .ionic-body {
 .content {
   position: absolute;
   width: 100%;
-  top: 0;
+  height: 100%;
-  bottom: 0;
   overflow: auto;
   -webkit-overflow-scrolling: touch; }
 
@@ -1657,6 +1656,14 @@ address {
     border-bottom-width: 1px; }
   .bar.bar-footer {
     border-top-width: 1px; }
+  .bar.bar-clear {
+    background: none;
+    color: #fff;
+    border: none; }
+    .bar.bar-clear .button {
+      color: #fff; }
+    .bar.bar-clear .title {
+      color: #fff; }
   .bar.bar-default {
     background-color: rgba(255, 255, 255, 0.9);
     border-color: #dddddd;
@@ -3242,6 +3249,14 @@ a.button {
       -webkit-transition: opacity 0.4s ease-in;
       opacity: 1; }
 
+/**
+ * Scroll is the scroll view component available for complex and custom
+ * scroll view functionality.
+ */
+.scroll {
+  position: absolute;
+  width: 100%; }
+
 .nav-content {
   position: absolute;
   width: 100%;

dist/js/ionic-angular.js

@@ -346,6 +346,9 @@ angular.module('ionic.ui.content', [])
       return function($scope, $element, $attr) {
         var c = $element.eq(0);
 
+        if(attr.padded) {
+          c.addClass('padding');
+        }
 
         if(attr.hasHeader) {
           c.addClass('has-header');

dist/js/ionic.js

@@ -2480,6 +2480,92 @@ window.ionic = {
     }
   };
 
+})(ionic);
+;
+(function(ionic) {
+'use strict';
+
+  ionic.views.Scroll = function(opts) {
+    var _this = this;
+
+    // Extend the options with our defaults
+    ionic.Utils.extend(opts, {
+      decelerationRate: ionic.views.Scroll.prototype.DECEL_RATE_NORMAL
+    });
+
+    this.el = opts.el;
+    this.decelerationRate = opts.decelerationRate
+
+    // Listen for drag and release events
+    window.ionic.onGesture('drag', function(e) {
+      _this._handleDrag(e);
+    }, this.el);
+    window.ionic.onGesture('release', function(e) {
+      _this._handleEndDrag(e);
+    }, this.el);
+  };
+
+  ionic.views.Scroll.prototype = {
+    DECEL_RATE_NORMAL: 0.998,
+    DECEL_RATE_FAST: 0.99,
+
+    _initDrag: function() {
+      this._isDragging = false;
+      this._drag = null;
+    },
+
+    /**
+     * Initialize a drag by grabbing the content area to drag, and any other
+     * info we might need for the dragging.
+     */
+    _startDrag: function(e) {
+      var offsetX, content;
+
+      this._initDrag();
+
+      this.el.classList.remove('scroll-scrolling');
+
+      var scrollTop = parseFloat(this.el.scrollTop);
+
+      this._drag = {
+        startY: scrollTop
+      };
+    },
+
+    /**
+     * Process the drag event to move the item to the left or right.
+     */
+    _handleDrag: function(e) {
+      var _this = this;
+
+      window.requestAnimationFrame(function() {
+        var content;
+
+        // We really aren't dragging
+        if(!_this._drag) {
+          _this._startDrag(e);
+        }
+        console.log('At scroll top', _this.el.scrollTop, e.gesture.deltaY);
+
+        _this.el.style.webkitTransform = 'translate3d(0,' + e.gesture.deltaY + 'px, 0)';
+      });
+    },
+    _handleEndDrag: function(e) {
+      var _this = this;
+
+      window.requestAnimationFrame(function() {
+      
+        // We didn't have a drag, so just init and leave
+        if(!_this._drag) {
+          _this._initDrag();
+          return;
+        }
+
+        _this._initDrag();
+      });
+    }
+  };
+
 })(ionic);
 ;
 (function(ionic) {

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

@@ -15,6 +15,9 @@ angular.module('ionic.ui.content', [])
       return function($scope, $element, $attr) {
         var c = $element.eq(0);
 
+        if(attr.padded) {
+          c.addClass('padding');
+        }
 
         if(attr.hasHeader) {
           c.addClass('has-header');

js/views/scrollView.js

@@ -0,0 +1,85 @@
+(function(ionic) {
+'use strict';
+
+  ionic.views.Scroll = function(opts) {
+    var _this = this;
+
+    // Extend the options with our defaults
+    ionic.Utils.extend(opts, {
+      decelerationRate: ionic.views.Scroll.prototype.DECEL_RATE_NORMAL
+    });
+
+    this.el = opts.el;
+    this.decelerationRate = opts.decelerationRate
+
+    // Listen for drag and release events
+    window.ionic.onGesture('drag', function(e) {
+      _this._handleDrag(e);
+    }, this.el);
+    window.ionic.onGesture('release', function(e) {
+      _this._handleEndDrag(e);
+    }, this.el);
+  };
+
+  ionic.views.Scroll.prototype = {
+    DECEL_RATE_NORMAL: 0.998,
+    DECEL_RATE_FAST: 0.99,
+
+    _initDrag: function() {
+      this._isDragging = false;
+      this._drag = null;
+    },
+
+    /**
+     * Initialize a drag by grabbing the content area to drag, and any other
+     * info we might need for the dragging.
+     */
+    _startDrag: function(e) {
+      var offsetX, content;
+
+      this._initDrag();
+
+      this.el.classList.remove('scroll-scrolling');
+
+      var scrollTop = parseFloat(this.el.scrollTop);
+
+      this._drag = {
+        startY: scrollTop
+      };
+    },
+
+    /**
+     * Process the drag event to move the item to the left or right.
+     */
+    _handleDrag: function(e) {
+      var _this = this;
+
+      window.requestAnimationFrame(function() {
+        var content;
+
+        // We really aren't dragging
+        if(!_this._drag) {
+          _this._startDrag(e);
+        }
+        console.log('At scroll top', _this.el.scrollTop, e.gesture.deltaY);
+
+        _this.el.style.webkitTransform = 'translate3d(0,' + e.gesture.deltaY + 'px, 0)';
+      });
+    },
+    _handleEndDrag: function(e) {
+      var _this = this;
+
+      window.requestAnimationFrame(function() {
+      
+        // We didn't have a drag, so just init and leave
+        if(!_this._drag) {
+          _this._initDrag();
+          return;
+        }
+
+        _this._initDrag();
+      });
+    }
+  };
+
+})(ionic);

scss/ionic/_bar.scss

@@ -25,6 +25,18 @@
     border-top-width: 1px;
   }
 
+  &.bar-clear {
+    background: none;
+    color: #fff;
+    border: none;
+    .button {
+      color: #fff;
+    }
+    .title {
+      color: #fff;
+    }
+  }
+
   &.bar-default {
     @include bar-style($bar-default-bg, $bar-default-border-color, $gray-dark);
   }

scss/ionic/_scaffolding.scss

@@ -74,8 +74,7 @@ body, .ionic-body {
 .content {
   position: absolute;
   width: 100%;
-  top: 0;
+  height: 100%;
-  bottom: 0;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 }

scss/ionic/_scroll.scss

@@ -0,0 +1,8 @@
+/**
+ * Scroll is the scroll view component available for complex and custom
+ * scroll view functionality.
+ */
+.scroll {
+  position: absolute;
+  width: 100%;
+}

scss/ionic/ionic.scss

@@ -42,6 +42,7 @@
   "card",
 
   "slideBox",
+  "scroll",
 
   "nav",
 

starters/weather/index.html

@@ -0,0 +1,112 @@
+<html ng-app="ionic.example">
+  <head>
+    <meta charset="utf-8">
+    <title>Weather</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">
+
+    <link rel="stylesheet" href="weather.css">
+
+    <script src="/vendor/angular/angular-1.2.0rc2.min.js"></script>
+    <script src="/vendor/angular/angular-touch.js"></script>
+    <script src="/vendor/angular/angular-animate.js"></script>
+    <script src="/dist/js/ionic.js"></script>
+    <script src="/dist/js/ionic-angular.js"></script>
+  </head>
+  <body ng-controller="WeatherCtrl">
+    <header id="header" class="bar bar-header bar-clear">
+      <button class="button button-icon"><i class="icon-navicon-round"></i></button>
+      <h1 class="title">
+        <span class="city">{{current.city.name}}</span><br>
+        <current-time></current-time>
+      </h1>
+    </header>
+    <content id="main-content" has-header="true" padded="true">
+      <small-weather>
+        <h5>{{current.cover}}</h5>
+        <h5>H: {{current.high}} L: {{current.low}}</h5>
+        <h1 class="current-temp">{{current.temp}}&deg;</h1>
+      </small-weather>
+      <weather-box title="Forecast" style="height: 400px">
+      </weather-box>
+      <weather-box title="Details" style="height: 400px">
+      </weather-box>
+    </content>
+  </body>
+
+  <script>
+    angular.module('ionic.example', ['ionic.ui.content'])
+
+    .directive('currentTime', function($timeout, $filter) {
+      return {
+        restrict: 'E',
+        replace: true,
+        template: '<span class="current-time">{{currentTime}}</span>',
+        link: function($scope, $element, $attr) {
+          $timeout(function checkTime() {
+            $scope.currentTime = $filter('date')(new Date, 'H:mm');
+            $timeout(checkTime, 500);
+          });
+        }
+      }
+     })
+
+    .directive('smallWeather', function($timeout) {
+      return {
+        restrict: 'E',
+        replace: true,
+        transclude: true,
+        template: '<div id="small-weather" ng-transclude></div>',
+        link: function($scope, $element, $attr) {
+
+          // Delay so we are in the DOM and can calculate sizes
+          $timeout(function() {
+            var windowHeight = window.innerHeight;
+            var thisHeight = $element[0].offsetHeight;
+            var headerHeight = document.querySelector('#header').offsetHeight;
+            $element[0].style.marginTop = (windowHeight - thisHeight) + 'px';
+            angular.element(document.querySelector('.content')).css('-webkit-overflow-scrolling', 'auto');
+            $timeout(function() {
+              angular.element(document.querySelector('.content')).css('-webkit-overflow-scrolling', 'touch');
+            }, 50);
+          });
+        }
+      }
+    })
+
+    .directive('weatherBox', function($timeout) {
+      return {
+        restrict: 'E',
+        replace: true,
+        transclude: true,
+        scope: {
+          title: '@'
+        },
+        template: '<div class="weather-box"><h4 class="title">{{title}}</h4><div ng-transclude></div></div>',
+        link: function($scope, $element, $attr) {
+        }
+      }
+    })
+    
+
+    .filter('temp', function() {
+      return function(v) {
+        return v + '&deg;';
+      };
+    })
+
+    .controller('WeatherCtrl', function($scope) {
+      $scope.current = {
+        city: {
+          name: 'Madison'
+        },
+        temp: 36,
+        cover: 'Partly cloudy',
+        high: 43,
+        low: 27
+      }
+    });
+  </script>
+</html>

starters/weather/weather.css

@@ -0,0 +1,44 @@
+body {
+  background: url('madison2.jpg') no-repeat transparent;
+  background-size: cover;
+}
+h1,h2,h3,h4,h5 {
+  color: #fff;
+  font-weight: 300;
+}
+
+#header .title {
+  font-size: 12px;
+  line-height: 20px;
+}
+#main-content {
+  color: #fff;
+}
+
+#small-weather {
+  height: 200px;
+}
+#small-weather > * {
+  color: #fff;
+}
+#small-weather .current-temp {
+  font-size: 100px;
+  font-weight: 100;
+  margin: 0;
+  padding: 0;
+  line-height: 80px;
+}
+
+.weather-box {
+  background-color: rgba(0,0,0,0.2);
+  padding: 5px;
+  margin: 10px 0px;
+}
+
+.weather-box .title {
+  color: #fff;
+  font-weight: normal;
+  margin: 0;
+  padding-bottom: 3px;
+  border-bottom: 1px solid #fff;
+}

test/scroll.html

@@ -1,44 +1,31 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>iOS 7</title>
+    <title>Scroll</title>
 
     <!-- Sets initial viewport load and disables zooming  -->
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link href="../dist/ionic.css" rel="stylesheet">
+    <link href="../dist/css/ionic.css" rel="stylesheet">
   </head>
   <body>
 
     <section>
       <div class="bar bar-header bar-secondary">
         <a href="#" class="button button-danger button-clear">Edit</a>
-        <h1 class="title">World Clock</h1>
+        <h1 class="title">Scroll Me</h1>
-        <a href="#" class="button button-danger button-clear">Delete</a>
-      </div>
-      <div class="content-wrapper">
-        <div class="content has-header has-footer">
-          <div style="width: 100%; height: 2000px; background: url('tree_bark.png') repeat;" class="padding">
-            <div class="card">
-              <div class="card-header card-header-secondary">
-                Your update
-              </div>
-              <div class="card-body">
-                <i>Just doing my thing</i>
-              </div>
-              <div class="card-footer">
-                Good bye
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="bar bar-footer bar-secondary">
-        <div class="button-bar">
-          <a href="#" class="button button-danger button-clear">Edit</a>
-          <a href="#" class="button button-danger button-clear">Move</a>
         <a href="#" class="button button-danger button-clear">Delete</a>
       </div>
+      <div id="scroller" class="scroll">
+        <div style="height: 4000px; background: url('tree_bark.png') repeat;"></div>
       </div>
     </section>
+    <script src="../dist/js/ionic.js"></script>
+    <script>
+      var s = document.getElementById('scroller');
+
+      var scroll = new ionic.views.Scroll({
+        el: s
+      });
+    </script>
   </body>
 </html>