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(modal): add css classes after createComponent

Browse Source
This commit is contained in:
Adam Bradley
2016-06-16 15:27:07 -05:00
parent e5d79d28c0
commit b3b7eb4626
3 changed files with 84 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,10 @@
import {Component, ComponentResolver, HostListener, ViewChild, ViewContainerRef} from '@angular/core';
import {Component, ComponentResolver, HostListener, Renderer, ViewChild, ViewContainerRef} from '@angular/core';
import {addSelector} from '../../config/bootstrap';
import {Animation} from '../../animations/animation';
import {NavParams} from '../nav/nav-params';
import {isPresent, pascalCaseToDashCase} from '../../util/util';
import {Key} from '../../util/key';
import {NavParams} from '../nav/nav-params';
import {PageTransition} from '../../transitions/page-transition';
import {TransitionOptions} from '../../transitions/transition';
import {ViewController} from '../nav/view-controller';
@ -113,23 +113,20 @@ import {windowDimensions} from '../../util/dom';
*/
export class Modal extends ViewController {
public modalViewType: string;
constructor(componentType: any, data: any = {}, opts: ModalOptions = {}) {
data.componentType = componentType;
opts.showBackdrop = isPresent(opts.showBackdrop) ? !!opts.showBackdrop : true;
opts.enableBackdropDismiss = isPresent(opts.enableBackdropDismiss) ? !!opts.enableBackdropDismiss : true;
data.opts = opts;
super(ModalCmp, data);
this.modalViewType = componentType.name;
this.viewType = 'modal';
this.isOverlay = true;
this.usePortal = true;
}
/**
* @private
*/
* @private
*/
getTransitionName(direction: string) {
let key = (direction === 'back' ? 'modalLeave' : 'modalEnter');
return this._nav && this._nav.config.get(key);
@ -176,7 +173,7 @@ export interface ModalOptions {
template:
'<ion-backdrop disableScroll="false" (click)="bdClick($event)"></ion-backdrop>' +
'<div class="modal-wrapper">' +
'<div #viewport></div>' +
'<div #viewport nav-viewport></div>' +
'</div>'
})
export class ModalCmp {
@ -186,16 +183,18 @@ export class ModalCmp {
private d: any;
private enabled: boolean;
constructor(private _compiler: ComponentResolver, private _navParams: NavParams, private _viewCtrl: ViewController) {
constructor(private _compiler: ComponentResolver, private _renderer: Renderer, private _navParams: NavParams, private _viewCtrl: ViewController) {
this.d = _navParams.data.opts;
}
loadComponent(done: Function) {
addSelector(this._navParams.data.componentType, 'ion-page');
let componentType = this._navParams.data.componentType;
addSelector(componentType, 'ion-page');
this._compiler.resolveComponent(this._navParams.data.componentType).then((componentFactory) => {
this._compiler.resolveComponent(componentType).then((componentFactory) => {
let componentRef = this.viewport.createComponent(componentFactory, this.viewport.length, this.viewport.parentInjector);
this._renderer.setElementClass(componentRef.location.nativeElement, 'show-page', true);
this._renderer.setElementClass(componentRef.location.nativeElement, componentType.name, true);
this._viewCtrl.setInstance(componentRef.instance);
this.enabled = true;
done();
@ -235,13 +234,6 @@ export class ModalCmp {
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);
pageAnimation.before.addClass(cssClassName);
pageAnimation.before.addClass('show-page');
backdrop.fromTo('opacity', 0.01, 0.4);
wrapper.fromTo('translateY', '100%', '0%');
@ -252,8 +244,7 @@ export class ModalCmp {
.easing('cubic-bezier(0.36,0.66,0.04,1)')
.duration(400)
.add(backdrop)
.add(wrapper)
.add(pageAnimation);
.add(wrapper);
if (enteringView.hasNavbar()) {
// entering page has a navbar
@ -300,14 +291,6 @@ class ModalMDSlideIn extends PageTransition {
let ele = enteringView.pageRef().nativeElement;
let backdrop = new Animation(ele.querySelector('ion-backdrop'));
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);
pageAnimation.before.addClass(cssClassName);
pageAnimation.before.addClass('show-page');
backdrop.fromTo('opacity', 0.01, 0.4);
wrapper.fromTo('translateY', '40px', '0px');
@ -317,8 +300,7 @@ class ModalMDSlideIn extends PageTransition {
const EASING = 'cubic-bezier(0.36,0.66,0.04,1)';
this.element(enteringView.pageRef()).easing(EASING).duration(DURATION)
.add(backdrop)
.add(wrapper)
.add(pageAnimation);
.add(wrapper);
if (enteringView.hasNavbar()) {
// entering page has a navbar