From 475b4f85608d36c8e9aa43d8efa13127fb5ed44b Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Sun, 22 Mar 2015 00:07:18 -0500
Subject: [PATCH] center title align

---
 playground/views/main.html          |  1 +
 src/components/toolbar/toolbar.js   | 50 ++++++++++++++++++++++++++---
 src/components/toolbar/toolbar.scss |  2 +-
 3 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/playground/views/main.html b/playground/views/main.html
index c64f708550..ebd5c144cd 100644
--- a/playground/views/main.html
+++ b/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">
diff --git a/src/components/toolbar/toolbar.js b/src/components/toolbar/toolbar.js
index e466b1b6f6..41f5a77b79 100644
--- a/src/components/toolbar/toolbar.js
+++ b/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
+    }
+
+  }
+
 }
diff --git a/src/components/toolbar/toolbar.scss b/src/components/toolbar/toolbar.scss
index b970ecc3e7..e0fde15c30 100644
--- a/src/components/toolbar/toolbar.scss
+++ b/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;