Back button stuff kind of working

dist/css/ionic.css

@@ -183,7 +183,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid #c0c0c0; }
+  border: 1px solid silver; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -630,13 +630,13 @@ address {
   font-style: normal;
   line-height: 1.42857; }
 
-a.subduedΓÇÄ {
+a.subdued‎ {
   padding-right: 10px;
   color: #f8f8f8;
   text-decoration: none; }
-  a.subduedΓÇÄ:hover {
+  a.subdued‎:hover {
     text-decoration: none; }
-  a.subduedΓÇÄ:last-child {
+  a.subdued‎:last-child {
     padding-right: 0; }
 
 /**
@@ -2329,7 +2329,7 @@ input[type="checkbox"][readonly] {
     border-radius: 50%;
     background: white;
     content: ' ';
-    transition: background-color .1s ease-in-out; }
+    transition: background-color 0.1s ease-in-out; }
 
 /* the checkmark within the box */
 .checkbox input:after {
@@ -2344,7 +2344,7 @@ input[type="checkbox"][readonly] {
   border-right: 0;
   content: ' ';
   opacity: 0;
-  transition: opacity .05s ease-in-out;
+  transition: opacity 0.05s ease-in-out;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg); }
 
@@ -2797,7 +2797,7 @@ input[type="range"] {
   .button-icon:active, .button-icon.active {
     background: none;
     box-shadow: none;
-    text-shadow: 0px 0px 10px #fff; }
+    text-shadow: 0px 0px 10px white; }
   .button-icon .icon {
     font-size: 32px; }
 
@@ -2950,6 +2950,42 @@ a.button {
 .slide-left-right-reverse > .ng-leave.ng-leave-active, .slide-left-right-reverse.ng-leave.ng-leave-active {
   -webkit-transform: translate3d(100%, 0, 0); }
 
+.slide-left-right-ios7 > .ng-enter, .slide-left-right-ios7.ng-enter, .slide-left-right-ios7 > .ng-leave, .slide-left-right-ios7.ng-leave {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  -webkit-transition: all 250ms;
+  -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
+  transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
+  transition: all 250ms;
+  transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
+  box-shadow: -1px 0px 3px rgba(0, 0, 0, 0.2), 1px 0px 3px rgba(0, 0, 0, 0.2); }
+.slide-left-right-ios7 > .ng-enter, .slide-left-right-ios7.ng-enter {
+  -webkit-transform: translate3d(100%, 0, 0); }
+.slide-left-right-ios7 > .ng-enter.ng-enter-active, .slide-left-right-ios7.ng-enter.ng-enter-active {
+  -webkit-transform: translate3d(0, 0, 0); }
+.slide-left-right-ios7 > .ng-leave.ng-leave-active, .slide-left-right-ios7.ng-leave.ng-leave-active {
+  -webkit-transform: translate3d(-20%, 0, 0); }
+
+.slide-left-right-ios7-reverse > .ng-enter, .slide-left-right-ios7-reverse.ng-enter, .slide-left-right-ios7-reverse > .ng-leave, .slide-left-right-ios7-reverse.ng-leave {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  -webkit-transition: all 250ms;
+  -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
+  transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
+  transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); }
+.slide-left-right-ios7-reverse > .ng-enter, .slide-left-right-ios7-reverse.ng-enter {
+  -webkit-transform: translate3d(-20%, 0, 0); }
+.slide-left-right-ios7-reverse > .ng-enter.ng-enter-active, .slide-left-right-ios7-reverse.ng-enter.ng-enter-active {
+  -webkit-transform: translate3d(0, 0, 0); }
+.slide-left-right-ios7-reverse > .ng-leave.ng-leave-active, .slide-left-right-ios7-reverse.ng-leave.ng-leave-active {
+  -webkit-transform: translate3d(100%, 0, 0); }
+
 @-webkit-keyframes slideInLeft {
   0% {
     -webkit-transform: translate3d(100%, 0, 0); }
@@ -3531,7 +3567,7 @@ a.button {
 .platform-ios7 .has-header {
   margin-top: 64px; }
 
-/*!
+/*
   Ionicons, v1.3.5
   Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
   https://twitter.com/helloimben  https://twitter.com/ionicframework

dist/css/themes/ionic-ios7.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /** 
  * Nav controllers and header bar animations
  */
@@ -118,7 +119,7 @@
   right: 20px;
   transition: 0.2s ease;
   transition-property: left, right;
-  transition-delay: 0s, .05s; }
+  transition-delay: 0s, 0.05s; }
 
 .toggle :checked + .track {
   /* When the toggle is "on" */
@@ -133,4 +134,4 @@
     right: 0;
     left: 20px;
     -webkit-transform: none;
-    transition-delay: .05s, 0s; }
+    transition-delay: 0.05s, 0s; }

dist/js/ionic-angular.js

@@ -23941,7 +23941,6 @@ angular.module('ionic.service', [
 angular.module('ionic.ui', [
                             'ionic.ui.content',
                             'ionic.ui.tabs',
-                            'ionic.ui.nav',
                             'ionic.ui.navRouter',
                             'ionic.ui.header',
                             'ionic.ui.sideMenu',
@@ -25288,6 +25287,14 @@ angular.module('ionic.ui.navRouter', [])
 .directive('navRouter', ['$rootScope', '$timeout', '$location', '$window', '$route', function($rootScope, $timeout, $location, $window, $route) {
   return {
     restrict: 'AC',
+    // So you can require being under this
+    controller: ['$scope', '$element', function($scope, $element) {
+      this.navBar = {
+        isVisible: true
+      };
+
+      $scope.navController = this;
+    }],
     link: function($scope, $element, $attr) {
       $scope.animation = $attr.animation;
 
@@ -25379,13 +25386,90 @@ angular.module('ionic.ui.navRouter', [])
   }
 }])
 
-.directive('navBack', ['$window', function($window) {
+/**
+ * Our Nav Bar directive which updates as the controller state changes.
+ */
+.directive('navBar', ['$rootScope', function($rootScope) {
+  return {
+    restrict: 'E',
+    require: '^navRouter',
+    replace: true,
+    scope: {
+      type: '@',
+      backButtonType: '@',
+      backButtonLabel: '@',
+      backButtonIcon: '@',
+      alignTitle: '@',
+    },
+    template: '<header class="bar bar-header nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' + 
+        '<button ng-click="goBack()" class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonType" ng-bind-html="backButtonContent"></button>' +
+        '<h1 class="title">{{navController.getTopController().scope.title}}</h1>' + 
+      '</header>',
+    link: function($scope, $element, $attr, navCtrl) {
+      var backButton;
+
+      $scope.enableBackButton = true;
+
+      $scope.backButtonContent = '';
+
+      if($scope.backButtonIcon) {
+        $scope.backButtonContent += '<i class="icon ' + $scope.backButtonIcon + '"></i>';
+      }
+      if($scope.backButtonLabel) {
+        $scope.backButtonContent += ' ' + $scope.backButtonLabel
+      }
+
+      $rootScope.$watch('stackCursorPosition', function(value) {
+        if(value > 0) {
+          $scope.showBackButton = true;
+        } else {
+          $scope.showBackButton = false;
+        }
+        console.log('Stack cursor change', value);
+      });
+
+      $scope.navController = navCtrl;
+
+      $scope.goBack = function() {
+        navCtrl.popController();
+      };
+
+
+      var hb = new ionic.views.HeaderBar({
+        el: $element[0],
+        alignTitle: $scope.alignTitle || 'center'
+      });
+
+      $element.addClass($scope.type);
+
+      $scope.headerBarView = hb;
+
+      $scope.$parent.$on('navigation.push', function() {
+        backButton = angular.element($element[0].querySelector('.button'));
+        backButton.addClass($scope.backButtonType);
+        hb.align();
+      });
+      $scope.$parent.$on('navigation.pop', function() {
+        hb.align();
+      });
+
+      $scope.$on('$destroy', function() {
+        //
+      });
+    }
+  };
+}])
+
+.directive('navBack', ['$window', '$rootScope', function($window, $rootScope) {
   return {
     restrict: 'AC',
     require: '^?navRouter',
     link: function($scope, $element, $attr, navCtrl) {
       var goBack = function() {
-        $window.history.back();
+        // Only trigger back if the stack is greater than zero
+        if($rootScope.stackCursorPosition > 0) {
+          $window.history.back();
+        }
       };
       $element.bind('tap', goBack);
       $element.bind('click', goBack);

js/ext/angular/src/directive/ionicNavRouter.js

@@ -28,6 +28,14 @@ angular.module('ionic.ui.navRouter', [])
 .directive('navRouter', ['$rootScope', '$timeout', '$location', '$window', '$route', function($rootScope, $timeout, $location, $window, $route) {
   return {
     restrict: 'AC',
+    // So you can require being under this
+    controller: ['$scope', '$element', function($scope, $element) {
+      this.navBar = {
+        isVisible: true
+      };
+
+      $scope.navController = this;
+    }],
     link: function($scope, $element, $attr) {
       $scope.animation = $attr.animation;
 
@@ -119,13 +127,90 @@ angular.module('ionic.ui.navRouter', [])
   }
 }])
 
-.directive('navBack', ['$window', function($window) {
+/**
+ * Our Nav Bar directive which updates as the controller state changes.
+ */
+.directive('navBar', ['$rootScope', function($rootScope) {
+  return {
+    restrict: 'E',
+    require: '^navRouter',
+    replace: true,
+    scope: {
+      type: '@',
+      backButtonType: '@',
+      backButtonLabel: '@',
+      backButtonIcon: '@',
+      alignTitle: '@',
+    },
+    template: '<header class="bar bar-header nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' + 
+        '<button ng-click="goBack()" class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonType" ng-bind-html="backButtonContent"></button>' +
+        '<h1 class="title">{{navController.getTopController().scope.title}}</h1>' + 
+      '</header>',
+    link: function($scope, $element, $attr, navCtrl) {
+      var backButton;
+
+      $scope.enableBackButton = true;
+
+      $scope.backButtonContent = '';
+
+      if($scope.backButtonIcon) {
+        $scope.backButtonContent += '<i class="icon ' + $scope.backButtonIcon + '"></i>';
+      }
+      if($scope.backButtonLabel) {
+        $scope.backButtonContent += ' ' + $scope.backButtonLabel
+      }
+
+      $rootScope.$watch('stackCursorPosition', function(value) {
+        if(value > 0) {
+          $scope.showBackButton = true;
+        } else {
+          $scope.showBackButton = false;
+        }
+        console.log('Stack cursor change', value);
+      });
+
+      $scope.navController = navCtrl;
+
+      $scope.goBack = function() {
+        navCtrl.popController();
+      };
+
+
+      var hb = new ionic.views.HeaderBar({
+        el: $element[0],
+        alignTitle: $scope.alignTitle || 'center'
+      });
+
+      $element.addClass($scope.type);
+
+      $scope.headerBarView = hb;
+
+      $scope.$parent.$on('navigation.push', function() {
+        backButton = angular.element($element[0].querySelector('.button'));
+        backButton.addClass($scope.backButtonType);
+        hb.align();
+      });
+      $scope.$parent.$on('navigation.pop', function() {
+        hb.align();
+      });
+
+      $scope.$on('$destroy', function() {
+        //
+      });
+    }
+  };
+}])
+
+.directive('navBack', ['$window', '$rootScope', function($window, $rootScope) {
   return {
     restrict: 'AC',
     require: '^?navRouter',
     link: function($scope, $element, $attr, navCtrl) {
       var goBack = function() {
-        $window.history.back();
+        // Only trigger back if the stack is greater than zero
+        if($rootScope.stackCursorPosition > 0) {
+          $window.history.back();
+        }
       };
       $element.bind('tap', goBack);
       $element.bind('click', goBack);

js/ext/angular/src/ionicAngular.js

@@ -15,7 +15,6 @@ angular.module('ionic.service', [
 angular.module('ionic.ui', [
                             'ionic.ui.content',
                             'ionic.ui.tabs',
-                            'ionic.ui.nav',
                             'ionic.ui.navRouter',
                             'ionic.ui.header',
                             'ionic.ui.sideMenu',

js/ext/angular/test/navRouter.html

@@ -12,6 +12,7 @@
   </head>
   <body>
     <pane nav-router animation="slide-left-right">
+      <nav-bar back-button-type="button-icon" back-button-icon="icon ion-arrow-left-c"></nav-bar>
       <ng-view></ng-view>
     </pane>
 

scss/_animations.scss

@@ -1,3 +1,4 @@
+$ios7-timing-function: cubic-bezier(.1, .7, .1, 1);
 
 /**
  * Animations
@@ -60,6 +61,52 @@
   }
 }
 
+.slide-left-right-ios7 {
+  > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
+    position:absolute;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+    -webkit-transition:all 250ms;
+    -webkit-transition-timing-function: $ios7-timing-function;
+    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
+    transition:all 250ms;
+    transition-timing-function: $ios7-timing-function;
+    box-shadow: $menu-side-shadow;
+  }
+  > .ng-enter, &.ng-enter {
+    -webkit-transform: translate3d(100%, 0, 0);
+  }
+  > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
+    -webkit-transform: translate3d(0, 0, 0);
+  }
+  > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
+    -webkit-transform: translate3d(-20%, 0, 0);
+  }
+}
+.slide-left-right-ios7-reverse {
+  > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
+    position:absolute;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+    -webkit-transition:all 250ms;
+    -webkit-transition-timing-function: $ios7-timing-function;
+    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
+    transition-timing-function: $ios7-timing-function;
+  }
+  > .ng-enter, &.ng-enter {
+    -webkit-transform: translate3d(-20%, 0, 0);
+  }
+  > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
+    -webkit-transform: translate3d(0, 0, 0);
+  }
+  > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
+    -webkit-transform: translate3d(100%, 0, 0);
+  }
+}
 
 @-webkit-keyframes slideInLeft {
   0% {