From 6c735dc3f7d5fa5b0ee02cf5f601b72a70a15d04 Mon Sep 17 00:00:00 2001
From: Nick Wientge <nick@exygeninteractive.com>
Date: Tue, 23 Dec 2014 21:23:12 -0500
Subject: [PATCH] initial navbar animiations

---
 components/ionBody/ionBody.js       |   1 +
 components/ionNavBar/ionNavBar.html |   7 ++
 components/ionNavBar/ionNavBar.js   | 121 ++++++++++++++++++++++++++++
 components/ionNavView/ionNavView.js |  30 +++----
 package.js                          |   3 +
 5 files changed, 148 insertions(+), 14 deletions(-)
 create mode 100644 components/ionNavBar/ionNavBar.html
 create mode 100644 components/ionNavBar/ionNavBar.js

diff --git a/components/ionBody/ionBody.js b/components/ionBody/ionBody.js
index 2557d83..48cc2ac 100644
--- a/components/ionBody/ionBody.js
+++ b/components/ionBody/ionBody.js
@@ -48,6 +48,7 @@ Template.ionBody.events({
 
   'click [data-nav-direction]': function (event, template) {
     $('[data-nav-container]').addClass('nav-view-direction-' + $(event.target).data('nav-direction'));
+    $('[data-navbar-container]').addClass('nav-bar-direction-' + $(event.target).data('nav-direction'));
   },
 
   'click [data-ion-menu-toggle]': function (event, template) {
diff --git a/components/ionNavBar/ionNavBar.html b/components/ionNavBar/ionNavBar.html
new file mode 100644
index 0000000..220edaf
--- /dev/null
+++ b/components/ionNavBar/ionNavBar.html
@@ -0,0 +1,7 @@
+<template name="ionNavBar">
+  <div class="{{classes}} nav-bar-block nav-bar-transition-{{transition}} nav-bar-direction-forward" data-navbar-container>
+    {{> yield "headerButtonLeft"}}
+    {{> yield "headerTitle"}}
+    {{> yield "headerButtonRight"}}
+  </div>
+</template>
diff --git a/components/ionNavBar/ionNavBar.js b/components/ionNavBar/ionNavBar.js
new file mode 100644
index 0000000..c68e970
--- /dev/null
+++ b/components/ionNavBar/ionNavBar.js
@@ -0,0 +1,121 @@
+Template.ionNavBar.created = function () {
+  if (isAndroid()) {
+    this.transition = 'android';
+  } else {
+    this.transition = 'ios';
+  }
+
+  // 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;
+  }
+};
+
+Template.ionNavBar.rendered = function () {
+  Session.set('hasHeader', true);
+
+  var align = this.alignTitle || 'center';
+  var $title = this.$('.title');
+
+  if (align === 'center') {
+    $title.addClass('title-center');
+  } else if (align === 'left') {
+    $title.addClass('title-left');
+  } else if (align === 'right') {
+    $title.addClass('title-right');
+  }
+
+  // Animate the title
+  var template = this;
+  this.find('[data-navbar-container]')._uihooks = {
+    insertElement: function(node, next) {
+      var $node = $(node);
+
+      if (!$node.hasClass('title') && !$node.hasClass('button')) {
+        $node.insertBefore(next);
+        return;
+      }
+
+      if ($node.hasClass('title')) {
+        $node.insertBefore(next).addClass('title-entering title-stage');
+        Meteor.setTimeout(function() {
+          $node.removeClass('title-stage').addClass('title-active');
+        }, 16);
+
+        Meteor.setTimeout(function () {
+          $(this).removeClass('title-entering');
+          $('[data-navbar-container]').removeClass('nav-bar-direction-back').addClass('nav-bar-direction-forward');
+        }, template.transitionDuration + 16);
+      }
+
+      if ($node.hasClass('button')) {
+        $node.insertBefore(next).addClass('button-entering button-stage');
+        Meteor.setTimeout(function() {
+          $node.removeClass('button-stage').addClass('button-active');
+        }, 16);
+
+        Meteor.setTimeout(function () {
+          $(this).removeClass('button-entering');
+        }, template.transitionDuration + 16);
+      }
+    },
+
+    removeElement: function(node) {
+      var $node = $(node);
+      if (!$node.hasClass('title') && !$node.hasClass('button')) {
+        $node.remove();
+        return;
+      }
+
+      if ($node.hasClass('title')) {
+        $node.addClass('title-leaving title-stage');
+        Meteor.setTimeout(function() {
+          $node.removeClass('title-stage').addClass('title-active');
+        }, 16);
+
+        Meteor.setTimeout(function () {
+          $node.remove();
+        }, template.transitionDuration + 16);
+      }
+
+      if ($node.hasClass('button')) {
+        $node.addClass('button-leaving button-stage');
+        Meteor.setTimeout(function() {
+          $node.removeClass('button-stage').addClass('tibuttontle-active');
+        }, 16);
+
+        Meteor.setTimeout(function () {
+          $node.remove();
+        }, template.transitionDuration + 16);
+      }
+    }
+  };
+};
+
+Template.ionNavBar.destroyed = function () {
+  Session.set('hasHeader', false);
+};
+
+Template.ionNavBar.helpers({
+  classes: function () {
+    var classes = ['bar', 'bar-header'];
+
+    if (this.class) {
+      classes.push(this.class);
+    } else {
+      classes.push('bar-stable');
+    }
+
+    return classes.join(' ');
+  },
+
+  transition: function () {
+    return Template.instance().transition;
+  }
+});
diff --git a/components/ionNavView/ionNavView.js b/components/ionNavView/ionNavView.js
index 68bce75..a480ed4 100644
--- a/components/ionNavView/ionNavView.js
+++ b/components/ionNavView/ionNavView.js
@@ -1,10 +1,10 @@
 Template.ionNavView.created = function () {
   Session.setDefault('ionNavDirection', 'forward');
 
-  if (isIOS()) {
-    this.transition = 'ios';
-  } else {
+  if (isAndroid()) {
     this.transition = 'android';
+  } else {
+    this.transition = 'ios';
   }
 
   // Allow overriding the transition
@@ -24,37 +24,39 @@ Template.ionNavView.rendered = function () {
 
   this.find('[data-nav-container]')._uihooks = {
     insertElement: function(node, next) {
-      if (!template.transition || !$(node).hasClass('view')) {
-        $(node).insertBefore(next);
+      var $node = $(node);
+      if (!template.transition || !$node.hasClass('view')) {
+        $node.insertBefore(next);
         return;
       }
 
-      $(node).insertBefore(next).addClass('nav-view-entering nav-view-stage');
+      $node.insertBefore(next).addClass('nav-view-entering nav-view-stage');
       Meteor.setTimeout(function() {
-        $(node).removeClass('nav-view-stage').addClass('nav-view-active');
+        $node.removeClass('nav-view-stage').addClass('nav-view-active');
       }, 16);
 
       Meteor.setTimeout(function () {
         $(this).removeClass('nav-view-entering');
         $('[data-nav-container]').removeClass('nav-view-direction-back').addClass('nav-view-direction-forward');
-      }, template.transitionDuration);
+      }, template.transitionDuration + 16);
     },
 
     removeElement: function(node) {
-      if (!template.transition || !$(node).hasClass('view')) {
-        $(node).remove();
+      var $node = $(node);
+      if (!template.transition || !$node.hasClass('view')) {
+        $node.remove();
         return;
       }
 
-      $(node).addClass('nav-view-leaving nav-view-stage');
+      $node.addClass('nav-view-leaving nav-view-stage');
       Meteor.setTimeout(function() {
-        $(node).removeClass('nav-view-stage').addClass('nav-view-active');
+        $node.removeClass('nav-view-stage').addClass('nav-view-active');
       }, 16);
 
       Meteor.setTimeout(function () {
-        $(node).remove();
+        $node.remove();
         Session.set('ionNavDirection', 'forward');
-      }, template.transitionDuration);
+      }, template.transitionDuration + 16);
     }
   };
 };
diff --git a/package.js b/package.js
index dd5b703..48c0080 100644
--- a/package.js
+++ b/package.js
@@ -48,6 +48,9 @@ Package.onUse(function(api) {
     "components/ionModal/ionModal.html",
     "components/ionModal/ionModal.js",
 
+    "components/ionNavBar/ionNavBar.html",
+    "components/ionNavBar/ionNavBar.js",
+
     "components/ionNavView/ionNavView.html",
     "components/ionNavView/ionNavView.js",