Modal slide in out

ionic/components/app/test/snapcat/index.js

@@ -5,9 +5,36 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio
 import {View} from 'angular2/src/core/annotations_impl/view';
 import {FormBuilder, Control, ControlGroup, Validators, formDirectives} from 'angular2/forms';
 
-import {Modal, ModalRef, Nav, Segment, SegmentButton, Slides, Slide, Content, Button, List, Item} from 'ionic/ionic';
+import {Modal, ModalRef, Nav, Segment, Animation, SegmentButton, Slides, Slide, Content, Button, List, Item} from 'ionic/ionic';
 import {NavController, NavbarTemplate, NavParams, Navbar} from 'ionic/ionic';
 
+
+class FadeIn extends Animation {
+  constructor(element) {
+    super(element);
+    this
+      .easing('ease')
+      .duration(250)
+      .from('opacity', 0)
+      .to('opacity', 1);
+  }
+}
+
+Animation.register('my-fade-in', FadeIn);
+
+class FadeOut extends Animation {
+  constructor(element) {
+    super(element);
+    this
+      .easing('ease')
+      .duration(250)
+      .from('opacity', 1)
+      .to('opacity', 0);
+  }
+}
+
+Animation.register('my-fade-out', FadeOut);
+
 @Component({ selector: 'ion-view' })
 @View({
   templateUrl: 'detail.html',
@@ -90,12 +117,19 @@ export class IonicApp {
   openHeart() {
     console.log('Heart');
     //Modal.show(HeartModal, this.loader, this.injector, this.domRenderer, this.elementRef);
+    Modal.show(HeartModal, this.loader, this.injector, this.domRenderer, this.elementRef, {
+      openAnimation: 'my-fade-in',
+      closeAnimation: 'my-fade-out'
+    });
   }
 
   openGear() {
     console.log('Gear');
 
-    Modal.show(SettingsModal, this.loader, this.injector, this.domRenderer, this.elementRef);
+    Modal.show(SettingsModal, this.loader, this.injector, this.domRenderer, this.elementRef, {
+      //openAnimation: 'my-fade-in',
+      //closeAnimation: 'my-fade-out'
+    });
   }
 }
 

ionic/components/app/test/snapcat/main.html

@@ -97,10 +97,14 @@
     font-family: 'lato';
   }
   #p2toolbar {
-    background-color: #FF0000;
+    background-color: #F93822;
   }
   #p2toolbar ion-title {
     color: white;
     font-family: 'lato';
   }
+
+  heart-modal ion-content {
+    background-color: #FFB400 !important;
+  }
 </style>

ionic/components/modal/modal.js

@@ -8,13 +8,14 @@ import {View} from 'angular2/src/core/annotations_impl/view';
 import {Parent} from 'angular2/src/core/annotations_impl/visibility';
 
 import {raf, ready} from 'ionic/util/dom'
+import * as util from 'ionic/util'
 
 import {Animation} from '../../animations/animation';
 
 export class Modal {
   //compiler: Compiler;
 
-  constructor(type: Type, loader: DynamicComponentLoader, injector: Injector, domRenderer: DomRenderer, elementRef: ElementRef) {
+  constructor(type: Type, loader: DynamicComponentLoader, injector: Injector, domRenderer: DomRenderer, elementRef: ElementRef, opts) {
     this.modalType = type;
     this.componentLoader = loader;
     this.domRenderer = domRenderer;
@@ -22,13 +23,18 @@ export class Modal {
 
     this.element = elementRef.domElement;
     this.elementRef = elementRef;
+
+    this.opts = util.extend({
+      openAnimation: 'slide-in',
+      closeAnimation: 'slide-out'
+    }, opts || {});
   }
 
 
-  static create(modalType: Type, loader: ComponentLoader, injector: Injector, renderer: DomRenderer, elementRef: ElementRef) {
+  static create(modalType: Type, loader: ComponentLoader, injector: Injector, renderer: DomRenderer, elementRef: ElementRef, opts) {
     console.log('Create', modalType, loader, injector, renderer, elementRef);
 
-    var m = new Modal(modalType, loader, injector, renderer, elementRef);
+    var m = new Modal(modalType, loader, injector, renderer, elementRef, opts);
 
     var modalPromise = new Promise(resolve => {
 
@@ -76,18 +82,18 @@ export class Modal {
   }
 
   show() {
-    return this._modalRef.open();
+    return this._modalRef.open(this.opts.openAnimation);
   }
 
   close() {
-    return this._modalRef.close();
+    return this._modalRef.close(this.opts.closeAnimation);
   }
 
 
-  static show(modalType: Type, loader: ComponentLoader, injector: Injector, renderer: DomRenderer, elementRef: ElementRef) {
+  static show(modalType: Type, loader: ComponentLoader, injector: Injector, renderer: DomRenderer, elementRef: ElementRef, opts) {
-    console.log('Showing modal');
+    console.log('Showing modal', opts);
 
-    Modal.create(modalType, loader, injector, renderer, elementRef).then((newModal) => {
+    Modal.create(modalType, loader, injector, renderer, elementRef, opts).then((newModal) => {
       newModal.show();
     });
   }
@@ -105,13 +111,14 @@ class ModalContainer {
     this.domElement = elementRef.domElement;
   }
 
-  open() {
+  open(animation) {
-    var slideIn = Animation.create(this.domElement, 'slide-in');
+    console.log('Opening w/ anim', animation);
+    var slideIn = Animation.create(this.domElement, animation);
     return slideIn.play();
   }
 
-  close() {
+  close(animation) {
-    var slideOut = Animation.create(this.domElement, 'slide-out');
+    var slideOut = Animation.create(this.domElement, animation);
     return slideOut.play();
   }
 }
@@ -132,15 +139,15 @@ export class ModalRef {
     this.isClosed = false;
   }
 
-  open() {
+  open(animation) {
-    this.containerRef.instance.open().then(() => {
+    this.containerRef.instance.open(animation).then(() => {
       this.isClosed = false;
     })
   }
 
-  close() {
+  close(animation) {
     // Close, then dispose y'all
-    this.containerRef.instance.close().then(() => {
+    this.containerRef.instance.close(animation).then(() => {
       this.isClosed = true;
       this.containerRef.dispose();
     })