Standard easing curves

ionic/animations/animation.js

@@ -466,6 +466,11 @@ const ANIMATE_PROPERTIES = TRANSFORMS.concat('opacity');
 // http://robertpenner.com/easing/
 
 const CUBIC_BEZIERS = {
+  ease: '0.25, 0.1, 0.25, 1.0',
+  easeIn: '0.42, 0, 1.0, 1.0',
+  easeOut: '0, 0, 0.58, 1.0',
+  easeInOut: '0.42, 0, 0.58, 1.0',
+
   // Cubic
   easeInCubic: '0.55,0.055,0.675,0.19',
   easeOutCubic: '0.215,0.61,0.355,1',
@@ -591,4 +596,3 @@ const EASING_FN = {
   }
 
 };
-

ionic/animations/builtins.js

@@ -14,3 +14,16 @@ class SlideIn extends Animation {
 }
 
 Animation.register('slide-in', SlideIn);
+
+class SlideOut extends Animation {
+  constructor(element) {
+    super(element);
+    this
+      .easing('easeInOut')
+      .duration(250)
+      .from('translateY', '0%')
+      .to('translateY', '100%');
+  }
+}
+
+Animation.register('slide-out', SlideOut);

ionic/components/modal/modal.js

@@ -34,19 +34,6 @@ class ModalWrapper {
   }
 }
 
-/*
-@Component({
-  selector: 'ion-modal'
-})
-@View({
-  template: `
-    <!--<ion-modal-wrapper>-->
-    <div class="modal">
-    </div>
-    <!--</ion-modal-wrapper>-->`,
-  directives: []
-})
-*/
 export class Modal {
   //compiler: Compiler;
 
@@ -86,6 +73,7 @@ export class Modal {
     var modalRefBinding = bind(ModalRef).toValue(modalRef);
     var contentInjector = this.injector.resolveAndCreateChild([modalRefBinding]);
 
+    this._modalRef = modalRef;
     // Load the modal wrapper object and insert into the page
     return this.componentLoader.loadIntoNewLocation(ModalContainer, this.elementRef).then((containerRef) => {
       var modalEl = this.domRenderer.getHostElement(containerRef.hostView.render);
@@ -105,30 +93,17 @@ export class Modal {
         modalRef.contentRef = contentRef;
         modalRef.instance.modalRef = modalRef;
         return modalRef;
-
-
-        // Wrap both component refs for the container and the content so that we can return
-        // the `instance` of the content but the dispose method of the container back to the
-        // opener.
-        //dialogRef.contentRef = contentRef;
-        //containerRef.instance.dialogRef = dialogRef;
-
-        //backdropRefPromise.then(backdropRef => {
-        //  dialogRef.whenClosed.then((_) => {
-        //    backdropRef.dispose();
-        //  });
-        //});
-
-        //return dialogRef;
       });
     });
     //});
   }
 
   show() {
-    raf(() => {
-      this.modalElement.classList.add('active');
-    });
+    return this._modalRef.open();
+  }
+
+  close() {
+    return this._modalRef.close();
   }
 
 
@@ -141,9 +116,6 @@ export class Modal {
   }
 }
 
-/**
- * Container for user-provided dialog content.
- */
 @Component({
   selector: 'ion-modal'
 })
@@ -154,16 +126,19 @@ export class Modal {
 class ModalContainer {
   constructor(elementRef: ElementRef) {
     this.domElement = elementRef.domElement;
+  }
 
-    var animation = Animation.create(this.domElement, 'slide-in');
-    animation.play();
+  open() {
+    var slideIn = Animation.create(this.domElement, 'slide-in');
+    return slideIn.play();
+  }
+
+  close() {
+    var slideOut = Animation.create(this.domElement, 'slide-out');
+    return slideOut.play();
   }
 }
 
-/**
- * Simple decorator used only to communicate an ElementRef to the parent MdDialogContainer as the location
- * for where the dialog content will be loaded.
- */
 @Directive({selector: 'ion-modal-content'})
 class ModalContent {
   constructor(@Parent() modalContainer: ModalContainer, elementRef: ElementRef) {
@@ -180,9 +155,18 @@ export class ModalRef {
     this.isClosed = false;
   }
 
+  open() {
+    this.containerRef.instance.open().then(() => {
+      this.isClosed = false;
+    })
+  }
+
   close() {
-    this.isClosed = true;
-    this.containerRef.dispose();
+    // Close, then dispose y'all
+    this.containerRef.instance.close().then(() => {
+      this.isClosed = true;
+      this.containerRef.dispose();
+    })
   }
 
 

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

@@ -95,7 +95,11 @@ export class ModalFirstPage {
   }
 
   closeModal() {
-    this.modal.close();
+    // TODO(maxlynch): Figure out a much better way to get the parent ContactModal
+    var m = this.nav._nav.elementRef.parentView._view.context;
+    
+    //this.modal.close();
+    m.close();
   }
 }
 

ionic/components/nav/nav.js

@@ -32,6 +32,7 @@ import {IonicComponent} from '../../config/component';
 export class Nav extends NavBase {
   constructor(elementRef: ElementRef, loader: DynamicComponentLoader, injector: Injector) {
     super(loader, injector);
+    this.elementRef = elementRef;
     this.domElement = elementRef.domElement;
     this.config = Nav.config.invoke(this);
   }