From 9cb0cf36152f2b194a72bb3388fa66e276db5b21 Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Wed, 10 Jun 2015 17:18:32 -0500 Subject: [PATCH] Modal slide in out --- ionic/components/app/test/snapcat/index.js | 38 ++++++++++++++++++-- ionic/components/app/test/snapcat/main.html | 6 +++- ionic/components/modal/modal.js | 39 ++++++++++++--------- 3 files changed, 64 insertions(+), 19 deletions(-) diff --git a/ionic/components/app/test/snapcat/index.js b/ionic/components/app/test/snapcat/index.js index 2f18209e56..4371ec9136 100644 --- a/ionic/components/app/test/snapcat/index.js +++ b/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' + }); } } diff --git a/ionic/components/app/test/snapcat/main.html b/ionic/components/app/test/snapcat/main.html index 1fb70ddad0..0250f9c88d 100644 --- a/ionic/components/app/test/snapcat/main.html +++ b/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; + } diff --git a/ionic/components/modal/modal.js b/ionic/components/modal/modal.js index 63d6cfe12a..ce6175302b 100644 --- a/ionic/components/modal/modal.js +++ b/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) { - console.log('Showing modal'); + static show(modalType: Type, loader: ComponentLoader, injector: Injector, renderer: DomRenderer, elementRef: ElementRef, opts) { + 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() { - var slideIn = Animation.create(this.domElement, 'slide-in'); + open(animation) { + console.log('Opening w/ anim', animation); + var slideIn = Animation.create(this.domElement, animation); return slideIn.play(); } - close() { - var slideOut = Animation.create(this.domElement, 'slide-out'); + close(animation) { + var slideOut = Animation.create(this.domElement, animation); return slideOut.play(); } } @@ -132,15 +139,15 @@ export class ModalRef { this.isClosed = false; } - open() { - this.containerRef.instance.open().then(() => { + open(animation) { + 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(); })