feat(Ion): Base component class

ionic/components/aside/aside.js

@@ -57,8 +57,8 @@ export class Aside {
   }
 
   onInit() {
-    console.log('Aside content', this.content);
-    this.contentElement = (this.content instanceof Node) ? this.content : this.content.ele;
+    this.contentElement = (this.content instanceof Node) ? this.content : this.content.getNativeElement();
+    console.log('Aside content', this.content, this.contentElement);
 
     Aside.applyConfig(this);
     this.gestureDelegate = Aside.getDelegate(this, 'gesture');

ionic/components/content/content.js

@@ -2,6 +2,8 @@ import {ElementRef} from 'angular2/angular2'
 import {Component} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
+import {Ion} from '../ion';
+
 
 @Component({
   selector: 'ion-content'
@@ -9,15 +11,12 @@ import {View} from 'angular2/src/core/annotations_impl/view';
 @View({
   template: `<div class="scroll-content"><content></content></div>`
 })
-export class Content {
+export class Content extends Ion{
   constructor(elementRef: ElementRef) {
-    // TODO(maxlynch): we need this nativeElement for things like aside, etc.
-    // but we should be able to stamp out this behavior with a base IonicComponent
-    // or something, so all elements have a nativeElement reference or a getElement() method
-    this.ele = elementRef.nativeElement;
+    super(elementRef);
 
     setTimeout(() => {
-      this.scrollElement = this.ele.children[0];
+      this.scrollElement = elementRef.nativeElement.children[0];
     });
   }
 

ionic/components/ion.js

@@ -0,0 +1,15 @@
+/**
+ * Base class for all Ionic components. Exposes some common functionality
+ * that all Ionic components need, such as accessing underlying native elements and
+ * sending/receiving app-level events.
+ */
+export class Ion {
+  constructor(elementRef: ElementRef) {
+    console.log('ION INIT', elementRef);
+    this.elementRef = elementRef;
+  }
+
+  getNativeElement() {
+    return this.elementRef.nativeElement;
+  }
+}

ionic/components/nav/nav.js

@@ -23,9 +23,10 @@ export class Nav extends ViewController {
 
   constructor(
     @Optional() parentViewCtrl: ViewController,
-    injector: Injector
+    injector: Injector,
+    elementRef: ElementRef
   ) {
-    super(parentViewCtrl, injector);
+    super(parentViewCtrl, injector, elementRef);
   }
 
   onInit() {

ionic/components/tabs/tab.js

@@ -38,7 +38,7 @@ export class Tab extends ViewController {
     // A Tab is both a container of many views, and is a view itself.
     // A Tab is one ViewItem within it's parent Tabs (which extends ViewController)
     // A Tab is a ViewController for its child ViewItems
-    super(tabs, injector);
+    super(tabs, injector, elementRef);
     this.tabs = tabs;
 
     this.childNavbar(true);

ionic/components/tabs/tabs.js

@@ -2,7 +2,7 @@ import {Optional} from 'angular2/src/di/annotations_impl'
 import {Component, onInit} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 import {Injector} from 'angular2/di';
-import {NgFor} from 'angular2/angular2';
+import {NgFor, ElementRef} from 'angular2/angular2';
 
 import {ViewController} from '../view/view-controller';
 import {ViewItem} from '../view/view-item';
@@ -43,9 +43,10 @@ export class Tabs extends ViewController {
   constructor(
     @Optional() parentViewCtrl: ViewController,
     @Optional() viewItem: ViewItem,
-    injector: Injector
+    injector: Injector,
+    elementRef: ElementRef
   ) {
-    super(parentViewCtrl, injector);
+    super(parentViewCtrl, injector, elementRef);
 
     // Tabs may also be an actual ViewItem which was navigated to
     // if Tabs is static and not navigated to within a ViewController

ionic/components/view/view-controller.js

@@ -4,6 +4,7 @@ import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_compone
 import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
 import {Injector, bind} from 'angular2/di';
 
+import {Ion} from '../ion';
 import {IonicApp} from '../app/app';
 import {IonicRouter} from '../../routing/router';
 import {ViewItem} from './view-item';
@@ -13,13 +14,14 @@ import {Transition} from '../../transitions/transition';
 import {ClickBlock} from '../../util/click-block';
 import * as util from 'ionic/util';
 
-
-export class ViewController {
+export class ViewController extends Ion {
 
   constructor(
     parentViewCtrl: ViewController,
-    injector: Injector
+    injector: Injector,
+    elementRef: ElementRef
   ) {
+    super(elementRef);
 
     this.parent = parentViewCtrl;
 

ionic/components/view/view.js

@@ -4,12 +4,14 @@ import {Optional} from 'angular2/src/di/annotations_impl'
 
 import {ViewItem} from './view-item';
 
+import {Ion} from '../ion';
 
 @Directive({
   selector: 'ion-view',
 })
-export class IonView {
+export class IonView extends Ion {
   constructor(@Optional() item: ViewItem, elementRef: ElementRef) {
+    super(elementRef);
     this.ele = elementRef.nativeElement;
   }
 }