Merge pull request #157 from driftyco/154-router-nav

wip - router based nav controller

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

@@ -1,6 +1,10 @@
 (function() {
 'use strict';
 
+/**
+ * Note: currently unused
+ */
+
 /**
  * @description
  * The NavController is a navigation stack View Controller modelled off of 

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

@@ -0,0 +1,343 @@
+(function() {
+'use strict';
+
+/**
+ * @description
+ * The NavController is a navigation stack View Controller modelled off of 
+ * UINavigationController from Cocoa Touch. With the Nav Controller, you can
+ * "push" new "pages" on to the navigation stack, and then pop them off to go
+ * back. The NavController controls a navigation bar with a back button and title
+ * which updates as the pages switch.
+ *
+ * The NavController makes sure to not recycle scopes of old pages
+ * so that a pop will still show the same state that the user left.
+ *
+ * However, once a page is popped, its scope is destroyed and will have to be
+ * recreated then next time it is pushed.
+ *
+ */
+
+var actualLocation = null;
+
+angular.module('ionic.ui.navRouter', [])
+
+.run(['$rootScope', function($rootScope) {
+  $rootScope.stackCursorPosition = 0;
+}])
+
+.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;
+
+      $element.addClass('noop-animation');
+
+      var isFirst = true;
+
+      var initTransition = function() {
+        //$element.addClass($scope.animation);
+      };
+
+      var reverseTransition = function() {
+        $element.removeClass('noop-animation');
+        $element.addClass($scope.animation);
+        $element.addClass('reverse');
+      };
+
+      var forwardTransition = function() {
+        $element.removeClass('noop-animation');
+        $element.removeClass('reverse');
+        $element.addClass($scope.animation);
+      };
+
+      $scope.$on('$routeChangeSuccess', function(e, a) {
+      });
+      $scope.$on('$routeChangeStart', function(e, next, current) {
+        var back, historyState = $window.history.state;
+
+        back = !!(historyState && historyState.position <= $rootScope.stackCursorPosition);
+
+        if(isFirst || (next && next.$$route.originalPath === "")) {
+          // Don't animate
+          return;
+        }
+
+        if(back) {
+          reverseTransition();
+        } else {
+          forwardTransition();
+        }
+      });
+
+      $scope.$on('$locationChangeSuccess', function(a, b, c) {
+        // Store the new location
+        $rootScope.actualLocation = $location.path();
+        if(isFirst) {
+          isFirst = false;
+          initTransition();
+        }
+      });  
+
+
+      // Keep track of location changes and update a stack pointer that tracks whether we are
+      // going forwards or back
+      $scope.$watch(function () { return $location.path() }, function (newLocation, oldLocation) {
+        if($rootScope.actualLocation === newLocation) {
+
+          var back, historyState = $window.history.state;
+
+          back = !!(historyState && historyState.position <= $rootScope.stackCursorPosition);
+
+          if (back) {
+            //back button
+            $rootScope.stackCursorPosition--;
+          } else {
+            //forward button
+            $rootScope.stackCursorPosition++;
+          }
+
+        } else {
+          var currentRouteBeforeChange = $route.current;
+
+          if (currentRouteBeforeChange) {
+
+            $window.history.replaceState({
+              position: $rootScope.stackCursorPosition
+            });
+
+            $rootScope.stackCursorPosition++;
+          }
+        }
+      });
+    }
+  }
+}])
+
+/**
+ * Our Nav Bar directive which updates as the controller state changes.
+ */
+.directive('navBar', ['$rootScope', '$animate', '$compile', function($rootScope, $animate, $compile) {
+  var animate = function($scope, $element, oldTitle, data, cb) {
+    var title, nTitle, oTitle, titles = $element[0].querySelectorAll('.title');
+
+    var newTitle = data.title;
+    if(!oldTitle || oldTitle === newTitle) {
+      cb();
+      return;
+    }
+
+    title = angular.element(titles[0]);
+    oTitle = $compile('<h1 class="title" ng-bind="oldTitle"></h1>')($scope);
+    title.replaceWith(oTitle);
+    nTitle = $compile('<h1 class="title" ng-bind="currentTitle"></h1>')($scope);
+
+    var insert = $element[0].firstElementChild || null;
+
+    $animate.enter(nTitle, $element, insert && angular.element(insert), function() {
+      cb();
+    });
+    $animate.leave(angular.element(oTitle), function() {
+    });
+
+    $scope.$on('navRouter.rightButtonsChanged', function(e, buttons) {
+      console.log('Buttons changing for nav bar', buttons);
+    });
+  };
+
+  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}">' + 
+        '<div class="buttons"> ' +
+          '<button nav-back class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonType" ng-bind-html="backButtonContent"></button>' +
+          '<button ng-click="button.tap($event)" ng-repeat="button in leftButtons" class="button {{button.type}}" ng-bind="button.text"></button>' + 
+        '</div>' +
+        '<h1 class="title" ng-bind="currentTitle"></h1>' + 
+        '<div class="buttons"> ' +
+          '<button ng-click="button.tap($event)" ng-repeat="button in rightButtons" class="button {{button.type}}" ng-bind="button.text"></button>' + 
+        '</div>' +
+      '</header>',
+    link: function($scope, $element, $attr, navCtrl) {
+      var backButton;
+
+      // Create the back button content and show/hide it based on scope settings
+      $scope.enableBackButton = true;
+      $scope.backButtonContent = '';
+      if($scope.backButtonIcon) {
+        $scope.backButtonContent += '<i class="icon ' + $scope.backButtonIcon + '"></i>';
+      }
+      if($scope.backButtonLabel) {
+        $scope.backButtonContent += ' ' + $scope.backButtonLabel
+      }
+
+      // Listen for changes in the stack cursor position to indicate whether a back
+      // button should be shown (this can still be disabled by the $scope.enableBackButton
+      $rootScope.$watch('stackCursorPosition', function(value) {
+        if(value > 0) {
+          $scope.showBackButton = true;
+        } else {
+          $scope.showBackButton = false;
+        }
+      });
+
+      // Store a reference to our nav controller
+      $scope.navController = navCtrl;
+
+      // Initialize our header bar view which will handle resizing and aligning our title labels
+      var hb = new ionic.views.HeaderBar({
+        el: $element[0],
+        alignTitle: $scope.alignTitle || 'center'
+      });
+      $scope.headerBarView = hb;
+
+      // Add the type of header bar class to this element
+      $element.addClass($scope.type);
+
+      var updateHeaderData = function(data) {
+        console.log('Header data changed', data);
+
+        var oldTitle = $scope.currentTitle;
+        $scope.oldTitle = oldTitle;
+
+        if(typeof data.title !== 'undefined') {
+          $scope.currentTitle = data.title;
+        }
+
+        if(typeof data.leftButtons !== 'undefined') {
+          $scope.leftButtons = data.leftButtons;
+        }
+        if(typeof data.rightButtons !== 'undefined') {
+          $scope.rightButtons = data.rightButtons;
+        }
+        if(typeof data.hideBackButton !== 'undefined') {
+          $scope.enableBackButton = data.hideBackButton !== true;
+        }
+
+        if(data.animate !== false && typeof data.title !== 'undefined') {
+          animate($scope, $element, oldTitle, data, function() {
+            hb.align();
+          });
+        } else {
+          hb.align();
+        }
+      };
+
+      // Listen for changes on title change, and update the title
+      $scope.$parent.$on('navRouter.pageChanged', function(e, data) {
+        updateHeaderData(data);
+      });
+
+      $scope.$parent.$on('navRouter.pageShown', function(e, data) {
+        updateHeaderData(data);
+      });
+
+
+      /*
+      $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('navPage', ['$parse', function($parse) {
+  return {
+    restrict: 'E',
+    scope: true,
+    require: '^navRouter',
+    link: function($scope, $element, $attr, navCtrl) {
+      $element.addClass('pane');
+
+      $scope.icon = $attr.icon;
+      $scope.iconOn = $attr.iconOn;
+      $scope.iconOff = $attr.iconOff;
+
+      // Should we hide a back button when this tab is shown
+      $scope.hideBackButton = $scope.$eval($attr.hideBackButton);
+
+      // Whether we should animate on tab change, also impacts whether we
+      // tell any parent nav controller to animate
+      $scope.animate = $scope.$eval($attr.animate);
+
+      // Grab whether we should update any parent nav router on tab changes
+      $scope.doesUpdateNavRouter = $scope.$eval($attr.doesUpdateNavRouter) || true;
+
+      // watch for changes in the left buttons
+      var leftButtonsGet = $parse($attr.leftButtons);
+      $scope.$watch(leftButtonsGet, function(value) {
+        $scope.leftButtons = value;
+        if($scope.doesUpdateNavRouter) {
+          $scope.$emit('navRouter.leftButtonsChanged', $scope.rightButtons);
+        }
+      });
+
+      // watch for changes in the right buttons
+      var rightButtonsGet = $parse($attr.rightButtons);
+      $scope.$watch(rightButtonsGet, function(value) {
+        $scope.rightButtons = value;
+      });
+
+      // watch for changes in the title
+      var titleGet = $parse($attr.title);
+      $scope.$watch(titleGet, function(value) {
+        $scope.title = value;
+        $scope.$emit('navRouter.pageChanged', {
+          title: value,
+          animate: $scope.animate
+        });
+      });
+
+    }
+  }
+}])
+
+.directive('navBack', ['$window', '$rootScope', function($window, $rootScope) {
+  return {
+    restrict: 'AC',
+    require: '^?navRouter',
+    link: function($scope, $element, $attr, navCtrl) {
+      var goBack = function() {
+        // 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);
+
+      $scope.$on('$destroy', function() {
+        $element.unbind('tap', goBack);
+        $element.unbind('click', goBack);
+      });
+    }
+  }
+}]);
+
+})();

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

@@ -85,7 +85,7 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
 })
 
 // Generic controller directive
-.directive('tab', ['$animate', function($animate) {
+.directive('tab', ['$animate', '$parse', function($animate, $parse) {
   return {
     restrict: 'E',
     replace: true,
@@ -100,6 +100,30 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
         $scope.icon = $attr.icon;
         $scope.iconOn = $attr.iconOn;
         $scope.iconOff = $attr.iconOff;
+
+        // Should we hide a back button when this tab is shown
+        $scope.hideBackButton = $scope.$eval($attr.hideBackButton);
+
+        // Whether we should animate on tab change, also impacts whether we
+        // tell any parent nav controller to animate
+        $scope.animate = $scope.$eval($attr.animate);
+
+        // Grab whether we should update any parent nav router on tab changes
+        $scope.doesUpdateNavRouter = $scope.$eval($attr.doesUpdateNavRouter) || true;
+
+        var leftButtonsGet = $parse($attr.leftButtons);
+        $scope.$watch(leftButtonsGet, function(value) {
+          $scope.leftButtons = value;
+          if($scope.doesUpdateNavRouter) {
+            $scope.$emit('navRouter.leftButtonsChanged', $scope.rightButtons);
+          }
+        });
+
+        var rightButtonsGet = $parse($attr.rightButtons);
+        $scope.$watch(rightButtonsGet, function(value) {
+          $scope.rightButtons = value;
+        });
+
         tabsCtrl.add($scope);
         
         $scope.$watch('isVisible', function(value) {
@@ -119,6 +143,19 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
               childElement.addClass('view-full');
               $animate.enter(clone, $element.parent(), $element);
 
+              if($scope.title) {
+                // Send the title up in case we are inside of a nav controller
+                if($scope.doesUpdateNavRouter) {
+                  $scope.$emit('navRouter.pageShown', {
+                    title: $scope.title,
+                    rightButtons: $scope.rightButtons,
+                    leftButtons: $scope.leftButtons,
+                    hideBackButton: $scope.hideBackButton || false,
+                    animate: $scope.animate || true
+                  });
+                }
+                //$scope.$emit('navRouter.titleChanged', $scope.title);
+              }
               $scope.$broadcast('tab.shown');
             });
           }

js/ext/angular/src/ionicAngular.js

@@ -15,7 +15,7 @@ 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',
                             'ionic.ui.slideBox',
@@ -31,6 +31,7 @@ angular.module('ionic', [
     
     // Angular deps
     'ngAnimate',
+    'ngRoute',
     'ngTouch',
     'ngSanitize'
 ]);

js/ext/angular/test/directive/ionicNavRouter.unit.js

@@ -0,0 +1,19 @@
+describe('Angular Ionic Nav Router', function() {
+  var modal, q;
+
+  beforeEach(module('ngRoute'));
+  beforeEach(module('ionic.ui.navRouter'));
+
+  beforeEach(inject(function($compile, $rootScope, $controller) {
+    compile = $compile;
+    scope = $rootScope;
+  }));
+
+  iit('Should init', function() {
+    element = compile('<pane nav-router>' +
+      '<nav-bar></nav-bar>' +
+      '<ng-view></ng-view>' +
+    '</pane>')(scope);
+
+  });
+});

js/ext/angular/test/navAndTabs.html

@@ -0,0 +1,149 @@
+<html ng-app="navTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Nav Bars And Tabs</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="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
+  </head>
+  <body>
+    <pane nav-router animation="slide-left-right">
+      <nav-bar class="nav-title-slide-ios7" type="bar-positive" back-button-type="button-icon" back-button-icon="icon ion-arrow-left-c"></nav-bar>
+      <ng-view></ng-view>
+    </pane>
+
+    <script id="page1.html" type="text/ng-template">
+      <nav-page hide-back-button="true">
+        <tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive">
+
+          <!-- Pets tab -->
+          <tab title="Pets" icon="icon ion-home" ng-controller="PetsCtrl">
+            <content has-header="true" has-tabs="true">
+              <list>
+                <link-item ng-repeat="pet in pets" type="item-text-wrap" href="#/pet/{{pet.id}}">
+                    <h3>{{pet.title}}</h3>
+                    <p>{{pet.description}}</p>
+                  </item>
+                </link-item>
+              </list>
+            </content>
+          </tab>
+
+          <!-- Adoption tab -->
+          <tab title="Adopt" icon="icon ion-heart" ng-controller="AdoptCtrl" right-buttons="buttons">
+            <content has-header="true" has-tabs="true">
+              <div class="padding">
+                <h2>Adopt a pet today.</h2>
+              </div>
+              <div class="list list-inset">
+                <label class="item item-input">
+                  <span class="input-label">Your name</span>
+                  <input type="text">
+                </label>
+                <label class="item item-input">
+                  <span class="input-label">Your email</span>
+                  <input type="password">
+                </label>
+                <label class="item item-input">
+                  <textarea placeholder="Any more info?"></textarea>
+                </label>
+                <button class="button button-positive button-block">Adopt</button>
+              </div>
+            </content>
+          </tab>
+
+          <!-- Home tab -->
+          <tab title="About" icon="icon ion-search">
+            <content has-header="true" has-tabs="true" padding="true">
+              <h3>About this app</h3>
+              <p>
+                This is a sample seed project for the Ionic Framework. Please change it to match your needs.
+              </p>
+            </content>
+          </tab>
+
+        </tabs>
+      </nav-page>
+    </script>
+    <script id="pet.html" type="text/ng-template">
+      <nav-page title="pet.title" ng-controller="PetCtrl">
+      </nav-page>
+    </script>
+    <script id="page2.html" type="text/ng-template">
+      <nav-page title="'Beets'">
+        <h1>Page 2</h1>
+        <a class="button button-pure" nav-back>Back</a>
+        <a class="button button-assertive" href="#/page3">Next</a>
+      </nav-page>
+    </script>
+    <script id="page3.html" type="text/ng-template">
+      <nav-page title="'Battlestar Galactica'">
+        <h1>Page 3</h1>
+        <a class="button button-pure" nav-back>Back</a>
+      </nav-page>
+    </script>
+    <script>
+      angular.module('navTest', ['ionic'])
+
+
+      .config(function($routeProvider, $locationProvider) {
+        $routeProvider.when('/', {
+          templateUrl: 'page1.html',
+          controller: 'Page1Ctrl'
+        });
+
+        $routeProvider.when('/page2', {
+          templateUrl: 'page2.html',
+        });
+
+        $routeProvider.when('/page3', {
+          templateUrl: 'page3.html',
+        });
+
+        $routeProvider.when('/pet/:petId', {
+          templateUrl: 'pet.html',
+          controller: 'PetCtrl'
+        });
+        
+
+        // configure html5 to get links working on jsfiddle
+        //$locationProvider.html5Mode(true);
+
+      })
+
+      .controller('Page1Ctrl', function($scope) {
+        $scope.num = Math.floor(Math.random() * 100);
+      })
+
+      .controller('PetsCtrl', function($scope, $routeParams) {
+        $scope.pets = [
+          { id: 1, title: 'Cat', description: 'Furry little feline' }
+        ];
+      })
+
+      .controller('PetCtrl', function($scope, $routeParams) {
+        $scope.pet = {
+          title: 'Cat'
+          }
+      })
+
+      .controller('AdoptCtrl', function($scope) {
+        $scope.buttons = [
+        { 
+          text: 'Adopt',
+          tap: function(e) {
+            console.log('ADOPT TAPPED');
+          },
+          type: 'button-clear'
+        }
+        ];
+      });
+
+      
+    </script>
+  </body>
+</html>

js/ext/angular/test/navRouter.html

@@ -0,0 +1,70 @@
+<html ng-app="navTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Nav Bars</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="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
+  </head>
+  <body>
+    <pane nav-router animation="slide-left-right">
+      <nav-bar class="nav-title-slide-ios7" type="bar-positive" back-button-type="button-icon" back-button-icon="icon ion-arrow-left-c"></nav-bar>
+      <ng-view></ng-view>
+    </pane>
+
+    <script id="page1.html" type="text/ng-template">
+      <nav-page title="'Bears'">
+        <h1>Page 1</h1>
+        <span>{{num}}</span>
+        <a class="button button-pure" nav-back>Back</a>
+        <a class="button button-assertive" href="#/page2">Next</a>
+      </nav-page>
+    </script>
+    <script id="page2.html" type="text/ng-template">
+      <nav-page title="'Beets'">
+        <h1>Page 2</h1>
+        <a class="button button-pure" nav-back>Back</a>
+        <a class="button button-assertive" href="#/page3">Next</a>
+      </nav-page>
+    </script>
+    <script id="page3.html" type="text/ng-template">
+      <nav-page title="'Battlestar Galactica'">
+        <h1>Page 3</h1>
+        <a class="button button-pure" nav-back>Back</a>
+      </nav-page>
+    </script>
+    <script>
+      angular.module('navTest', ['ionic'])
+
+
+      .config(function($routeProvider, $locationProvider) {
+        $routeProvider.when('/', {
+          templateUrl: 'page1.html',
+          controller: 'Page1Ctrl'
+        });
+
+        $routeProvider.when('/page2', {
+          templateUrl: 'page2.html',
+        });
+
+        $routeProvider.when('/page3', {
+          templateUrl: 'page3.html',
+        });
+
+        // configure html5 to get links working on jsfiddle
+        //$locationProvider.html5Mode(true);
+
+      })
+
+      .controller('Page1Ctrl', function($scope) {
+        $scope.num = Math.floor(Math.random() * 100);
+      });
+
+      
+    </script>
+  </body>
+</html>