refactor nav for latest version of ionic css framework

.versions

@@ -0,0 +1,24 @@
+base64@1.0.2
+blaze@2.0.4
+blaze-tools@1.0.2
+deps@1.0.6
+ejson@1.0.5
+fastclick@1.0.2
+geojson-utils@1.0.2
+html-tools@1.0.3
+htmljs@1.0.3
+id-map@1.0.2
+jquery@1.0.2
+json@1.0.2
+meteor@1.1.4
+meteoric:ionic@0.1.2
+minifiers@1.1.3
+minimongo@1.0.6
+observe-sequence@1.0.4
+ordered-dict@1.0.2
+random@1.0.2
+reactive-var@1.0.4
+spacebars-compiler@1.0.4
+templating@1.0.10
+tracker@1.0.4
+underscore@1.0.2

components/ionBody/ionBody.js

@@ -1,19 +1,19 @@
 isIOS = function () {
   return !!navigator.userAgent.match(/iPad/i) || !!navigator.userAgent.match(/iPhone/i) || !!navigator.userAgent.match(/iPod/i);
-}
+};
 
 isAndroid = function () {
   return navigator.userAgent.indexOf('Android') > 0;
-}
-
-isWindowsPhone = function () {
-  return navigator.userAgent.indexOf('Windows Phone') > -1;
-}
-
-Template.ionBody.rendered = function () {
-  // this.snapper = null;
 };
 
+Template.registerHelper('isIOS', function () {
+  return isIOS();
+});
+
+Template.registerHelper('isAndroid', function () {
+  return isAndroid();
+});
+
 Template.ionBody.helpers({
   platformClasses: function () {
     var classes = ['grade-a'];
@@ -30,9 +30,6 @@ Template.ionBody.helpers({
     if (Meteor.isCordova && isAndroid()) {
       classes.push('platform-android');
     }
-    if (Meteor.isCordova && isWindowsPhone()) {
-      classes.push('platform-windowsphone');
-    }
 
     return classes.join(' ');
   }
@@ -50,11 +47,10 @@ Template.ionBody.events({
   },
 
   'click [data-nav-direction]': function (event, template) {
-    $('[data-nav-container]').addClass($(event.target).data('nav-direction'));
+    $('[data-nav-container]').addClass('nav-view-direction-' + $(event.target).data('nav-direction'));
   },
 
   'click [data-ion-menu-toggle]': function (event, template) {
-    console.log('template', template);
     if (!IonSideMenu.snapper) {
       return;
     }

components/ionNavView/ionNavView.html

@@ -1,5 +1,5 @@
 <template name="ionNavView">
-  <div class="{{classes}}" data-nav-container>
+  <div data-nav-container class="nav-view-transition-{{transition}} nav-view-direction-forward">
     {{> UI.contentBlock}}
   </div>
 </template>

components/ionNavView/ionNavView.js

@@ -1,11 +1,21 @@
 Template.ionNavView.created = function () {
   Session.setDefault('ionNavDirection', 'forward');
 
-  this.animation = 'slide-left-right';
-  this.animationDuration = 250;
+  if (isIOS()) {
+    this.transition = 'ios';
+  } else {
+    this.transition = 'android';
+  }
 
-  if (this.data && this.data.animation) {
-    this.animation = this.data.animation;
+  // Allow overriding the transition
+  if (this.data && this.data.transition) {
+    this.transition = this.data.transition;
+  }
+
+  if (this.transition === 'ios') {
+    this.transitionDuration = 450;
+  } else {
+    this.transitionDuration = 200;
   }
 };
 
@@ -14,45 +24,37 @@ Template.ionNavView.rendered = function () {
 
   this.find('[data-nav-container]')._uihooks = {
     insertElement: function(node, next) {
-      if (!template.animation || !$(node).hasClass('view')) {
+      if (!template.transition || !$(node).hasClass('view')) {
         $(node).insertBefore(next);
         return;
       }
 
-      $(node).insertBefore(next).addClass('ng-enter');
+      $(node).insertBefore(next).addClass('nav-view-entering nav-view-stage');
       Meteor.setTimeout(function() {
-        $(node).addClass('ng-enter-active');
-      }, 10);
+        $(node).removeClass('nav-view-stage').addClass('nav-view-active');
+      }, 16);
 
       Meteor.setTimeout(function () {
-        $(this).removeClass('ng-enter ng-enter-active');
-        $('[data-nav-container]').removeClass('reverse forward');
-      }, template.animationDuration);
+        $(this).removeClass('nav-view-entering');
+        $('[data-nav-container]').removeClass('nav-view-direction-back').addClass('nav-view-direction-forward');
+      }, template.transitionDuration);
     },
 
     removeElement: function(node) {
-      if (!template.animation || !$(node).hasClass('view')) {
+      if (!template.transition || !$(node).hasClass('view')) {
         $(node).remove();
         return;
       }
 
-      $(node).addClass('ng-leave');
+      $(node).addClass('nav-view-leaving nav-view-stage');
       Meteor.setTimeout(function() {
-        $(node).addClass('ng-leave-active');
-      }, 10);
+        $(node).removeClass('nav-view-stage').addClass('nav-view-active');
+      }, 16);
 
       Meteor.setTimeout(function () {
-        $(node).removeClass('ng-leave ng-leave-active');
         $(node).remove();
         Session.set('ionNavDirection', 'forward');
-      }, template.animationDuration);
+      }, template.transitionDuration);
     }
   };
 };
-
-Template.ionNavView.helpers({
-  classes: function () {
-    var classes = [Template.instance().animation];
-    return classes.join(' ');
-  }
-});