Modals more

ionic/components/modal/test/basic/index.js

@@ -1,9 +1,14 @@
 import {DynamicComponentLoader, ElementRef, ComponentRef, onDestroy, DomRenderer} from 'angular2/angular2';
+import {bind, Injector} from 'angular2/di';
 import {bootstrap} from 'angular2/angular2'
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
+import {Parent, Ancestor} from 'angular2/src/core/annotations_impl/visibility';
 
-import {Content, List, Item, Button, Modal} from 'ionic/ionic';
+import {Content, List, Item, Button, Modal, ModalRef} from 'ionic/ionic';
+
+import {Nav} from 'ionic/ionic';
+import {NavController, NavParams, NavbarTemplate, Navbar} from 'ionic/ionic';
 
 
 @Component({ selector: 'ion-app' })
@@ -12,20 +17,124 @@ import {Content, List, Item, Button, Modal} from 'ionic/ionic';
   directives: [Content, List, Item, Button]
 })
 class IonicApp {
-  constructor(loader: DynamicComponentLoader, domRenderer: DomRenderer, elementRef: ElementRef) {
+  constructor(loader: DynamicComponentLoader, injector: Injector, domRenderer: DomRenderer, elementRef: ElementRef) {
     this.loader = loader;
     this.domRenderer = domRenderer;
     this.elementRef = elementRef;
+    this.injector = injector;
 
     console.log('IonicApp Start', loader, domRenderer, elementRef);
   }
 
   openModal() {
     console.log('Opening modal');
-    Modal.show(this.loader, this.domRenderer, this.elementRef);
+    Modal.show(ContactModal, this.loader, this.injector, this.domRenderer, this.elementRef);
   }
 }
 
+@Component({
+  selector: 'contact-modal'
+})
+@View({
+  template: '<ion-nav [initial]="initial"></ion-nav>',
+  directives: [Nav]
+})
+export class ContactModal {
+  constructor(modalRef: ModalRef) {
+    this.initial = ModalFirstPage;
+    this.modalRef = modalRef;
+  }
+  close() {
+    console.log('Closing modal');
+    this.modalRef.close();
+  }
+}
+
+@Component({selector: 'ion-view'})
+@View({
+  template: `
+    <ion-navbar *navbar><ion-title>First Page Header: {{ val }}</ion-title></ion-navbar>
+
+    <ion-nav-items side="primary">
+      <button primary class="button" (click)="closeModal()">Close</button>
+    </ion-nav-items>
+
+    <ion-content class="padding">
+
+      <p>First Page: {{ val }}</p>
+
+      <p>
+        <button class="button" (click)="push()">Push (Go to 2nd)</button>
+      </p>
+
+      <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+      <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+
+    </ion-content>
+  `,
+  directives: [NavbarTemplate, Navbar, Content]
+})
+export class ModalFirstPage {
+  constructor(
+    @Parent() modal: ContactModal,
+    nav: NavController
+  ) {
+    this.modal = modal;
+    this.nav = nav;
+    this.val = Math.round(Math.random() * 8999) + 1000;
+  }
+
+  push() {
+    this.nav.push(ModalSecondPage, { id: 8675309, myData: [1,2,3,4] }, { animation: 'ios' });
+  }
+
+  closeModal() {
+    this.modal.close();
+  }
+}
+
+@Component({selector: 'ion-view'})
+@View({
+  template: `
+    <ion-navbar *navbar><ion-title>Second Page Header</ion-title></ion-navbar>
+
+    <ion-content class="padding">
+
+      <p>
+        <button class="button" (click)="pop()">Pop (Go back to 1st)</button>
+      </p>
+
+      <p>
+        <button class="button" (click)="push()">Push (Go to 3rd)</button>
+      </p>
+
+      <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+      <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+
+    </ion-content>
+  `,
+  directives: [NavbarTemplate, Navbar, Content]
+})
+export class ModalSecondPage {
+  constructor(
+    nav: NavController,
+    params: NavParams
+  ) {
+    this.nav = nav;
+    this.params = params;
+
+    console.log('Second page params:', params);
+  }
+
+  pop() {
+    this.nav.pop();
+  }
+
+  push() {
+  }
+
+}
+
 
 export function main() {
   bootstrap(IonicApp).then((appRef) => {