Modal magic

ionic/components.js

@@ -12,6 +12,7 @@ export * from 'ionic/components/form/input/input'
 export * from 'ionic/components/form/label/label'
 // export * from 'ionic/components/layout/layout'
 export * from 'ionic/components/list/list'
+export * from 'ionic/components/modal/modal'
 export * from 'ionic/components/nav/nav'
 export * from 'ionic/components/nav/nav-controller'
 export * from 'ionic/components/nav/nav-item'

ionic/components/modal/modal.js

@@ -1,4 +1,13 @@
-import {Compiler, NgElement, Component, View} from 'angular2/angular2';
+import {DynamicComponentLoader, ElementRef, ComponentRef, onDestroy, DomRenderer} from 'angular2/angular2';
+
+import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {View} from 'angular2/src/core/annotations_impl/view';
+
+import {Nav} from 'ionic/ionic';
+
+import {raf, ready} from 'ionic/util/dom'
+
+import {NavController, NavbarTemplate, Navbar, Content} from 'ionic/ionic';
 
 @Component({
   selector: 'ion-modal-wrapper'
@@ -11,14 +20,15 @@ import {Compiler, NgElement, Component, View} from 'angular2/angular2';
     </div>`
 })
 class ModalWrapper {
-  constructor(@NgElement() el : NgElement) {
+  constructor(elementRef: ElementRef) {
-    this.element = el
+    this.element = elementRef.domElement;
-    console.log('element', el)
+    console.log('element', this.element)
   }
   show() {
-    //this.element.domElement.classList.add('active')
+    this.element.domElement.classList.add('active')
   }
   hide() {
+    this.element.domElement.classList.remove('active')
   }
 }
 
@@ -26,37 +36,86 @@ class ModalWrapper {
   selector: 'ion-modal'
 })
 @View({
-  directives: [ModalWrapper],
   template: `
-    <ion-modal-wrapper>
+    <!--<ion-modal-wrapper>-->
-      <div class="modal">
+    <div class="modal">
-        <content></content>
+      <ion-nav [initial]="initial"></ion-nav>
-      </div>
+    </div>
-    </ion-modal-wrapper>`
+    <!--</ion-modal-wrapper>-->`,
+  directives: [Nav],
 })
 export class Modal {
   //compiler: Compiler;
 
-  constructor(compiler: Compiler, @NgElement() el : NgElement) {
+  constructor(loader: DynamicComponentLoader, domRenderer: DomRenderer, elementRef: ElementRef) {
-    this.element = el
+    this.componentLoader = loader;
-    this.compiler = compiler
+    this.domRenderer = domRenderer;
-    console.log('Got compiler', Modal.annotations)
+
+    this.element = elementRef.domElement;
+    this.elementRef = elementRef;
+
+    this.initial = ModalFirstPage
   }
 
+
   static create() {
-    var m = new Modal()
+    var m = new Modal();
-    return m
+    return m;
   }
 
   show() {
-    console.log('Modal show')
+    console.log('Modal show');
+
+    return this.componentLoader.loadIntoNewLocation(Modal, this.elementRef).then((containerRef) => {
+      var modalEl = this.domRenderer.getHostElement(containerRef.hostView.render);
+
+      document.body.appendChild(modalEl);
+
+      raf(() => {
+        modalEl.classList.add('active');
+      });
+
+      console.log('Loaded into new location', containerRef, modalEl);
+    });
   }
 
-  static show() {
+  static show(loader: ComponentLoader, renderer: DomRenderer, elementRef: ElementRef) {
-    console.log('Showing modal')
+    console.log('Showing modal');
 
-    var newModal = Modal.create()
+    var newModal = new Modal(loader, renderer, elementRef);
-    newModal.show()
+    newModal.show();
-    return newModal
+    return newModal;
+  }
+}
+
+@Component({selector: 'ion-view'})
+@View({
+  template: `
+    <ion-navbar *navbar><ion-title>First Page Header: {{ val }}</ion-title></ion-navbar>
+
+    <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(
+    nav: NavController
+  ) {
+    this.nav = nav;
+    this.val = Math.round(Math.random() * 8999) + 1000;
+  }
+
+  push() {
   }
 }

ionic/components/modal/modal.scss

@@ -35,7 +35,7 @@ $tabs-height: 40;
   pointer-events: none;
 }
 
-modal {
+ion-modal {
   display: block;
   position: absolute;
   top: 0;
@@ -44,8 +44,26 @@ modal {
   min-height: 100%;
   width: 100%;
   background-color: $modal-bg-color;
+
+  transform: translate3d(0, 100%, 0);
+  transition: all cubic-bezier(.1, .7, .1, 1) 400ms;
 }
 
+// Slide up from the bottom, used for modals
+// -------------------------------
+
+ion-modal.active {
+  transform: translate3d(0, 0, 0);
+}
+
+/*
+ion-modal.slide-in-up.ng-leave,
+ion-modal.slide-in-up > .ng-leave {
+  transition: all ease-in-out 250ms;
+}
+*/
+
+
 @media (min-width: $modal-inset-mode-break-point) {
   // inset mode is when the modal doesn't fill the entire
   // display but instead is centered within a large display
@@ -117,4 +135,3 @@ modal {
     }
   }
 }
-

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

@@ -1,8 +1,9 @@
+import {DynamicComponentLoader, ElementRef, ComponentRef, onDestroy, DomRenderer} from 'angular2/angular2';
 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 {Content, List, Item, Button} from 'ionic/ionic';
+import {Content, List, Item, Button, Modal} from 'ionic/ionic';
 
 
 @Component({ selector: 'ion-app' })
@@ -11,16 +12,24 @@ import {Content, List, Item, Button} from 'ionic/ionic';
   directives: [Content, List, Item, Button]
 })
 class IonicApp {
-  constructor() {
+  constructor(loader: DynamicComponentLoader, domRenderer: DomRenderer, elementRef: ElementRef) {
-    console.log('IonicApp Start')
+    this.loader = loader;
+    this.domRenderer = domRenderer;
+    this.elementRef = elementRef;
+
+    console.log('IonicApp Start', loader, domRenderer, elementRef);
   }
 
   openModal() {
     console.log('Opening modal');
+    Modal.show(this.loader, this.domRenderer, this.elementRef);
   }
 }
 
 
 export function main() {
-  bootstrap(IonicApp);
+  bootstrap(IonicApp).then((appRef) => {
+    console.log('Done bootstrapping', appRef);
+
+  })
 }