center title align

playground/views/main.html

@@ -8,6 +8,7 @@
     <button>p1</button>
     <button>p2</button>
     <button>p3</button>
+    <button>p4</button>
   </ion-nav-items>
 
   <ion-nav-items side="secondary">

src/components/toolbar/toolbar.js

@@ -11,7 +11,7 @@ import {Ion} from '../ion'
   inline: `
     <div class="bar bar-ios">
       <div class="bar-items">
-        <div class="back-button">
+        <div class="back-button bar-item">
           <div class="back-button-icon">&lt;</div>
           <div class="back-button-text">
             <div class="back-default">Back</div>
@@ -24,17 +24,59 @@ import {Ion} from '../ion'
             <content select="ion-view-title"></content>
           </div>
         </div>
-        <div class="bar-primary-item" style="background:red">
+        <div class="bar-item bar-primary-item" style="background:red">
           <content select="ion-nav-items[side=primary]"></content>
         </div>
         <div class="spacer"></div>
-        <div class="bar-secondary-item" style="background:green">
+        <div class="bar-item bar-secondary-item" style="background:green">
           <content select="ion-nav-items[side=secondary]"></content>
         </div>
       </div>
     </div>`
 })
 export class ToolBar {
-  constructor() {
+  constructor(@NgElement() ngEle:NgElement) {
+    this.ele = ngEle.domElement
+
+    window.requestAnimationFrame(() => {
+      this.alignTitle()
+    })
+
   }
+
+  alignTitle(ele) {
+    ele = ele || this.ele;
+    this.titleEle = this.titleEle || ele.querySelector('.title')
+
+    this.textAlign = this.textAlign || window.getComputedStyle(this.titleEle).textAlign
+
+    if (this.textAlign !== 'center') return
+
+    var barItemElements = ele.querySelectorAll('.bar-item')
+    var x, barItemElement
+    var leftMargin = 0
+    var rightMargin = ele.offsetWidth
+    var centerPoint = ele.offsetWidth / 2
+
+    for (x = 0; x < (barItemElements && barItemElements.length); x++) {
+      barItemElement = barItemElements[x]
+
+      var itemRightPoint = barItemElement.offsetLeft + barItemElement.offsetWidth
+      if (itemRightPoint < centerPoint) {
+        if (itemRightPoint > leftMargin) {
+          leftMargin = itemRightPoint
+        }
+      } else if (barItemElement.offsetLeft < rightMargin) {
+        rightMargin = barItemElement.offsetLeft
+      }
+    }
+
+    var newMargin = `0 ${Math.max(leftMargin, ele.offsetWidth - rightMargin)}px`
+
+    if (newMargin !== this.titleMargin) {
+      this.titleEle.style.margin = this.titleMargin = newMargin
+    }
+
+  }
+
 }

src/components/toolbar/toolbar.scss

@@ -28,7 +28,6 @@
   bottom: 0;
   left: 0;
   background: maroon;
-  margin: 0 140px;
 
   @include flex(1);
   @include flex-display();
@@ -37,6 +36,7 @@
 
 .bar-items > .title > .inner-title {
   width: 100%;
+  padding: 0 15px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;