Support for scrolling to the bottom

dist/css/ionic.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*!
  * Copyright 2014 Drifty Co.
  * http://drifty.com/

dist/css/ionic.min.css

@@ -1,4 +1,4 @@
-/*!
+@charset "UTF-8";/*!
  * Copyright 2014 Drifty Co.
  * http://drifty.com/
  *

dist/js/ionic-angular.js

@@ -72,6 +72,12 @@ angular.module('ionic.ui.service.scrollDelegate', [])
     scrollTop: function(animate) {
       $rootScope.$broadcast('scroll.scrollTop', animate);
     },
+    scrollBottom: function(animate) {
+      $rootScope.$broadcast('scroll.scrollBottom', animate);
+    },
+    resize: function() {
+      $rootScope.$broadcast('scroll.resize');
+    },
     tapScrollToTop: function(element) {
       var _this = this;
 
@@ -117,6 +123,13 @@ angular.module('ionic.ui.service.scrollDelegate', [])
       $scope.$parent.$on('scroll.scrollTop', function(e, animate) {
         $scope.$parent.scrollView && $scope.$parent.scrollView.scrollTo(0, 0, animate === false ? false : true);
       });
+      $scope.$parent.$on('scroll.scrollBottom', function(e, animate) {
+        var sv = $scope.$parent.scrollView;
+        var max;
+        if(!sv) { return; }
+        max = sv.getScrollMax();
+        sv.scrollTo(0, max.top, animate === false ? false : true);
+      });
     }
   };
 }]);

js/ext/angular/src/service/delegates/ionicScrollDelegate.js

@@ -11,6 +11,12 @@ angular.module('ionic.ui.service.scrollDelegate', [])
     scrollTop: function(animate) {
       $rootScope.$broadcast('scroll.scrollTop', animate);
     },
+    scrollBottom: function(animate) {
+      $rootScope.$broadcast('scroll.scrollBottom', animate);
+    },
+    resize: function() {
+      $rootScope.$broadcast('scroll.resize');
+    },
     tapScrollToTop: function(element) {
       var _this = this;
 
@@ -56,6 +62,13 @@ angular.module('ionic.ui.service.scrollDelegate', [])
       $scope.$parent.$on('scroll.scrollTop', function(e, animate) {
         $scope.$parent.scrollView && $scope.$parent.scrollView.scrollTo(0, 0, animate === false ? false : true);
       });
+      $scope.$parent.$on('scroll.scrollBottom', function(e, animate) {
+        var sv = $scope.$parent.scrollView;
+        var max;
+        if(!sv) { return; }
+        max = sv.getScrollMax();
+        sv.scrollTo(0, max.top, animate === false ? false : true);
+      });
     }
   };
 }]);

js/ext/angular/test/list.html

@@ -74,6 +74,12 @@
       .my-repeat-animation > .ng-move.ng-move-active {
         opacity:1;
       }
+      .item-message img {
+        float: left;
+        width: 50px;
+        height: 50px;
+        margin-right: 10px;
+      }
     </style>
 
   </head>
@@ -106,14 +112,13 @@
               can-delete="true"
               can-reorder="true"
               can-swipe="true"
-              option-buttons="optionButtons1"
-              item-type="item-icon-left">
+              option-buttons="optionButtons1">
 
           <!-- shows that the item directive does not need attributes and can get values from the list attributes -->
-          <item ng-repeat="item in items" 
-                item="item">
-            <i class="icon ion-chatbox"></i>
-            Repeat Item: {{ item.text }}
+          <item item="item" class="item-message" ng-repeat="item in items">
+            <img ng-src="{{item.face}}">
+            <h2>{{item.from}}</h2>
+            <p>{{item.text}}</p>
           </item>
 
           <!-- shows how a divider could be included-->
@@ -188,12 +193,12 @@
       .controller('TestCtrl', function($scope, $timeout) {
 
         // Build Mock Data
-        $scope.items = [];
-        for(var i = 0; i < 3; i++) {
-          $scope.items.push({
-            text: i
-          });
-        }
+        $scope.items = [
+          { from: 'Ben', face: 'https://pbs.twimg.com/profile_images/378800000571933189/278e8e1b7871a115b95fc550cd07af40.png', text: 'Did you prepare?' },
+          { from: 'Adam', face: 'https://pbs.twimg.com/profile_images/2927292174/25b170ee2e3044fd936ad1319bc4b82d_bigger.jpeg', text: 'Don\'t forget to smile!' },
+          { from: 'Tim', face: 'https://pbs.twimg.com/profile_images/378800000290028838/ee3303b02223f25cb0f9b082b55b2eeb.jpeg', text: 'Bring some shirts!' }
+        ];
+              
 
         // List Toggles
         $scope.editBtnText = 'Edit';
@@ -226,6 +231,7 @@
           },
           {
             text: 'Share',
+            type: 'button-balanced',
             onTap: function(item, button) { alert(button.text + ' Button: ' + item.text) }
           }
         ];

js/ext/angular/test/scroll.html

@@ -15,14 +15,62 @@
     <script src="../../../../dist/js/angular/angular-sanitize.js"></script>
     <script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
     <script src="../../../../dist/js/ionic-angular.js"></script>
+    <style>
+      .pane {
+        background-color: #333;
+        color: #eee;
+      }
+      h3 {
+        margin: 20px 10px !important;
+        color: #eee;
+      }
+      .hours {
+        width: 1540px;
+      }
+      .hours > * {
+        float: left;
+        margin: 5px 10px;
+      }
+      .hours .icons {
+        position: relative;
+        width: 32px;
+        height: 32px;
+      }
+      .hours .icon {
+        font-size: 24px;
+        color: #1e1e1e;
+        position: absolute;
+      }
+      .hours .ion-ios7-sunny-outline {
+        color: yellow;
+        left: 2px;;
+        top: 2px;
+        font-size: 32px;
+      }
+      .hours .ion-cloud {
+        left: 10px;
+        top: 10px;
+        color: #fff;
+      }
+    </style>
   </head>
   <body ng-controller="ThisCtrl">
     <pane>
-      <header-bar id="header" title="'Title'" type="bar-primary" hides-header></header-bar>
 
       <content has-header="true" scroll="false">
+        <h3>Hourly Forecast</h3>
         <scroll direction="x" style="width: 100%">
-          <div style="height: 100px; width: 4000px; background: url('tree_bark.png') repeat"></div>
+          <div class="hours">
+            <div ng-repeat="hour in hours">
+              <div class="icons">
+                <i class="icon ion-ios7-sunny-outline"></i>
+                <i class="icon ion-cloud"></i>
+              </div>
+              <div>
+                {{hour.temp}} &deg;F
+              </div>
+            </div>
+          </div>
         </scroll>
         <scroll direction="y" style="height: 400px; width: 300px">
           <div style="width: 100px; height: 4000px; background: url('tree_bark.png') repeat"></div>
@@ -45,7 +93,14 @@
       .controller('ThisCtrl', function($scope) {
         var header = document.getElementById('header');
         var content = document.getElementById('container');
-        var startTop = header.offsetTop;
+
+        $scope.hours = [];
+        for(var i = 0; i < 24; i++) {
+          $scope.hours.push({
+            icon: 'ion-ios7-partlysunny-outline',
+            temp: 40 + Math.floor(Math.random() * 10)
+          })
+        }
         $scope.onScrollComplete = function(event, scrollTop, scrollLeft) {
           console.log('Scroll complete', scrollTop, scrollLeft);
         }