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: `
-
-
-
- `,
- 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);
}