docs(demos): modal demo outline

demos/component-docs/index.ts

@@ -1,20 +1,13 @@
 import {App, IonicApp, ActionSheet, NavController, NavParams} from 'ionic/ionic';
-import {Modal, IonicView, IonicConfig, Events} from 'ionic/ionic';
+import {Modal, IonicView, IonicConfig, Events, Animation} from 'ionic/ionic';
 import {NgZone} from 'angular2/angular2';
 import {NavigationDetailsPage} from 'navigation';
 import {TabsPage} from 'tabs';
+import {DemoModal} from 'modal';
 
 import * as helpers from 'helpers';
 
 
-@IonicView({
-  template: '<div>My Modal</div>'
-})
-class DemoModal extends Modal {
-  constructor() {
-    super();
-  }
-}
 
 
 @IonicView({
@@ -37,6 +30,7 @@ export class MainPage {
     this.modal = modal;
     this.actionSheet = actionSheet;
     this.navDetailsPage = NavigationDetailsPage;
+    this.demoModal = DemoModal;
 
     if (params.data.location) { this.component.title = params.data.location; }
     else if (window.location.hash) { this.component.title = window.location.hash; }
@@ -99,15 +93,40 @@ export class MainPage {
   // Modal
   // **************************
   openModal() {
-    this.modal.open(DemoModal, {
+    this.modal.open(this.demoModal, {
+      handle: 'my-awesome-modal',
       enterAnimation: 'my-fade-in',
-      leaveAnimation: 'my-fade-out',
+      leaveAnimation: 'my-fade-out'
-      handle: 'my-awesome-modal'
     });
   }
 
 }
 
+class FadeIn extends Animation {
+  constructor(element) {
+    super(element);
+    this
+      .easing('ease')
+      .duration(450)
+      .fadeIn();
+  }
+}
+
+Animation.register('my-fade-in', FadeIn);
+
+class FadeOut extends Animation {
+  constructor(element) {
+    super(element);
+    this
+      .easing('ease')
+      .duration(250)
+      .fadeOut();
+  }
+}
+
+Animation.register('my-fade-out', FadeOut);
+
+
 @App({
   template: '<ion-nav [root]="rootPage"></ion-nav>'  
 })

demos/component-docs/main.html

@@ -354,8 +354,12 @@
     <section id="menus" [ng-class]="{hidden:component.title !== 'Menus' }">
    TODO
   </section>
-    <section id="modals" [ng-class]="{hidden: component.title !== 'Modals' }">
+
-   TODO
+  <section id="modals" [ng-class]="{hidden: component.title !== 'Modals' }" class="section-padding">
+   <button block (click)="openModal()">
+    Show Modal
+  </button>
+
   </section>
 
   <section id="navigation" [ng-class]="{hidden: component.title !== 'Navigation' }">

demos/component-docs/modal.html

@@ -0,0 +1 @@
+<h1>TODO</h1>

demos/component-docs/modal.ts

@@ -0,0 +1,46 @@
+import {App, IonicApp, Modal, NavController, IonicView, Events} from 'ionic/ionic';
+import * as helpers from 'helpers';
+
+@IonicView({
+  templateUrl: 'modal.html'
+})
+class ModalFirstPage {
+
+  constructor(
+    nav: NavController,
+    modal: Modal,
+    events: Events
+  ) {
+    this.nav = nav;
+    this.modal = modal;
+    window.onmessage = (e) => {
+      zone.run(() => {
+        if (e.data) {
+          var data = JSON.parse(e.data);
+          var componentTitle = helpers.toTitleCase(data.hash.replace('-', ' '));
+          events.publish('page:locationChange', { componentName: componentTitle });
+          this.closeModal();
+        }
+      });
+    };
+  }
+
+  closeModal() {
+    let modal = this.modal.get();
+    if (modal) {
+      modal.close();
+    }
+  }
+
+}
+
+@IonicView({
+  template: '<ion-nav [root]="rootView"></ion-nav>'
+})
+export class DemoModal {
+  constructor() {
+    this.rootView = ModalFirstPage;
+  }
+}
+
+