feat(aside-toggle): better easy toggle

ionic/components/app/app.ts

@@ -60,6 +60,21 @@ export class IonicApp {
     // TODO(mlynch): We need to track the lifecycle of this component to remove it onDehydrate
   }
 
+  /**
+   * Unregister a known component with a key.
+   */
+  unregister(key, component) {
+    delete this.components[key];
+  }
+
+  getRegisteredComponent(cls) {
+    for(let component of this.components) {
+      if(component instanceof cls) {
+        return component;
+      }
+    }
+  }
+
   /**
    * Get the component for the given key.
    */

ionic/components/app/register.ts

@@ -1,5 +1,6 @@
-import {Directive} from 'angular2/angular2';
+import {Directive, Self, Type} from 'angular2/angular2';
 
+import {Ion} from '../ion';
 import {IonicApp} from './app';
 
 
@@ -26,3 +27,30 @@ export class Register {
   }
 
 }
+
+
+@Directive({
+  selector: '[ref]',
+  properties: [
+    'ref'
+  ],
+  host: {
+    'this.ref': 'refId'
+  }
+})
+export class Ref {
+
+  constructor(app: IonicApp, @Self() component: any) {
+    this.app = app;
+    console.log('Register on any', component)
+  }
+
+  onInit() {
+    /*
+    if (this.register && this.registerId) {
+      this.app.register(this.registerId, this.register);
+    }
+    */
+  }
+
+}

ionic/components/aside/aside-toggle.ts

@@ -0,0 +1,24 @@
+import {forwardRef, Component, Host, View, EventEmitter, ElementRef} from 'angular2/angular2';
+
+import {Ion} from '../ion';
+import {IonicApp} from '../app/app';
+import {Button} from '../ion/components/button';
+import {IonicConfig} from '../../config/config';
+import {IonicDirective} from '../../config/annotations';
+
+@IonicDirective({
+  selector: '[aside-toggle]',
+  host: {
+    '(^click)': 'toggle($event)'
+  }
+})
+export class AsideToggle {
+  constructor(app: IonicApp) {
+    //TODO(mlynch): don't hard code this, evaluate with ref system
+    this.aside = app.getComponent('menu');
+  }
+  toggle(event) {
+    console.log('Toggling', this.aside)
+    this.aside && this.aside.toggle();
+  }
+}

ionic/components/aside/aside.ts

@@ -1,6 +1,7 @@
 import {forwardRef, Component, Host, View, EventEmitter, ElementRef} from 'angular2/angular2';
 
 import {Ion} from '../ion';
+import {IonicApp} from '../app/app';
 import {IonicConfig} from '../../config/config';
 import {IonicComponent} from '../../config/annotations';
 import * as types from './extensions/types'
@@ -42,9 +43,14 @@ import {dom} from 'ionic/util'
 })
 export class Aside extends Ion {
 
-  constructor(elementRef: ElementRef, config: IonicConfig) {
+  constructor(app: IonicApp, elementRef: ElementRef, config: IonicConfig) {
     super(elementRef, config);
 
+    this.app = app;
+
+    // TODO(mlynch): We need to build out the ref system
+    app.register('menu', this);
+
     this.opening = new EventEmitter('opening');
 
     // TODO: Use Animation Class
@@ -53,6 +59,10 @@ export class Aside extends Ion {
     })
   }
 
+  onDestroy() {
+    app.unregister(this);
+  }
+
   onInit() {
     super.onInit();
     this.contentElement = (this.content instanceof Node) ? this.content : this.content.getNativeElement();

ionic/components/aside/test/basic/home-page.html

@@ -2,7 +2,7 @@
 <ion-navbar *navbar>
 
   <ion-nav-items primary>
-    <button (^click)="toggleAside()" id="e2eHeaderToggleAside">
+    <button aside-toggle id="e2eHeaderToggleAside">
       <icon name="ion-navicon"></icon>
     </button>
   </ion-nav-items>
@@ -18,7 +18,7 @@
   <h3>Content</h3>
 
   <p>
-    <button id="e2eContentToggleAside" (click)="toggleAside()">Toggle Aside</button>
+    <button id="e2eContentToggleAside" aside-toggle>Toggle Aside</button>
   </p>
 
 </ion-content>

ionic/components/aside/test/basic/index.ts

@@ -5,16 +5,9 @@ import {App, IonicApp, IonicView, NavController} from 'ionic/ionic';
   templateUrl: 'home-page.html'
 })
 class HomePage {
-
   constructor(app: IonicApp) {
     this.app = app;
   }
-
-  toggleAside() {
-    console.log('toggleAside')
-    this.app.getComponent('mainMenu').toggle();
-  }
-
 }
 
 
@@ -27,9 +20,4 @@ class E2EApp {
     this.app = app;
     this.rootView = HomePage;
   }
-
-  closeMenu() {
-    this.app.getComponent('mainMenu').close();
-  }
-
 }

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

@@ -1,5 +1,5 @@
 
-<ion-aside #aside [content]="content" [register]="aside" register-id="mainMenu">
+<ion-aside [content]="content">
   <ion-toolbar secondary>
     <ion-title>Left Menu</ion-title>
   </ion-toolbar>