update toolbar

ionic/components.ts

@@ -28,3 +28,4 @@ export * from 'ionic/components/switch/switch'
 export * from 'ionic/components/view/view'
 export * from 'ionic/components/tabs/tabs'
 export * from 'ionic/components/tabs/tab'
+export * from 'ionic/components/toolbar/toolbar'

ionic/components/app/test/sink/main.html

@@ -1,7 +1,5 @@
 <ion-aside #aside [content]="content">
-  <ion-toolbar>
-    <ion-title>Ionic 2.0</ion-title>
-  </ion-toolbar>
+  <ion-toolbar><ion-title>Ionic 2.0</ion-title></ion-toolbar>
   <ion-content>
     <ion-list>
       <ion-item *ng-for="#c of components" (^click)="openPage(aside, c)">
@@ -22,14 +20,3 @@ my-modal {
   height: 100%;
 }
 </style>
-<!--
-<ion-view #content>
-  <ion-toolbar>
-    <ion-title>Ionic Sink</ion-title>
-  </ion-toolbar>
-  <ion-content padding>
-    <h2>Ionic Kitchen Sink</h2>
-  </ion-content>
-
-</ion-view>
--->

ionic/components/app/test/weather/index.ts

@@ -130,9 +130,7 @@ class WeatherApp {
 
 @IonicView({
   template: `<ion-view id="settings-modal">
-    <ion-toolbar>
-      <ion-title>Settings</ion-title>
-    </ion-toolbar>
+    <ion-toolbar><ion-title>Settings</ion-title></ion-toolbar>
     <ion-content padding>
       <form (^submit)="doSubmit($event)" [ng-form-model]="settingsForm">
         <ion-list>

ionic/components/content/test/pull-to-refresh/main.html

@@ -1,7 +1,5 @@
 <ion-view nav-title="Pull to refresh">
-  <ion-toolbar>
-    <ion-title>Pull to Refresh</ion-title>
-  </ion-toolbar>
+  <ion-toolbar><ion-title>Pull to Refresh</ion-title></ion-toolbar>
 
   <ion-content>
     <ion-refresher (refresh)="doRefresh($event, amt)"></ion-refresher>

ionic/components/scroll/test/basic/main.html

@@ -1,7 +1,5 @@
 <ion-view nav-title="Pull to refresh">
-  <ion-toolbar>
-    <ion-title>Scroll</ion-title>
-  </ion-toolbar>
+  <ion-toolbar><ion-title>Scroll</ion-title></ion-toolbar>
 
   <ion-content>
 

ionic/components/toolbar/toolbar.ts

@@ -1,79 +1,125 @@
-import {Component, Directive, View, ElementRef} from 'angular2/angular2';
-import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref';
+import {Directive, View, Parent, onInit, ElementRef, forwardRef} from 'angular2/angular2';
 
+import {Ion} from '../ion';
+import {IonicComponent} from '../../config/annotations';
 import * as dom from '../../util/dom';
 
 
-@Component({
+@IonicComponent({
   selector: 'ion-toolbar'
 })
 @View({
-  template: `<div class="toolbar-inner"><content></content></div>`
+  template: `
+    <div class="navbar-inner">
+      <div class="navbar-title">
+        <div class="navbar-inner-title">
+          <content select="ion-title"></content>
+        </div>
+      </div>
+      <div class="navbar-item navbar-primary-item">
+        <content select="[primary]"></content>
+      </div>
+      <div class="navbar-item navbar-secondary-item">
+        <content select="[secondary]"></content>
+      </div>
+    </div>
+  `,
+  directives: [
+    forwardRef(() => Title),
+    forwardRef(() => NavbarItem)
+  ]
 })
-export class Toolbar {
+export class Toolbar extends Ion {
   constructor(elementRef: ElementRef) {
-    this.ele = elementRef.nativeElement;
+    super(elementRef);
+    this.eleRef = elementRef;
+    this.itemEles = [];
+  }
+
+  onInit() {
+    Toolbar.applyConfig(this);
+  }
+
+  element() {
+    return this.eleRef;
+  }
+
+  titleElement(eleRef) {
+    if (arguments.length) {
+      this._nbTlEle = eleRef;
+    }
+    return this._nbTlEle;
+  }
+
+  itemElements(eleRef) {
+    if (arguments.length) {
+      this.itemEles.push(eleRef);
+    }
+    return this.itemEles;
+  }
+
+  titleText(eleRef) {
+    if (arguments.length) {
+      this._ttTxt.push(eleRef);
+    }
+    return this._ttTxt;
   }
 
   alignTitle() {
-    const toolbarEle = this.ele;
-    const innerTitleEle = this._innerTitleEle || (this._innerTitleEle = toolbarEle.querySelector('.toolbar-inner-title'));
-    const titleEle = this._titleEle || (this._titleEle = innerTitleEle.querySelector('ion-title'));
-    const style = this._style || (this._style = window.getComputedStyle(titleEle));
+    // called after the navbar/title has had a moment to
+    // finish rendering in their correct locations
+    const navbarEle = this.eleRef.nativeElement;
+    const titleEle = this._ttEle || (this._ttEle = navbarEle.querySelector('ion-title'));
 
-    const titleOffsetWidth = titleEle.offsetWidth;
+    // don't bother if there's no title element
+    if (!titleEle) return;
+
+    // get the computed style of the title element
+    const titleStyle = this._ttStyle || (this._ttStyle = window.getComputedStyle(titleEle));
+
+    // don't bother if we're not trying to center align the title
+    if (titleStyle.textAlign !== 'center') return;
+
+    // get all the dimensions
     const titleOffsetLeft = titleEle.offsetLeft;
-    const titleScrollWidth = titleEle.scrollWidth;
-    const toolbarOffsetWidth = toolbarEle.offsetWidth;
+    const titleOffsetRight = navbarEle.offsetWidth - (titleOffsetLeft + titleEle.offsetWidth);
 
-    // TODO!!! When an element is being reused by angular2, it'll sometimes keep the
-    // styles from the original element's use, causing these calculations to be wrong
-    if (window.getComputedStyle(innerTitleEle).margin !== '0px') {
-      this._showTitle();
-      return;
+    let marginLeft = 0;
+    let marginRight = 0;
+    if (titleOffsetLeft < titleOffsetRight) {
+      marginLeft = (titleOffsetRight - titleOffsetLeft) + 5;
+
+    } else if (titleOffsetLeft > titleOffsetRight) {
+      marginRight = (titleOffsetLeft - titleOffsetRight) - 5;
     }
 
-    // only align if the title is center and if it isn't already overflowing
-    if (style.textAlign !== 'center' || titleOffsetWidth < titleScrollWidth) {
-      this._showTitle();
+    let margin = `0 ${marginRight}px 0 ${marginLeft}px`;
 
-    } else {
-      let rightMargin = toolbarOffsetWidth - (titleOffsetLeft + titleOffsetWidth);
-      let centerMargin = titleOffsetLeft - rightMargin;
-
-      innerTitleEle.style.margin = `0 ${centerMargin}px 0 0`;
-
-      dom.raf(() => {
-        if (titleEle.offsetWidth < titleEle.scrollWidth) {
-          // not enough room yet, just left align title
-          innerTitleEle.style.margin = '';
-          innerTitleEle.style.textAlign = 'left';
-        }
-        this._showTitle();
-      })
-    }
-  }
-
-  _showTitle() {
-    if (!this._shown) {
-      this._shown = true;
-      this._innerTitleEle.classList.remove('toolbar-title-hide');
+    if ((marginLeft || marginRight) && margin !== this._ttMargin) {
+      // only do an update if it has to
+      const innerTitleEle = this._innerTtEle || (this._innerTtEle = navbarEle.querySelector('.navbar-inner-title'));
+      innerTitleEle.style.margin = this._ttMargin = margin;
     }
   }
 
 }
 
 
-/*
-  Used to find and register headers in a view, and this directive's
-  content will be moved up to the common toolbar location, and created
-  using the same context as the view's content area.
-*/
 @Directive({
-  selector: 'template[toolbar]'
+  selector: '.navbar-title'
 })
-export class ToolbarTemplate {
-  constructor(item: ViewItem, protoViewRef: ProtoViewRef) {
-    item.addProtoViewRef('toolbar', protoViewRef);
+class Title {
+  constructor(@Parent() toolbar: Toolbar, elementRef: ElementRef) {
+    toolbar.titleElement(elementRef);
+  }
+}
+
+
+@Directive({
+  selector: '.navbar-item'
+})
+class NavbarItem {
+  constructor(@Parent() toolbar: Toolbar, elementRef: ElementRef) {
+    toolbar.itemElements(elementRef);
   }
 }

ionic/config/annotations.ts

@@ -9,6 +9,7 @@ import {
   Slides, Slide, SlidePager,
   Tabs, Tab,
   List, Item,
+  Toolbar,
   Icon,
   Checkbox, Switch, Label, Input,
   Segment, SegmentButton, SegmentControlValueAccessor,
@@ -29,6 +30,7 @@ export function IonicView(config) {
       List, Item,
       Slides, Slide, SlidePager,
       Tabs, Tab,
+      Toolbar,
 
       // Media
       Icon,