A whole lotta shit

js/ext/angular/src/directive/ionicList.js

@@ -1,7 +1,7 @@
 (function() {
 'use strict';
 
-angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
+angular.module('ionic.ui.list', ['ionic.service.gesture', 'ngAnimate'])
 
 .directive('listItem', function() {
   return {
@@ -18,7 +18,7 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
       canSwipe: '@',
       buttons: '=',
     },
-    template:   '<li class="list-item">\
+    template:   '<li class="list-item" ng-click="onSelect()">\
                    <div class="list-item-edit" ng-if="canDelete && isEditing">\
                      <button class="button button-icon" ng-click="onDelete()"><i ng-class="deleteIcon"></i></button>\
                    </div>\
@@ -47,6 +47,15 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
   };
 })
 
+.directive('listRefresher', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    template: '<div class="list-refresher"><div class="list-refresher-content" ng-transclude></div></div>'
+  }
+})
+
 .directive('list', function() {
   return {
     restrict: 'E',
@@ -56,7 +65,10 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
     scope: {
       isEditing: '=',
       deleteIcon: '@',
-      reorderIcon: '@'
+      reorderIcon: '@',
+      onRefreshOpening: '&',
+      onRefreshHolding: '&',
+      onRefresh: '&',
     },
 
     // So we can require being under this
@@ -75,7 +87,12 @@ angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
 
     compile: function(element, attr, transclude) {
       return function($scope, $element, $attr) {
-        var lv = new ionic.views.List({el: $element[0]});
+        var lv = new ionic.views.List({
+          el: $element[0],
+          onRefreshOpening: function(ratio) { $scope.onRefreshOpening({ratio: ratio}) },
+          onRefreshHolding: function() { $scope.onRefreshHolding(); },
+          onRefresh: function() { $scope.onRefresh(); }
+        });
 
         if(attr.animation) {
           $element.addClass(attr.animation);

js/ext/angular/src/directive/ionicLoading.js

@@ -0,0 +1,24 @@
+(function() {
+'use strict';
+
+angular.module('ionic.ui.loading', [])
+
+.directive('loading', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    link: function($scope, $element){
+      $scope.$on('$destroy', function() {
+        $element.remove();
+      });
+      $element.addClass($scope.animation || '');
+    },
+    template: '<div class="loading-backdrop" ng-class="{enabled: showBackdrop}">' + 
+                '<div class="loading" ng-transclude>' +
+                '</div>' +
+              '</div>'
+  };
+});
+
+})();

js/ext/angular/src/directive/ionicNav.js

@@ -1,26 +1,13 @@
 (function() {
 'use strict';
 
-angular.module('ionic.ui.nav', ['ionic.service'])
+angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.gesture', 'ngAnimate'])
 
-.controller('NavCtrl', ['$scope', '$element', '$compile', 'TemplateLoader', function($scope, $element, $compile, TemplateLoader) {
+.controller('NavCtrl', ['$scope', '$element', '$animate', '$compile', 'TemplateLoader', function($scope, $element, $animate, $compile, TemplateLoader) {
   var _this = this;
 
   angular.extend(this, ionic.controllers.NavController.prototype);
 
-  this.pushFromTemplate = function(tmpl) {
-    data = TemplateLoader.load(tmpl).then(function(data) {
-      console.log('Nav loaded template', data);
-
-      var childScope = $scope.$new();
-      childScope.isVisible = true;
-      
-      $compile(data)(childScope, function(cloned, scope) {
-        $element.append(cloned);
-      });
-    });
-  };
-
   ionic.controllers.NavController.call(this, {
     content: {
     },
@@ -41,14 +28,39 @@ angular.module('ionic.ui.nav', ['ionic.service'])
     }
   });
 
-  $scope.pushController = function(scope) {
+  this.handleDrag = function(e) {
+  };
+
+  this.endDrag = function(e) {
+  };
+
+  this.pushFromTemplate = function(templateUrl) {
+    var childScope = $scope.$new();
+    childScope.isVisible = true;
+
+    TemplateLoader.load(templateUrl).then(function(templateString) {
+      var el = $compile(templateString)(childScope, function(cloned, scope) {
+        angular.element($element[0].children[1].firstElementChild).append(cloned);
+      });
+    });
+  };
+
+  $scope.pushController = function(scope, element) {
     _this.push(scope);
+
+    /*
+    var old = angular.element($element[0].children[1]);
+    $animate.enter(element, $element, $element[0].firstElementChild, function() {
+    });
+    $animate.leave(old, function() {
+    });
+    */
   };
 
   $scope.navController = this;
 }])
 
-.directive('navCtrl', function() {
+.directive('navs', function() {
   return {
     restrict: 'E',
     replace: true,
@@ -62,7 +74,7 @@ angular.module('ionic.ui.nav', ['ionic.service'])
 .directive('navBar', function() {
   return {
     restrict: 'E',
-    require: '^navCtrl',
+    require: '^navs',
     replace: true,
     scope: true,
     template: '<header class="bar bar-header bar-dark nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' + 
@@ -71,6 +83,8 @@ angular.module('ionic.ui.nav', ['ionic.service'])
       '</header>',
     link: function(scope, element, attrs, navCtrl) {
       scope.navController = navCtrl;
+      scope.$watch('navController.controllers.length', function(value) {
+      });
       scope.goBack = function() {
         navCtrl.pop();
       };
@@ -78,33 +92,61 @@ angular.module('ionic.ui.nav', ['ionic.service'])
   };
 })
 
-.directive('navContent', function() {
+.directive('navContent', ['Gesture', '$animate', function(Gesture, $animate) {
   return {
     restrict: 'ECA',
-    require: '^navCtrl',
+    require: '^navs',
     scope: true,
-    link: function(scope, element, attrs, navCtrl) {
-      scope.title = attrs.title;
+    transclude: 'element',
+    compile: function(element, attr, transclude) {
+      return function($scope, $element, $attr, navCtrl) {
+        var lastParent, lastIndex, childScope, childElement;
 
-      if(attrs.navBar === "false") {
-        navCtrl.hideNavBar();
-      } else {
-        navCtrl.showNavBar();
-      }
+        $scope.title = $attr.title;
 
-      scope.isVisible = true;
-      scope.pushController(scope);
-
-      scope.$watch('isVisible', function(value) {
-        console.log('Visiblity changed', value);
-        if(value) {
-          element[0].classList.remove('hidden');
+        if($attr.navBar === "false") {
+          navCtrl.hideNavBar();
         } else {
-          element[0].classList.add('hidden');
+          navCtrl.showNavBar();
         }
-      });
+
+        $scope.pushController($scope, $element);
+
+        
+        $scope.$watch('isVisible', function(value) {
+          if(childElement) {
+            $animate.leave(childElement);
+            childElement = undefined;
+          }
+          if(childScope) {
+            childScope.$destroy();
+            childScope = undefined;
+          }
+          if(value) {
+            childScope = $scope.$new();
+            transclude(childScope, function(clone) {
+              childElement = clone;
+              Gesture.on('drag', function(e) {
+                //navCtrl.handleDrag(e);
+                console.log('Content drag', e);
+              }, childElement[0]);
+
+              Gesture.on('release', function(e) {
+                //navCtrl._endDrag(e);
+              }, childElement[0]);
+
+              var title = $element.parent().parent().parent()[0].querySelector('.title');
+              $animate.enter(clone, $element.parent(), $element);
+              $animate.addClass(angular.element(title), 'slide-left-fade', function() {
+                $animate.removeClass(angular.element(title), 'slide-left-fade', function() {
+                });
+              });
+            });
+          }
+        });
+      }
     }
   };
-});
+}]);
 
 })();

js/ext/angular/src/directive/ionicSlideBox.js

@@ -0,0 +1,79 @@
+(function() {
+'use strict';
+
+/**
+ * @description
+ * The sideMenuCtrl lets you quickly have a draggable side
+ * left and/or right menu, which a center content area.
+ */
+
+angular.module('ionic.ui.slideBox', [])
+
+/**
+ * The internal controller for the side menu controller. This
+ * extends our core Ionic side menu controller and exposes
+ * some side menu stuff on the current scope.
+ */
+.controller('SlideBoxCtrl', ['$scope', '$element', function($scope, $element) {
+  $scope.slides = [];
+  this.slideAdded = function() {
+    $scope.slides.push({});
+  };
+}])
+
+.directive('slideBox', ['$compile', function($compile) {
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    controller: 'SlideBoxCtrl',
+    scope: {},
+    template: '<div class="slide-box">\
+            <div class="slide-box-slides" ng-transclude>\
+            </div>\
+          </div>',
+
+    postLink: function() {
+      console.log('POST LINK');
+    },
+    link: function($scope, $element, $attr, slideBoxCtrl) {
+      // If the pager should show, append it to the slide box
+      if($attr.showPager !== "false") {
+        var childScope = $scope.$new();
+        var pager = $compile('<pager></pager>')(childScope);
+        $element.append(pager);
+
+        $scope.slideBox = new ionic.views.SlideBox({
+          el: $element[0]
+        });
+      }
+    }
+  }
+}])
+
+.directive('slide', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    require: '^slideBox',
+    transclude: true,
+    template: '<div class="slide-box-slide" ng-transclude></div>',
+    compile: function(element, attr, transclude) {
+      return function($scope, $element, $attr, slideBoxCtrl) {
+        slideBoxCtrl.slideAdded();
+      }
+    }
+  }
+})
+
+.directive('pager', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    require: '^slideBox',
+    template: '<div class="slide-box-pager"><span ng-repeat="slide in slides"><i class="icon-record"></i></span></div>'
+  }
+
+});
+
+})();

js/ext/angular/src/directive/ionicTabBar.js

@@ -1,6 +1,6 @@
-angular.module('ionic.ui.tabs', [])
+angular.module('ionic.ui.tabs', ['ngAnimate'])
 
-.controller('TabsCtrl', function($scope) {
+.controller('TabsCtrl', ['$scope', '$element', '$animate', function($scope, $element, $animate) {
   var _this = this;
 
   angular.extend(this, ionic.controllers.TabBarController.prototype);
@@ -8,83 +8,119 @@ angular.module('ionic.ui.tabs', [])
   ionic.controllers.TabBarController.call(this, {
     tabBar: {
       tryTabSelect: function() {},
-      setSelectedItem: function(index) {
-        console.log('TAB BAR SET SELECTED INDEX', index);
-      },
-      addItem: function(item) {
-        console.log('TAB BAR ADD ITEM', item);
-      }
+      setSelectedItem: function(index) {},
+      addItem: function(item) {}
     }
   });
 
+  this.add = function(controller) {
+    this.addController(controller);
+      this.select(0);
+  };
+
+  this.select = function(controllerIndex) {
+    var oldIndex = _this.getSelectedIndex();
+
+    $scope.activeAnimation = $scope.animation;
+    /*
+    if(controllerIndex > oldIndex) {
+    } else if(controllerIndex < oldIndex) {
+      $scope.activeAnimation = $scope.animation + '-reverse';
+    }
+    */
+    _this.selectController(controllerIndex);
+  };
+
   $scope.controllers = this.controllers;
+}])
 
-  $scope.$watch('controllers', function(newV, oldV) {
-    console.log("CControlelrs changed", newV, oldV);
-    //$scope.$apply();
-  });
-})
-
-.directive('tabController', function() {
+.directive('tabs', function() {
   return {
     restrict: 'E',
     replace: true,
-    scope: {},
+    scope: {
+      animation: '@'
+    },
     transclude: true,
     controller: 'TabsCtrl',
     //templateUrl: 'ext/angular/tmpl/ionicTabBar.tmpl.html',
-    template: '<div class="view"><div ng-transclude></div><tab-bar></tab-bar></div>',
+    template: '<div class="view"><tab-controller-bar></tab-controller-bar></div>',
     compile: function(element, attr, transclude, tabsCtrl) {
       return function($scope, $element, $attr) {
+        $scope.$watch('activeAnimation', function(value) {
+          //$element.removeClass($scope.animation + ' ' + $scope.animation + '-reverse');
+          $element.addClass($scope.activeAnimation);
+        });
+        transclude($scope, function(cloned) {
+          $element.prepend(cloned);
+        });
       };
     }
   };
 })
 
 // Generic controller directive
-.directive('tabContent', function() {
-  return {
-    restrict: 'CA',
-    replace: true,
-    require: '^tabController',
-    scope: true,
-    link: function(scope, element, attrs, tabsCtrl) {
-      scope.$watch('isVisible', function(value) {
-        if(!value) {
-          element[0].style.display = 'none';
-        } else {
-          element[0].style.display = 'block';
-        }
-      });
-
-      scope.title = attrs.title;
-      scope.icon = attrs.icon;
-      scope.iconOn = attrs.iconOn;
-      scope.iconOff = attrs.iconOff;
-      tabsCtrl.addController(scope);
-    }
-  };
-})
-
-
-.directive('tabBar', function() {
+.directive('tab', ['$animate', function($animate) {
   return {
     restrict: 'E',
-    require: '^tabController',
+    replace: true,
+    require: '^tabs',
+    scope: true,
+    transclude: 'element',
+    compile: function(element, attr, transclude) {
+      return function($scope, $element, $attr, tabsCtrl) {
+        var childScope, childElement;
+
+        
+        $scope.$watch('isVisible', function(value) {
+          if(childElement) {
+            $animate.leave(childElement);
+            childElement = undefined;
+          }
+          if(childScope) {
+            childScope.$destroy();
+            childScope = undefined;
+          }
+          if(value) {
+            childScope = $scope.$new();
+            transclude(childScope, function(clone) {
+              childElement = clone;
+              childElement.addClass('view-full');
+              $animate.enter(clone, $element.parent(), $element);
+            });
+          }
+        });
+
+        $scope.title = $attr.title;
+        $scope.icon = $attr.icon;
+        $scope.iconOn = $attr.iconOn;
+        $scope.iconOff = $attr.iconOff;
+        tabsCtrl.add($scope);
+
+      }
+    }
+  };
+}])
+
+
+.directive('tabControllerBar', function() {
+  return {
+    restrict: 'E',
+    require: '^tabs',
     transclude: true,
     replace: true,
     scope: true,
     template: '<div class="tabs tabs-primary">' + 
-      '<tab-item title="{{controller.title}}" icon="{{controller.icon}}" icon-on="{{controller.iconOn}}" icon-off="{{controller.iconOff}}" active="controller.isVisible" index="$index" ng-repeat="controller in controllers"></tab-item>' + 
+      '<tab-controller-item title="{{controller.title}}" icon="{{controller.icon}}" icon-on="{{controller.iconOn}}" icon-off="{{controller.iconOff}}" active="controller.isVisible" index="$index" ng-repeat="controller in controllers"></tab-controller-item>' + 
     '</div>'
   };
 })
 
-.directive('tabItem', function() {
+.directive('tabControllerItem', function() {
   return {
     restrict: 'E',
     replace: true,
-    require: '^tabController',
+    require: '^tabs',
     scope: {
       title: '@',
       iconOn: '@',
@@ -94,9 +130,8 @@ angular.module('ionic.ui.tabs', [])
       index: '='
     },
     link: function(scope, element, attrs, tabsCtrl) {
-      console.log('Linked item', scope);
       scope.selectTab = function(index) {
-        tabsCtrl.selectController(scope.index);
+        tabsCtrl.select(scope.index);
       };
     },
     template: 
@@ -106,4 +141,37 @@ angular.module('ionic.ui.tabs', [])
         '<i class="{{iconOff}}" ng-if="!active"></i> {{title}}' +
       '</a>'
   };
+})
+
+.directive('tabBar', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    template: '<div class="tabs tabs-primary" ng-transclude>' + 
+    '</div>'
+  }
+})
+
+.directive('tabItem', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    scope: {
+      title: '@',
+      iconOn: '@',
+      iconOff: '@',
+      active: '=',
+      tabSelected: '@',
+      index: '='
+    },
+    link: function(scope, element, attrs) {
+    },
+    template: 
+      '<a href="#" ng-class="{active:active}" ng-click="tabSelected()" class="tab-item">' +
+        '<i class="{{icon}}" ng-if="icon"></i>' +
+        '<i class="{{iconOn}}" ng-if="active"></i>' +
+        '<i class="{{iconOff}}" ng-if="!active"></i> {{title}}' +
+      '</a>'
+  };
 });

js/ext/angular/src/service/ionicActionSheet.js

@@ -1,4 +1,4 @@
-angular.module('ionic.service.actionSheet', ['ionic.service', 'ionic.ui.actionSheet'])
+angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.ui.actionSheet'])
 
 .factory('ActionSheet', ['$rootScope', '$document', '$compile', 'TemplateLoader', function($rootScope, $document, $compile, TemplateLoader) {
   return {

js/ext/angular/src/service/ionicLoading.js

@@ -0,0 +1,48 @@
+angular.module('ionic.service.loading', ['ionic.ui.loading'])
+
+.factory('Loading', ['$rootScope', '$document', '$compile', function($rootScope, $document, $compile) {
+  return {
+    /**
+     * Load an action sheet with the given template string.
+     *
+     * A new isolated scope will be created for the 
+     * action sheet and the new element will be appended into the body.
+     *
+     * @param {object} opts the options for this ActionSheet (see docs)
+     */
+    show: function(opts) {
+      var defaults = {
+        content: '',
+        animation: 'fade-in',
+        showBackdrop: true
+      };
+
+      opts = angular.extend(defaults, opts);
+
+      var scope = $rootScope.$new(true);
+      angular.extend(scope, opts);
+
+      // Make sure there is only one loading element on the page at one point in time
+      var existing = angular.element($document[0].querySelector('.loading-backdrop'));
+      if(existing.length) {
+        var scope = existing.scope();
+        if(scope.loading) {
+          scope.loading.show();
+          return scope.loading;
+        }
+      }
+
+      // Compile the template
+      var element = $compile('<loading>' + opts.content + '</loading>')(scope);
+
+      $document[0].body.appendChild(element[0]);
+
+      var loading = new ionic.views.Loading({el: element[0] });
+      loading.show();
+
+      scope.loading = loading;
+
+      return loading;
+    }
+  };
+}]);

js/ext/angular/src/service/ionicModal.js

@@ -1,4 +1,4 @@
-angular.module('ionic.service.modal', ['ionic.service'])
+angular.module('ionic.service.modal', ['ionic.service.templateLoad'])
 
 
 .factory('Modal', ['$rootScope', '$document', '$compile', 'TemplateLoader', function($rootScope, $document, $compile, TemplateLoader) {

js/ext/angular/src/service/ionicPopup.js

@@ -0,0 +1,57 @@
+angular.module('ionic.service.popup', ['ionic.service.templateLoad'])
+
+
+.factory('Popup', ['$rootScope', '$document', '$compile', 'TemplateLoader', function($rootScope, $document, $compile, TemplateLoader) {
+
+  var getPopup = function() {
+    // Make sure there is only one loading element on the page at one point in time
+    var existing = angular.element($document[0].querySelector('.popup'));
+    if(existing.length) {
+      var scope = existing.scope();
+      if(scope.popup) {
+        return scope;
+      }
+    }
+  };
+
+  return {
+    alert: function(message) {
+
+      // If there is an existing popup, just show that one
+      var existing = getPopup();
+      if(existing) {
+        return existing.popup.alert(message);
+      }
+
+      var defaults = {
+        title: message,
+        animation: 'fade-in',
+      };
+
+      opts = angular.extend(defaults, opts);
+
+      var scope = $rootScope.$new(true);
+      angular.extend(scope, opts);
+
+      // Compile the template
+      var element = $compile('<popup>' + opts.content + '</popup>')(scope);
+      $document[0].body.appendChild(element[0]);
+
+      var popup = new ionic.views.Popup({el: element[0] });
+      popup.alert(message);
+
+      scope.popup = popup;
+
+      return popup;
+    },
+    confirm: function(cb) {
+    },
+    prompt: function(cb) {
+    },
+    show: function(data) {
+      // data.title
+      // data.template
+      // data.buttons
+    }
+  };
+}]);

js/ext/angular/src/service/ionicTemplateLoad.js

@@ -1,4 +1,4 @@
-angular.module('ionic.service', [])
+angular.module('ionic.service.templateLoad', [])
 
 .factory('TemplateLoader', ['$q', '$http', '$templateCache', function($q, $http, $templateCache) {
   return {

js/ext/angular/test/list.html

@@ -6,9 +6,9 @@
     <!-- 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="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script>
+    <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>
     <style>
 .my-repeat-animation > .ng-enter, 
 .my-repeat-animation > .ng-leave, 
@@ -43,24 +43,30 @@
   opacity:1;
 }
 
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 2px solid rgba(255,255,255,0.4);
+  border-radius: 40px;
+  margin: auto;
+  margin-bottom: 100px;
+}
+.spin-thing {
+  width: 10px;
+  height: 10px;
+  background-color: #4a87ee;
+  border-radius: 10px;
+}
     </style>
 
   </head>
   <body>
 
-    <content has-header="true" ng-controller="TestCtrl" class="reveal-animation">
-      <list is-editing="isEditingItems" on-refresh="refreshProjects()" animation="my-repeat-animation" delete-icon="icon-minus-circled" reorder-icon="icon-navicon">
+    <content ng-controller="TestCtrl" class="reveal-animation">
+      <list is-editing="isEditingItems" on-refresh-holding="almostRefreshing()" on-refresh-opening="almostRefreshProjects(ratio)" on-refresh="refreshProjects()" animation="my-repeat-animation" delete-icon="icon-minus-circled" reorder-icon="icon-navicon">
         <list-refresher>
-          <pulling>
-            <div style="height: 100px; font-size: 30px; text-align: center">PULL TO REFRESH</div>
-          </pulling>
-          <holding>
-            <div style="height: 100px; font-size: 30px; text-align: center">RELEASE TO REFRESH</div>
-          </holding>
-          <refreshing>
-            <div style="height: 100px; font-size: 30px; text-align: center">REFRESHING</div>
-          </refreshing>
-        </div>
+          <spinner ratio="refreshRatio.ratio"></spinner>
+        </list-refresher>
         <list-item ng-repeat="item in items" 
         buttons="item.buttons"
         can-delete="true"
@@ -78,16 +84,52 @@
     <script src="../../../../dist/js/ionic.js"></script>
     <script src="../../../../dist/js/ionic-angular.js"></script>
     <script>
-      angular.module('navTest', ['ionic.ui.list', 'ngAnimate'])
+      angular.module('navTest', ['ionic.ui.list', 'ionic.ui.content', 'ngAnimate'])
+
+      .directive('spinner', function() {
+        return {
+          restrict: 'E',
+          replace: true,
+          scope: {
+            ratio: '='
+          },
+          template: '<div class="spinner"><div class="spin-thing"></div></div>',
+          link: function($scope, $element, $attr) {
+            $scope.$watch('ratio', function(value) {
+              if(value > 0.97) {
+                value = 1;
+              }
+
+              var a = (value * 360) % 360;
+              var r = (a * Math.PI) / 180;
+              var x = (Math.sin(r) * 20) + 14;
+              var y = (Math.cos(r) * -20) + 14;
+
+              $element[0].firstElementChild.style.webkitTransform = 'translate3d(' + x + 'px, ' + y + 'px, 0)';
+              //$element[0].firstElementChild.setAttribute('d', anim);
+            });
+          }
+        }
+      })
 
       .controller('TestCtrl', function($scope) {
+        $scope.refreshRatio = { ratio: 0 };
         var removeItem = function(item) {
           // Remove ourselves
           $scope.items.splice($scope.items.indexOf(item), 1);
         };
 
+        $scope.almostRefreshing = function() {
+          console.log('HOLDING FOR REFRESH');
+        };
+        $scope.almostRefreshProjects = function(amt) {
+          console.log('ALMOST REFRESHING', amt);
+          $scope.refreshRatio.ratio = amt;
+          $scope.$apply();
+        };
+
         $scope.refreshProjects = function() {
-          alert('refreshing!');
+          console.log("REFRESHING");
         };
 
         $scope.items = [

js/ext/angular/test/loading.html

@@ -0,0 +1,36 @@
+<html ng-app="ionic.example">
+  <head>
+    <meta charset="utf-8">
+    <title>Loading</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="/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>
+  </head>
+  <body ng-controller="LoadingCtrl">
+    <button class="button button-dark" ng-click="startLoading()">Load</button>
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
+    <script>
+      angular.module('ionic.example', ['ionic.service.loading'])
+
+      .controller('LoadingCtrl', function($scope, Loading) {
+        $scope.startLoading = function() {
+          var loading = Loading.show({
+            animation: 'fade-in',
+            content: 'Loading'
+          });
+          setTimeout(function() {
+            loading.hide();
+          }, 2000);
+        };
+      });
+    </script>
+  </body>
+</html>
+

js/ext/angular/test/nav.html

@@ -6,12 +6,18 @@
     <!-- Sets initial viewport load and disables zooming  -->
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
     <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
-    <link rel="stylesheet" href="../../../../dist/ionic.css">
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script>
+    <link rel="stylesheet" href="../../../../dist/css/ionic.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>
     <style>
-      .reveal-animation {
+.view {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background-color: black;
+}
+      .slide-in-slide-out {
         /*
         -webkit-transform: translate3d(0%, 0, 0);
                 transform: translate3d(0%, 0, 0);
@@ -20,35 +26,28 @@
                transition:         transform 1s ease-in-out;
         */
       }
-      .reveal-animation.ng-enter {
-        -webkit-transition: .2s ease-in-out all;
-        -webkit-transform:translate3d(100%,0,0) ;
-      }
-      .reveal-animation.ng-enter-active {
-        -webkit-transform:translate3d(0,0,0) ;
-      }
-      .reveal-animation.ng-leave {
-        -webkit-transition: .2s ease-in-out all;
-        -webkit-transform:translate3d(0%,0,0);
-      }
-      .reveal-animation.ng-leave-active {
-        -webkit-transition: .2s ease-in-out all;
-        -webkit-transform:translate3d(-100%,0,0);
-      }
     </style>
 
   </head>
   <body>
 
-    <nav-ctrl>
+    <navs>
       <nav-bar></nav-bar>
 
-      <content has-header="true" ng-controller="AppCtrl" class="reveal-animation">
+      <content has-header="true" ng-controller="AppCtrl" class="slide-in-slide-out">
       </content>
-    </nav-ctrl>
+    </navs>
 
-    <script src="../../../../dist/ionic.js"></script>
-    <script src="../../../../dist/ionic-angular.js"></script>
+    <script id="page.html" type="text/ng-template">
+      <div title="Home" ng-controller="CatsCtrl" class="nav-content slide-in-slide-out">
+        <h1></h1>
+        <a href="#" class="button button-success" ng-click="goNext()">Next</a>
+        <list><list-item ng-repeat="item in items" on-select="goNext()">Test</list-item></list>
+      </div>
+    </script>
+
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
     <script>
       var pageNumber = 0;
 
@@ -56,29 +55,27 @@
         var childScope = $scope.$new();
         childScope.isVisible = true;
 
+        var items = [];
+        for(var i = 0; i < 100; i++) {
+          items.push({});
+        }
+        childScope.items = items;
+
         pageNumber++;
 
-        var el = $compile('<div title="Home: ' + pageNumber + '" ng-controller="CatsCtrl" nav-content has-header="true" class="reveal-animation" ng-show="isVisible">' +
-          '<h1>' + pageNumber + '</h1>' +
-          '<a href="#" class="button button-success" ng-click="goNext()">Next</a>' +
-          '</div>')(childScope, cb);
       }
 
-      angular.module('navTest', ['ionic.ui.nav'])
+      angular.module('navTest', ['ionic.ui.nav', 'ionic.ui.content', 'ionic.ui.list', 'ngAnimate'])
 
       .controller('AppCtrl', function($scope, $compile, $element) {
-        pushIt($scope, $compile, $element, function(cloned, scope) {
-          $element.append(cloned);
-        })
-
+        $scope.navController.pushFromTemplate('page.html');
       })
 
       .controller('CatsCtrl', function($scope, $compile, $element) {
         console.log('Cats', $element);
         $scope.goNext = function() {
-          pushIt($scope, $compile, $element, function(cloned, scope) {
-            $element.parent().append(cloned);
-          })
+          $scope.isVisible = false;
+          $scope.navController.pushFromTemplate('page.html');
         };
       });
     </script>

js/ext/angular/test/slideBox.html

@@ -0,0 +1,62 @@
+<html ng-app="slideBoxTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Sldie Box</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
+    <link rel="stylesheet" href="../../../../dist/css/ionic.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>
+    <style>
+      .box {
+        width: 100%;
+        height: 100%;
+        color: #fff;
+      }
+      .box h1 {
+        position: absolute;
+        top: 50%;
+        width: 100%;
+        margin-top: -80px;
+
+        color: #fff;
+
+        font-size: 160px;
+        text-align: center;
+        font-weight: bold;
+      }
+      .blue {
+        background-color: rgb(71, 138, 238);
+      }
+      .yellow {
+        background-color: rgb(233, 233, 109);
+      }
+      .pink {
+        background-color: rgb(233, 109, 233);
+      }
+    </style>
+  </head>
+  <body>
+
+    <slide-box>
+      <slide>
+        <div class="box blue"><h1>BLUE</h1></div>
+      </slide>
+      <slide>
+        <div class="box yellow"><h1>YELLOW</h1></div>
+      </slide>
+      <slide>
+        <div class="box pink"><h1>PINK</h1></div>
+      </slide>
+    </slide-box>
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
+    <script>
+      angular.module('slideBoxTest', ['ionic.ui.slideBox'])
+    </script>
+  </body>
+</html>
+

js/ext/angular/test/tabBar.html

@@ -0,0 +1,64 @@
+<html ng-app="tabsTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Tab Bars</title>
+
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="../../../../dist/css/ionic.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>
+    <style>
+      .fade-out > .ng-enter, 
+      .fade-out > .ng-leave, 
+      .fade-out > .ng-move {
+        -webkit-transition: 0.2s linear all;
+        transition: 0.4s ease-out all;
+        position:relative;
+      }
+
+      .fade-out > .ng-enter {
+        left:-10px;
+        opacity:0;
+      }
+      .fade-out > .ng-enter.ng-enter-active {
+        left:0;
+        opacity:1;
+      }
+
+      .fade-out > .ng-leave {
+        left:0;
+        opacity:1;
+      }
+      .fade-out > .ng-leave.ng-leave-active {
+        left:-10px;
+        opacity:0;
+      }
+
+      .fade-out > .ng-move {
+        opacity:0.5;
+      }
+      .fade-out > .ng-move.ng-move-active {
+        opacity:1;
+      }
+
+      .completed {
+        text-decoration: line-through;
+      }
+    </style>
+  </head>
+  <body>
+    <tab-bar>
+      <tab-item title="Home"></tab-item>
+      <tab-item title="Item"></tab-item>
+      <tab-item title="Test"></tab-item>
+    </tab-bar>
+
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
+    <script>
+      angular.module('tabsTest', ['ionic.ui', 'ionic.service.modal', 'ionic.service.actionSheet'])
+
+    </script>
+  </body>
+</html>

js/ext/angular/test/tabs.html

@@ -5,9 +5,9 @@
 
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="stylesheet" href="../../../../dist/css/ionic.css">
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script>
+    <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>
     <style>
       .fade-out > .ng-enter, 
       .fade-out > .ng-leave, 
@@ -48,9 +48,9 @@
     </style>
   </head>
   <body>
-    <tab-controller>
+    <tabs animation="fade-in-out">
 
-      <div title="Home" icon-on="icon-ios7-filing" icon-off="icon-ios7-filing-outline" class="tab-content" ng-controller="HomeCtrl">
+      <tab title="Home" icon-on="icon-ios7-filing" icon-off="icon-ios7-filing-outline" ng-controller="HomeCtrl">
         <header class="bar bar-header bar-secondary">
           <button class="button button-clear button-primary" ng-click="newTask()">New</button>
           <h1 class="title">Tasks</h1>
@@ -72,27 +72,27 @@
             </list-item>
           </list>
         </content>
-      </div>
+      </tab>
 
-      <div title="About" icon-on="icon-ios7-clock" icon-off="icon-ios7-clock-outline" class="tab-content">
+      <tab title="About" icon-on="icon-ios7-clock" icon-off="icon-ios7-clock-outline">
         <header class="bar bar-header bar-secondary">
           <h1 class="title">Deadlines</h1>
         </header>
         <content has-header="true" has-tabs="true">
           <h1>Deadlines</h1>
         </content>
-      </div>
+      </tab>
 
-      <div title="Settings" icon-on="icon-ios7-gear" icon-off="icon-ios7-gear-outline" class="tab-content">
+      <tab title="Settings" icon-on="icon-ios7-gear" icon-off="icon-ios7-gear-outline">
         <header class="bar bar-header bar-secondary">
           <h1 class="title">Settings</h1>
         </header>
         <content has-header="true" has-tabs="true">
           <h1>Settings</h1>
         </content>
-      </div>
+      </tab>
       
-    </tab-controller>
+    </tabs>
 
     <script id="newTask.html" type="text/ng-template">
       <div id="task-view" class="modal slide-in-up" ng-controller="TaskCtrl">