feat(tabs): add select event to tab

ionic/components/tabs/tab.ts

@@ -1,4 +1,5 @@
 import {ChangeDetectorRef, Component, Directive, Host, ElementRef, Compiler, AppViewManager, NgZone, Renderer} from 'angular2/core';
+import {EventEmitter, Output} from 'angular2/core';
 
 import {IonicApp} from '../app/app';
 import {Config} from '../../config/config';
@@ -54,6 +55,7 @@ import {Tabs} from './tabs';
   template: '<template #contents></template>'
 })
 export class Tab extends NavController {
+  @Output() select: EventEmitter<any> = new EventEmitter();
 
   constructor(
     @Host() parentTabs: Tabs,
@@ -142,6 +144,13 @@ export class Tab extends NavController {
     this.hideNavbars(!isSelected);
   }
 
+  /**
+   * @private
+   */
+  emitSelect() {
+    this.select.emit();
+  }
+
   /**
    * @private
    */

ionic/components/tabs/tabs.ts

@@ -1,4 +1,4 @@
-import {Directive, ElementRef, Optional, Host, forwardRef, ViewContainerRef} from 'angular2/core';
+import {Directive, ElementRef, Optional, Host, forwardRef, ViewContainerRef, HostListener} from 'angular2/core';
 import {NgFor, NgIf} from 'angular2/common';
 
 import {Ion} from '../ion';
@@ -68,7 +68,6 @@ import {rafFrames} from '../../util/dom';
   ]
 })
 export class Tabs extends Ion {
-
   /**
    * Hi, I'm "Tabs". I'm really just another Page, with a few special features.
    * "Tabs" can be a sibling to other pages that can be navigated to, which those
@@ -163,9 +162,17 @@ export class Tabs extends Ion {
 
     selectedTab.load(opts, () => {
 
-      this._tabs.forEach(tab => {
-        tab.setSelected(tab === selectedTab);
-      });
+      selectedTab.emitSelect();
+
+      if (selectedTab.root) {
+        // only show the selectedTab if it has a root
+        // it's possible the tab is only for opening modal's or signing out
+        // and doesn't actually have content. In the case there's no content
+        // for a tab then do nothing and leave the current view as is
+        this._tabs.forEach(tab => {
+          tab.setSelected(tab === selectedTab);
+        });
+      }
 
       this._highlight && this._highlight.select(selectedTab);
 
@@ -278,8 +285,7 @@ let tabIds = -1;
     '[class.has-icon]': 'hasIcon',
     '[class.has-title-only]': 'hasTitleOnly',
     '[class.icon-only]': 'hasIconOnly',
-    '[class.disable-hover]': 'disHover',
-    '(click)': 'onClick()',
+    '[class.disable-hover]': 'disHover'
   }
 })
 class TabButton extends Ion {
@@ -297,7 +303,8 @@ class TabButton extends Ion {
     this.hasIconOnly = (this.hasIcon && !this.hasTitle);
   }
 
-  onClick() {
+  @HostListener('click')
+  private onClick() {
     this.tabs.select(this.tab);
   }
 }

ionic/components/tabs/test/advanced/index.ts

@@ -1,6 +1,6 @@
 import {RouteConfig, Location} from 'angular2/router';
 
-import {App, Page, NavController} from 'ionic/ionic';
+import {App, Page, NavController, Modal} from 'ionic/ionic';
 
 
 @Page({
@@ -36,15 +36,33 @@ class SignIn {
 }
 
 
+@Page({
+  template: `
+    <ion-toolbar>
+      <ion-title>Chat Modal</ion-title>
+    </ion-toolbar>
+    <ion-content padding>
+      <p><button (click)="close()">Close Modal</button></p>
+    </ion-content>
+  `
+})
+class ChatPage {}
+
+
 @Page({
   templateUrl: './tabs.html'
 })
 class TabsPage {
-  constructor(nav: NavController) {
+  constructor(private modal: Modal) {
     this.tab1Root = Tab1Page1
     this.tab2Root = Tab2Page1
     this.tab3Root = Tab3Page1
   }
+
+  chat() {
+    console.log('Chat clicked!');
+    this.modal.open(ChatPage);
+  }
 }
 
 

ionic/components/tabs/test/advanced/tabs.html

@@ -3,4 +3,7 @@
   <ion-tab tabTitle="Recents" tabIcon="call" [root]="tab1Root"></ion-tab>
   <ion-tab tabTitle="Favorites" tabIcon="star" [root]="tab2Root"></ion-tab>
   <ion-tab tabTitle="Settings" tabIcon="settings" [root]="tab3Root"></ion-tab>
+  <ion-tab tabTitle="Chat" tabIcon="chatbubbles" (select)="chat()"></ion-tab>
 </ion-tabs>
+
+<ion-overlay></ion-overlay>