refactor(modal): add css classes after createComponent

src/components/modal/modal.ts

@@ -1,10 +1,10 @@
-import {Component, ComponentResolver, HostListener, ViewChild, ViewContainerRef} from '@angular/core';
+import {Component, ComponentResolver, HostListener, Renderer, ViewChild, ViewContainerRef} from '@angular/core';
 
 import {addSelector} from '../../config/bootstrap';
 import {Animation} from '../../animations/animation';
-import {NavParams} from '../nav/nav-params';
 import {isPresent, pascalCaseToDashCase} from '../../util/util';
 import {Key} from '../../util/key';
+import {NavParams} from '../nav/nav-params';
 import {PageTransition} from '../../transitions/page-transition';
 import {TransitionOptions} from '../../transitions/transition';
 import {ViewController} from '../nav/view-controller';
@@ -113,23 +113,20 @@ import {windowDimensions} from '../../util/dom';
  */
 export class Modal extends ViewController {
 
-  public modalViewType: string;
-
   constructor(componentType: any, data: any = {}, opts: ModalOptions = {}) {
     data.componentType = componentType;
     opts.showBackdrop = isPresent(opts.showBackdrop) ? !!opts.showBackdrop : true;
     opts.enableBackdropDismiss = isPresent(opts.enableBackdropDismiss) ? !!opts.enableBackdropDismiss : true;
     data.opts = opts;
+
     super(ModalCmp, data);
-    this.modalViewType = componentType.name;
-    this.viewType = 'modal';
     this.isOverlay = true;
     this.usePortal = true;
   }
 
   /**
-  * @private
+   * @private
-  */
+   */
   getTransitionName(direction: string) {
     let key = (direction === 'back' ? 'modalLeave' : 'modalEnter');
     return this._nav && this._nav.config.get(key);
@@ -176,7 +173,7 @@ export interface ModalOptions {
   template:
     '<ion-backdrop disableScroll="false" (click)="bdClick($event)"></ion-backdrop>' +
     '<div class="modal-wrapper">' +
-      '<div #viewport></div>' +
+      '<div #viewport nav-viewport></div>' +
     '</div>'
 })
 export class ModalCmp {
@@ -186,16 +183,18 @@ export class ModalCmp {
   private d: any;
   private enabled: boolean;
 
-  constructor(private _compiler: ComponentResolver, private _navParams: NavParams, private _viewCtrl: ViewController) {
+  constructor(private _compiler: ComponentResolver, private _renderer: Renderer, private _navParams: NavParams, private _viewCtrl: ViewController) {
     this.d = _navParams.data.opts;
   }
 
   loadComponent(done: Function) {
-    addSelector(this._navParams.data.componentType, 'ion-page');
+    let componentType = this._navParams.data.componentType;
+    addSelector(componentType, 'ion-page');
 
-    this._compiler.resolveComponent(this._navParams.data.componentType).then((componentFactory) => {
+    this._compiler.resolveComponent(componentType).then((componentFactory) => {
       let componentRef = this.viewport.createComponent(componentFactory, this.viewport.length, this.viewport.parentInjector);
-
+      this._renderer.setElementClass(componentRef.location.nativeElement, 'show-page', true);
+      this._renderer.setElementClass(componentRef.location.nativeElement, componentType.name, true);
       this._viewCtrl.setInstance(componentRef.instance);
       this.enabled = true;
       done();
@@ -235,13 +234,6 @@ export class ModalCmp {
      let backdropEle = ele.querySelector('ion-backdrop');
      let backdrop = new Animation(backdropEle);
      let wrapper = new Animation(ele.querySelector('.modal-wrapper'));
-     let page = <HTMLElement> ele.querySelector('ion-page');
-     let pageAnimation = new Animation(page);
-
-     // auto-add page css className created from component JS class name
-     let cssClassName = pascalCaseToDashCase((<Modal>enteringView).modalViewType);
-     pageAnimation.before.addClass(cssClassName);
-     pageAnimation.before.addClass('show-page');
 
      backdrop.fromTo('opacity', 0.01, 0.4);
      wrapper.fromTo('translateY', '100%', '0%');
@@ -252,8 +244,7 @@ export class ModalCmp {
        .easing('cubic-bezier(0.36,0.66,0.04,1)')
        .duration(400)
        .add(backdrop)
-       .add(wrapper)
+       .add(wrapper);
-       .add(pageAnimation);
 
      if (enteringView.hasNavbar()) {
        // entering page has a navbar
@@ -300,14 +291,6 @@ class ModalMDSlideIn extends PageTransition {
     let ele = enteringView.pageRef().nativeElement;
     let backdrop = new Animation(ele.querySelector('ion-backdrop'));
     let wrapper = new Animation(ele.querySelector('.modal-wrapper'));
-    let page = <HTMLElement> ele.querySelector('ion-page');
-    let pageAnimation = new Animation(page);
-
-    // auto-add page css className created from component JS class name
-    let cssClassName = pascalCaseToDashCase((<Modal>enteringView).modalViewType);
-    pageAnimation.before.addClass(cssClassName);
-    pageAnimation.before.addClass('show-page');
-
 
     backdrop.fromTo('opacity', 0.01, 0.4);
     wrapper.fromTo('translateY', '40px', '0px');
@@ -317,8 +300,7 @@ class ModalMDSlideIn extends PageTransition {
     const EASING = 'cubic-bezier(0.36,0.66,0.04,1)';
     this.element(enteringView.pageRef()).easing(EASING).duration(DURATION)
       .add(backdrop)
-      .add(wrapper)
+      .add(wrapper);
-      .add(pageAnimation);
 
     if (enteringView.hasNavbar()) {
       // entering page has a navbar

src/components/modal/test/basic/index.ts

@@ -1,12 +1,12 @@
 import {Component} from '@angular/core';
 import {ionicBootstrap, Config, Platform} from '../../../../../src';
-import {Modal, ActionSheet, NavController, NavParams, Transition, TransitionOptions, ViewController} from '../../../../../src';
+import {Modal, ActionSheet, NavController, NavParams, PageTransition, TransitionOptions, ViewController} from '../../../../../src';
 
 @Component({
   templateUrl: 'main.html'
 })
 class E2EPage {
-  platforms;
+  platforms: string[];
 
   constructor(private nav: NavController, config: Config, platform: Platform) {
     console.log('platforms', platform.platforms());
@@ -36,7 +36,7 @@ class E2EPage {
     let modal = Modal.create(ModalPassData, { userId: 8675309 });
     this.nav.present(modal);
 
-    modal.onDismiss(data => {
+    modal.onDismiss((data: any) => {
       console.log('modal data', data);
     });
   }
@@ -50,14 +50,14 @@ class E2EPage {
     let modal = Modal.create(ToolbarModal);
     this.nav.present(modal);
 
-    modal.subscribe(data => {
+    modal.subscribe((data: any) => {
       console.log('modal data', data);
     });
   }
 
   presentModalWithInputs() {
 	  let modal = Modal.create(ModalWithInputs);
-    modal.onDismiss((data) => {
+    modal.onDismiss((data: any) => {
       console.log('Modal with inputs data:', data);
     });
     this.nav.present(modal);
@@ -79,9 +79,12 @@ class E2EPage {
 
 @Component({
   template: `
-  <ion-navbar *navbar>
+  <ion-header>
-    <ion-title>Page One</ion-title>
+    <ion-navbar>
-  </ion-navbar>
+      <ion-title>Page One</ion-title>
+    </ion-navbar>
+  </ion-header>
+
   <ion-content>
     <button full (click)="submit()">Submit</button>
   </ion-content>
@@ -98,9 +101,12 @@ class NavigableModal{
 
 @Component({
   template: `
-  <ion-navbar *navbar>
+  <ion-header>
-    <ion-title>Page Two</ion-title>
+    <ion-navbar>
-  </ion-navbar>
+      <ion-title>Page Two</ion-title>
+    </ion-navbar>
+  </ion-header>
+
   <ion-content>
     <button full (click)="submit()">Submit</button>
   </ion-content>
@@ -119,9 +125,11 @@ class NavigableModal2{
 
 @Component({
   template: `
-    <ion-navbar *navbar>
+    <ion-header>
-      <ion-title>Data in/out</ion-title>
+      <ion-navbar>
-    </ion-navbar>
+        <ion-title>Data in/out</ion-title>
+      </ion-navbar>
+    </ion-header>
     <ion-content>
       <ion-list>
         <ion-item>
@@ -138,7 +146,7 @@ class NavigableModal2{
   `
 })
 class ModalPassData {
-  data;
+  data: any;
 
   constructor(params: NavParams, private viewCtrl: ViewController) {
     this.data = {
@@ -175,13 +183,15 @@ class ModalPassData {
 
 @Component({
   template: `
-    <ion-toolbar primary>
+    <ion-header>
-      <ion-title>Toolbar 1</ion-title>
+      <ion-toolbar primary>
-    </ion-toolbar>
+        <ion-title>Toolbar 1</ion-title>
+      </ion-toolbar>
 
-    <ion-toolbar>
+      <ion-toolbar>
-      <ion-title>Toolbar 2</ion-title>
+        <ion-title>Toolbar 2</ion-title>
-    </ion-toolbar>
+      </ion-toolbar>
+    </ion-header>
 
     <ion-content padding>
       <button block danger (click)="dismiss()" class="e2eCloseToolbarModal">
@@ -220,12 +230,15 @@ class ToolbarModal {
 
 @Component({
   template: `
-    <ion-toolbar secondary>
+    <ion-header>
-      <ion-buttons start>
+      <ion-toolbar secondary>
-        <button (click)="dismiss()">Close</button>
+        <ion-buttons start>
-      </ion-buttons>
+          <button (click)="dismiss()">Close</button>
-      <ion-title>Modal w/ Inputs</ion-title>
+        </ion-buttons>
-    </ion-toolbar>
+        <ion-title>Modal w/ Inputs</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
     <ion-content>
       <form #addForm="ngForm" (submit)="save($event)" novalidate>
         <ion-list>
@@ -250,7 +263,7 @@ class ToolbarModal {
   `
 })
 class ModalWithInputs {
-  data;
+  data: any;
 
   constructor(private viewCtrl: ViewController) {
     this.data = {
@@ -260,7 +273,7 @@ class ModalWithInputs {
     };
   }
 
-  public save(ev) {
+  public save(ev: any) {
     this.viewCtrl.dismiss(this.data);
   }
 
@@ -274,11 +287,10 @@ class ModalWithInputs {
   template: '<ion-nav [root]="root"></ion-nav>'
 })
 class ContactUs {
-  root;
+  root = ModalFirstPage;
 
   constructor() {
     console.log('ContactUs constructor');
-    this.root = ModalFirstPage;
   }
   ionViewLoaded() {
     console.log('ContactUs ionViewLoaded');
@@ -306,12 +318,15 @@ class ContactUs {
 
 @Component({
   template: `
-    <ion-navbar *navbar>
+    <ion-header>
-      <ion-title>First Page Header</ion-title>
+      <ion-navbar>
-      <ion-buttons start>
+        <ion-title>First Page Header</ion-title>
-        <button class="e2eCloseMenu" (click)="dismiss()">Close</button>
+        <ion-buttons start>
-      </ion-buttons>
+          <button class="e2eCloseMenu" (click)="dismiss()">Close</button>
-    </ion-navbar>
+        </ion-buttons>
+      </ion-navbar>
+    </ion-header>
+
     <ion-content padding>
       <p>
         <button (click)="push()">Push (Go to 2nd)</button>
@@ -414,9 +429,11 @@ class ModalFirstPage {
 
 @Component({
   template: `
-    <ion-navbar *navbar>
+    <ion-header>
-      <ion-title>Second Page Header</ion-title>
+      <ion-navbar>
-    </ion-navbar>
+        <ion-title>Second Page Header</ion-title>
+      </ion-navbar>
+    </ion-header>
     <ion-content padding>
       <p>
         <button (click)="nav.pop()">Pop (Go back to 1st)</button>
@@ -455,29 +472,29 @@ class E2EApp {
 ionicBootstrap(E2EApp);
 
 
-class FadeIn extends Transition {
+class FadeIn extends PageTransition {
   constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
-    super(opts);
+    super(enteringView, leavingView, opts);
     this
       .element(enteringView.pageRef())
       .easing('ease')
       .duration(1000)
       .fromTo('translateY', '0%', '0%')
-      .fadeIn()
+      .fromTo('opacity', 0, 1, true)
       .before.addClass('show-page');
   }
 }
-Transition.register('my-fade-in', FadeIn);
+PageTransition.register('my-fade-in', FadeIn);
 
-class FadeOut extends Transition {
+class FadeOut extends PageTransition {
   constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
-    super(opts);
+    super(enteringView, leavingView, opts);
     this
       .element(leavingView.pageRef())
       .easing('ease')
       .duration(500)
-      .fadeOut()
+      .fromTo('opacity', 1, 0)
       .before.addClass('show-page');
   }
 }
-Transition.register('my-fade-out', FadeOut);
+PageTransition.register('my-fade-out', FadeOut);

src/components/modal/test/basic/main.html

@@ -1,6 +1,8 @@
-<ion-navbar *navbar>
+<ion-header>
-  <ion-title>Modals</ion-title>
+  <ion-navbar>
-</ion-navbar>
+    <ion-title>Modals</ion-title>
+  </ion-navbar>
+</ion-header>
 
 <ion-content padding>
   <p>