From 61cfd347fd71aaf292ab597b8a1626b33b3da8f3 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Fri, 29 May 2015 17:21:35 -0500
Subject: [PATCH] Standard easing curves

---
 ionic/animations/animation.js              |  6 +-
 ionic/animations/builtins.js               | 13 +++++
 ionic/components/modal/modal.js            | 68 +++++++++-------------
 ionic/components/modal/test/basic/index.js |  6 +-
 ionic/components/nav/nav.js                |  1 +
 5 files changed, 50 insertions(+), 44 deletions(-)

diff --git a/ionic/animations/animation.js b/ionic/animations/animation.js
index cc256ece63..52150fd653 100644
--- a/ionic/animations/animation.js
+++ b/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 = {
   }
 
 };
-
diff --git a/ionic/animations/builtins.js b/ionic/animations/builtins.js
index 73f2fdc30a..edd96c319f 100644
--- a/ionic/animations/builtins.js
+++ b/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);
diff --git a/ionic/components/modal/modal.js b/ionic/components/modal/modal.js
index 82caf916aa..bcd6965faa 100644
--- a/ionic/components/modal/modal.js
+++ b/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();
+    })
   }
 
 
diff --git a/ionic/components/modal/test/basic/index.js b/ionic/components/modal/test/basic/index.js
index 213b35207f..8966e24c17 100644
--- a/ionic/components/modal/test/basic/index.js
+++ b/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();
   }
 }
 
diff --git a/ionic/components/nav/nav.js b/ionic/components/nav/nav.js
index 45e6a09df9..0489670d46 100644
--- a/ionic/components/nav/nav.js
+++ b/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);
   }