fix navbar title positioning bugs, allow passing custom icon to back button

components/ionHeaderBar/ionHeaderBar.js

@@ -20,16 +20,22 @@ IonHeaderBar = {
   positionTitle: function () {
     var $title = this.$('.title');
     var $leftButton = $('.button.pull-left');
-
-    if ($leftButton.length) {
-      $title.css('left', $leftButton.outerWidth());
-      $title.css('right', $leftButton.outerWidth());
-    }
-
     var $rightButton = $('.button.pull-right');
-    if ($rightButton.length) {
-      $title.css('right', $rightButton.outerWidth())
+
+    // Find out which button is wider,
+    // use that to offset the title on both sides
+    var leftButtonWidth = 0;
+    var rightButtonWidth = 0;
+    if ($leftButton.length) {
+      leftButtonWidth = $leftButton.outerWidth();
     }
+    if ($rightButton.length) {
+      rightButtonWidth = $rightButton.outerWidth();
+    }
+
+    var margin = Math.max(leftButtonWidth, rightButtonWidth);
+    $title.css('left', margin);
+    $title.css('right', margin);
   }
 };
 

components/ionNavBackButton/ionNavBackButton.html

@@ -1,10 +1,10 @@
 <template name="ionNavBackButton">
-  <a href="{{url}}" class="buttons button button-clear back-button pull-left" data-nav-direction="back">
-    {{> ionIcon icon='ios-arrow-back'}}
+  <button class="{{classes}}">
+    {{> ionIcon icon=icon}}
     {{#unless isAndroid}}
       <span class="back-text">
         {{text}}
       </span>
     {{/unless}}
-  </a>
+  </button>
 </template>

components/ionNavBackButton/ionNavBackButton.js

@@ -1,8 +1,34 @@
+Template.ionNavBackButton.events({
+  'click': function (event) {
+    $('[data-nav-container]').addClass('nav-view-direction-back');
+    $('[data-navbar-container]').addClass('nav-bar-direction-back');
+    // window.history.back();
+  }
+});
+
 Template.ionNavBackButton.helpers({
+  classes: function () {
+    var classes = ['buttons button button-clear back-button pull-left'];
+
+    if (this.class) {
+      classes.push(this.class);
+    }
+
+    return classes.join(' ');
+  },
+
+  icon: function () {
+    if (this.icon) {
+      return this.icon;
+    } else {
+      return 'ios-arrow-back';
+    }
+  },
+
   text: function () {
     if (this.text) {
       return this.text;
-    } else {
+    } else if(this.text !== false) {
       return 'Back';
     }
   },