javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 13:32:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(inset-modal): inset-modal fixes (#6809)

Browse Source 
inset-modal fixes
This commit is contained in:
Dan Bucholtz
2016-06-08 12:23:47 -05:00
parent d23c75a229
commit cb1cacab42
5 changed files with 67 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/components/modal/modal.ts
View File

@ -8,6 +8,8 @@ import {Transition, TransitionOptions} from '../../transitions/transition';
import {ViewController} from '../nav/view-controller';
import {windowDimensions} from '../../util/dom';
import {nativeRaf, CSS} from '../../util/dom';
/**
* @name Modal
* @description
@ -185,36 +187,43 @@ export class ModalCmp {
/**
* Animations for modals
*/
class ModalSlideIn extends Transition {
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
super(opts);
class ModalSlideIn extends Transition {
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
super(opts);
let ele = enteringView.pageRef().nativeElement;
let backdrop = new Animation(ele.querySelector('ion-backdrop'));
backdrop.fromTo('opacity', 0.01, 0.4);
let wrapper = new Animation(ele.querySelector('.modal-wrapper'));
let page = <HTMLElement> ele.querySelector('ion-page');
let ele = enteringView.pageRef().nativeElement;
let backdropEle = ele.querySelector('ion-backdrop');
let backdrop = new Animation(backdropEle);
let wrapper = new Animation(ele.querySelector('.modal-wrapper'));
let page = <HTMLElement> ele.querySelector('ion-page');
let pageAnimation = new Animation(page);
// auto-add page css className created from component JS class name
let cssClassName = pascalCaseToDashCase((<Modal>enteringView).modalViewType);
page.classList.add(cssClassName);
// auto-add page css className created from component JS class name
let cssClassName = pascalCaseToDashCase((<Modal>enteringView).modalViewType);
pageAnimation.before.addClass(cssClassName);
pageAnimation.before.addClass('show-page');
wrapper.fromTo('translateY', '100%', '0%');
backdrop.fromTo('opacity', 0.01, 0.4);
wrapper.fromTo('translateY', '100%', '0%');
const DURATION = 400;
const EASING = 'cubic-bezier(0.36,0.66,0.04,1)';
this.element(enteringView.pageRef()).easing(EASING).duration(DURATION).add(backdrop).add(wrapper);
this.element(new ElementRef(page)).easing(EASING).duration(DURATION).before.addClass('show-page');
if (enteringView.hasNavbar()) {
// entering page has a navbar
let enteringNavBar = new Animation(enteringView.navbarRef());
enteringNavBar.before.addClass('show-navbar');
this.add(enteringNavBar);
}
}
}
Transition.register('modal-slide-in', ModalSlideIn);
this
.element(enteringView.pageRef())
.easing('cubic-bezier(0.36,0.66,0.04,1)')
.duration(400)
.add(backdrop)
.add(wrapper)
.add(pageAnimation);
if (enteringView.hasNavbar()) {
// entering page has a navbar
let enteringNavBar = new Animation(enteringView.navbarRef());
enteringNavBar.before.addClass('show-navbar');
this.add(enteringNavBar);
}
}
}
Transition.register('modal-slide-in', ModalSlideIn);
class ModalSlideOut extends Transition {
@ -222,9 +231,7 @@ class ModalSlideOut extends Transition {
super(opts);
let ele = leavingView.pageRef().nativeElement;
let backdrop = new Animation(ele.querySelector('ion-backdrop'));
backdrop.fromTo('opacity', 0.4, 0.0);
let wrapperEle = <HTMLElement> ele.querySelector('.modal-wrapper');
let wrapperEleRect = wrapperEle.getBoundingClientRect();
let wrapper = new Animation(wrapperEle);
@ -233,6 +240,7 @@ class ModalSlideOut extends Transition {
// so it's off-screen
let screenDimensions = windowDimensions();
wrapper.fromTo('translateY', '0px', `${screenDimensions.height - wrapperEleRect.top}px`);
backdrop.fromTo('opacity', 0.4, 0.0);
this
.element(leavingView.pageRef())
@ -251,20 +259,26 @@ class ModalMDSlideIn extends Transition {
let ele = enteringView.pageRef().nativeElement;
let backdrop = new Animation(ele.querySelector('ion-backdrop'));
backdrop.fromTo('opacity', 0.01, 0.4);
let wrapper = new Animation(ele.querySelector('.modal-wrapper'));
wrapper.fromTo('translateY', '40px', '0px');
let page = <HTMLElement> ele.querySelector('ion-page');
let pageAnimation = new Animation(page);
// auto-add page css className created from component JS class name
let cssClassName = pascalCaseToDashCase((<Modal>enteringView).modalViewType);
page.classList.add(cssClassName);
pageAnimation.before.addClass(cssClassName);
pageAnimation.before.addClass('show-page');
backdrop.fromTo('opacity', 0.01, 0.4);
wrapper.fromTo('translateY', '40px', '0px');
wrapper.fromTo('opacity', '0.01', '1.0');
const DURATION = 280;
const EASING = 'cubic-bezier(0.36,0.66,0.04,1)';
this.element(enteringView.pageRef()).easing(EASING).duration(DURATION).fadeIn().add(backdrop).add(wrapper);
this.element(new ElementRef(page)).easing(EASING).duration(DURATION).before.addClass('show-page');
this.element(enteringView.pageRef()).easing(EASING).duration(DURATION)
.add(backdrop)
.add(wrapper)
.add(pageAnimation);
if (enteringView.hasNavbar()) {
// entering page has a navbar
@ -283,15 +297,16 @@ class ModalMDSlideOut extends Transition {
let ele = leavingView.pageRef().nativeElement;
let backdrop = new Animation(ele.querySelector('ion-backdrop'));
backdrop.fromTo('opacity', 0.4, 0.0);
let wrapper = new Animation(ele.querySelector('.modal-wrapper'));
backdrop.fromTo('opacity', 0.4, 0.0);
wrapper.fromTo('translateY', '0px', '40px');
wrapper.fromTo('opacity', '1.0', '0.00');
this
.element(leavingView.pageRef())
.duration(200)
.easing('cubic-bezier(0.47,0,0.745,0.715)')
.fadeOut()
.add(wrapper)
.add(backdrop);
}