diff --git a/ionic/components/app/test/snapcat/index.js b/ionic/components/app/test/snapcat/index.js
index 18929506b6..73fa8adbe8 100644
--- a/ionic/components/app/test/snapcat/index.js
+++ b/ionic/components/app/test/snapcat/index.js
@@ -5,8 +5,7 @@ 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, Animation, SegmentButton, Slides, Slide, Content, List, Item} from 'ionic/ionic';
-import {NavController, NavbarTemplate, NavParams, Navbar, IonicComponent} from 'ionic/ionic';
+import {IonicView, Animation, Modal, NavController, IonicComponent} from 'ionic/ionic';
class FadeIn extends Animation {
@@ -15,8 +14,8 @@ class FadeIn extends Animation {
this
.easing('ease')
.duration(250)
- .from('opacity', 0)
- .to('opacity', 1);
+ .fadeIn()
+ .before.addClass('show-modal');
}
}
@@ -28,17 +27,16 @@ class FadeOut extends Animation {
this
.easing('ease')
.duration(250)
- .from('opacity', 1)
- .to('opacity', 0);
+ .fadeOut()
+ .after.removeClass('show-modal');
}
}
Animation.register('my-fade-out', FadeOut);
@Component({ selector: 'ion-view' })
-@View({
- templateUrl: 'detail.html',
- directives: [formDirectives, NavbarTemplate, Navbar, Content, List, Item]
+@IonicView({
+ templateUrl: 'detail.html'
})
export class DetailPage {
constructor(params: NavParams) {
@@ -47,9 +45,8 @@ export class DetailPage {
}
@Component({ selector: 'ion-view' })
-@View({
- templateUrl: 'feed.html',
- directives: [formDirectives, NgFor, NavbarTemplate, Navbar, Segment, SegmentButton, Content, List, Item]
+@IonicView({
+ templateUrl: 'feed.html'
})
export class FeedPage {
constructor(nav: NavController) {
@@ -98,9 +95,8 @@ export class FeedPage {
}
@Component({ selector: 'ion-view' })
-@View({
- templateUrl: 'main.html',
- directives: [formDirectives, Nav, Slides, Slide, Content, List, Item]
+@IonicView({
+ templateUrl: 'main.html'
})
class IonicApp {
constructor() {
@@ -111,41 +107,35 @@ class IonicApp {
openHeart() {
console.log('openHeart');
- Modal.open(HeartModal)/*, {
+ Modal.open(HeartModal, {
enterAnimation: 'my-fade-in',
leaveAnimation: 'my-fade-out'
});
- */
}
openGear() {
console.log('openGear');
- Modal.open(SettingsModal);
+ Modal.open(SettingsModal, {
+ enterAnimation: 'my-fade-in',
+ leaveAnimation: 'my-fade-out'
+ });
}
}
@IonicComponent(Modal)
-@View({
- template: '',
- directives: [Nav, Content]
+@IonicView({
+ template: ''
})
-export class SettingsModal extends Modal {
- constructor() {
- super();
- }
-}
+export class SettingsModal extends Modal {}
+
@IonicComponent(Modal)
-@View({
- template: '20
You\'re pretty awesome
',
- directives: [Nav, Content]
+@IonicView({
+ template: '20
You\'re pretty awesome
'
})
-export class HeartModal extends Modal {
- constructor() {
- super();
- }
-}
+export class HeartModal extends Modal {}
+
export function main(ionicBootstrap) {
ionicBootstrap(IonicApp);
diff --git a/ionic/components/aside/aside.js b/ionic/components/aside/aside.js
index 9d0d8327c7..9ae1f7aff1 100644
--- a/ionic/components/aside/aside.js
+++ b/ionic/components/aside/aside.js
@@ -53,12 +53,6 @@ export class Aside {
}
onInit() {
- this.side = this.side || 'left';
- this.type = this.type || 'reveal';
-
- this.domElement.setAttribute('side', this.side);
- this.domElement.setAttribute('type', this.type);
-
console.log('Aside content', this.content);
this.contentElement = (this.content instanceof Node) ? this.content : this.content.domElement;
diff --git a/ionic/components/modal/modal.js b/ionic/components/modal/modal.js
index 834c253412..c781e12a7a 100644
--- a/ionic/components/modal/modal.js
+++ b/ionic/components/modal/modal.js
@@ -4,6 +4,12 @@ import {Animation} from '../../animations/animation';
export class Modal extends Overlay {
+ static get config() {
+ return {
+ selector: 'ion-modal'
+ }
+ }
+
constructor() {
super();
this.extendOptions({
@@ -17,38 +23,30 @@ export class Modal extends Overlay {
return this.create(ComponentType, opts);
}
- static get config() {
- return {
- selector: 'ion-modal'
- }
- }
-
}
/**
* Animations for modals
*/
-class ModalAnimation extends Animation {
- constructor(element) {
- super(element);
- this.easing('cubic-bezier(.36, .66, .04, 1)').duration(400);
- }
-}
-
-class ModalSlideIn extends ModalAnimation {
+class ModalSlideIn extends Animation {
constructor(element) {
super(element);
this
+ .easing('cubic-bezier(.36,.66,.04,1)')
+ .duration(400)
.fromTo('translateY', '100%', '0%');
}
}
Animation.register('modal-slide-in', ModalSlideIn);
-class ModalSlideOut extends ModalAnimation {
+
+class ModalSlideOut extends Animation {
constructor(element) {
super(element);
this
+ .easing('ease-out')
+ .duration(250)
.fromTo('translateY', '0%', '100%');
}
}
diff --git a/ionic/components/modal/modal.scss b/ionic/components/modal/modal.scss
index caa3ca1369..7588f5ea7d 100644
--- a/ionic/components/modal/modal.scss
+++ b/ionic/components/modal/modal.scss
@@ -28,6 +28,9 @@ ion-modal {
background-color: $modal-bg-color;
transform: translate3d(0px, 100%, 0px);
+ &.show-overlay {
+ transform: translate3d(0px, 0px, 0px);
+ }
}
diff --git a/ionic/components/modal/test/basic/index.js b/ionic/components/modal/test/basic/index.js
index 547da93d8b..652e96080a 100644
--- a/ionic/components/modal/test/basic/index.js
+++ b/ionic/components/modal/test/basic/index.js
@@ -7,7 +7,32 @@ import {Parent, Ancestor} from 'angular2/src/core/annotations_impl/visibility';
import {IonicView} from 'ionic/ionic';
import {IonicComponent} from 'ionic/ionic';
-import {Modal, NavController, NavParams} from 'ionic/ionic';
+import {Modal, NavController, NavParams, Animation} from 'ionic/ionic';
+
+
+class FadeIn extends Animation {
+ constructor(element) {
+ super(element);
+ this
+ .easing('ease')
+ .duration(450)
+ .fadeIn();
+ }
+}
+
+Animation.register('my-fade-in', FadeIn);
+
+class FadeOut extends Animation {
+ constructor(element) {
+ super(element);
+ this
+ .easing('ease')
+ .duration(250)
+ .fadeOut();
+ }
+}
+
+Animation.register('my-fade-out', FadeOut);
@Component({ selector: 'ion-view' })
@@ -16,7 +41,10 @@ import {Modal, NavController, NavParams} from 'ionic/ionic';
})
class IonicApp {
openModal() {
- Modal.open(ContactModal);
+ Modal.open(ContactModal, {
+ enterAnimation: 'my-fade-in',
+ leaveAnimation: 'my-fade-out'
+ });
}
}
@@ -31,6 +59,7 @@ export class ContactModal extends Modal {
}
}
+
@Component({selector: 'ion-view'})
@IonicView({
template: `
diff --git a/ionic/components/overlay/overlay.js b/ionic/components/overlay/overlay.js
index b30ecec395..e6ebc74639 100644
--- a/ionic/components/overlay/overlay.js
+++ b/ionic/components/overlay/overlay.js
@@ -7,9 +7,10 @@ import * as util from 'ionic/util';
export class Overlay {
/* Instance Methods */
- open(animation) {
- animation = animation || this.options.enterAnimation;
- let enterAnimation = Animation.create(this.domElement, animation);
+ open(opts) {
+ let animationName = (opts && opts.animation) || this.options.enterAnimation;
+ let enterAnimation = Animation.create(this.domElement, animationName);
+ enterAnimation.before.addClass('show-overlay');
ClickBlock(true, enterAnimation.duration() + 200);
return new Promise(resolve => {
@@ -21,13 +22,16 @@ export class Overlay {
});
}
- close(animation) {
+ close(opts) {
return new Promise(resolve => {
- animation = animation || this.options.leaveAnimation;
- let leavingAnimation = Animation.create(this.domElement, animation);
+ let animationName = (opts && opts.animation) || this.options.leaveAnimation;
+ let leavingAnimation = Animation.create(this.domElement, animationName);
+ leavingAnimation.after.removeClass('show-overlay');
+ ClickBlock(true, leavingAnimation.duration() + 200);
leavingAnimation.play().then(() => {
this._clean();
+ ClickBlock(false);
leavingAnimation.dispose();
resolve();
})
@@ -52,7 +56,7 @@ export class Overlay {
overlay._dispose = ref.dispose;
overlay.domElement = ref.elementRef.domElement;
overlay.extendOptions(opts);
- overlay.open();
+ overlay.open(opts);
resolve(overlay);
}).catch(err => {