add title positioning to headerbar and navbar

components/ionHeaderBar/ionHeaderBar.js

@@ -1,7 +1,5 @@
-Template.ionHeaderBar.rendered = function () {
-  Session.set('hasHeader', true);
-
-  function alignTitle () {
+IonHeaderBar = {
+  alignTitle: function () {
     var align = this.alignTitle || 'center';
     var $title = this.$('.title');
 
@@ -17,9 +15,28 @@ Template.ionHeaderBar.rendered = function () {
     } else if (align === 'right') {
       $title.addClass('title-right');
     }
-  };
+  },
 
-  alignTitle.call(this);
+  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())
+    }
+  }
+};
+
+Template.ionHeaderBar.rendered = function () {
+  Session.set('hasHeader', true);
+  IonHeaderBar.alignTitle.call(this);
+  IonHeaderBar.positionTitle.call(this);
 };
 
 Template.ionHeaderBar.destroyed = function () {

components/ionNavBackButton/ionNavBackButton.html

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

components/ionNavBar/ionNavBar.js

@@ -20,30 +20,8 @@ Template.ionNavBar.created = function () {
 Template.ionNavBar.rendered = function () {
   Session.set('hasHeader', true);
 
-  function alignTitle () {
-    var align = this.alignTitle || 'center';
-    var $title = this.$('.title');
-
-    if (align === 'center' && Platform.isAndroid()) {
-      $title.addClass('title-left');
-      return;
-    }
-
-    if (align === 'center') {
-      $title.addClass('title-center');
-    } else if (align === 'left') {
-      $title.addClass('title-left');
-    } else if (align === 'right') {
-      $title.addClass('title-right');
-    }
-  };
-
-  function positionTitle () {
-
-  };
-
-  alignTitle.call(this);
-  positionTitle.call(this);
+  IonHeaderBar.alignTitle.call(this);
+  IonHeaderBar.positionTitle.call(this);
 
   var template = this;
   this.find('[data-navbar-container]')._uihooks = {
@@ -58,7 +36,8 @@ Template.ionNavBar.rendered = function () {
       if ($node.hasClass('title')) {
         $node.insertBefore(next).addClass('title-entering title-stage');
 
-        alignTitle.call(template);
+        IonHeaderBar.alignTitle.call(template);
+        IonHeaderBar.positionTitle.call(template);
 
         Meteor.setTimeout(function() {
           $node.removeClass('title-stage').addClass('title-active');

package.js

@@ -98,6 +98,7 @@ Package.onUse(function(api) {
 
   api.export("IonActionSheet");
   api.export("IonBackdrop");
+  api.export("IonHeaderBar");
   api.export("IonLoading");
   api.export("IonModal");
   api.export("IonPopover");