mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
refactor(components): add color/mode properties
This commit is contained in:
Brandy Carney
committed by
Adam Bradley
Adam Bradley
parent
52ada1ca6d
commit
bc7d328bc0
@@ -1,14 +1,11 @@
|
||||
import { Component, ComponentResolver, HostListener, Renderer, ViewChild, ViewContainerRef } from '@angular/core';
|
||||
import { Component, ComponentFactoryResolver, HostListener, Renderer, ViewChild, ViewContainerRef } from '@angular/core';
|
||||
|
||||
import { addSelector } from '../../config/bootstrap';
|
||||
import { Animation } from '../../animations/animation';
|
||||
import { Backdrop } from '../backdrop/backdrop';
|
||||
import { Key } from '../../util/key';
|
||||
import { NavParams } from '../nav/nav-params';
|
||||
import { NavParams } from '../../navigation/nav-params';
|
||||
import { pascalCaseToDashCase } from '../../util/util';
|
||||
import { PageTransition } from '../../transitions/page-transition';
|
||||
import { TransitionOptions } from '../../transitions/transition';
|
||||
import { ViewController } from '../nav/view-controller';
|
||||
import { ViewController } from '../../navigation/view-controller';
|
||||
import { windowDimensions } from '../../util/dom';
|
||||
|
||||
|
||||
@@ -17,60 +14,61 @@ import { windowDimensions } from '../../util/dom';
|
||||
*/
|
||||
@Component({
|
||||
selector: 'ion-modal',
|
||||
template: `
|
||||
<ion-backdrop disableScroll="false" (click)="bdClick($event)"></ion-backdrop>
|
||||
<div class="modal-wrapper">
|
||||
<div #viewport nav-viewport></div>
|
||||
</div>
|
||||
`,
|
||||
directives: [Backdrop]
|
||||
template:
|
||||
'<ion-backdrop disableScroll="false" (click)="_bdClick()"></ion-backdrop>' +
|
||||
'<div class="modal-wrapper">' +
|
||||
'<div #viewport nav-viewport></div>' +
|
||||
'</div>'
|
||||
})
|
||||
export class ModalCmp {
|
||||
|
||||
@ViewChild('viewport', {read: ViewContainerRef}) viewport: ViewContainerRef;
|
||||
@ViewChild('viewport', { read: ViewContainerRef }) _viewport: ViewContainerRef;
|
||||
|
||||
private d: any;
|
||||
private enabled: boolean;
|
||||
/** @private */
|
||||
_bdDismiss: boolean;
|
||||
|
||||
constructor(private _compiler: ComponentResolver, private _renderer: Renderer, private _navParams: NavParams, private _viewCtrl: ViewController) {
|
||||
this.d = _navParams.data.opts;
|
||||
}
|
||||
/** @private */
|
||||
_enabled: boolean;
|
||||
|
||||
loadComponent(done: Function) {
|
||||
let componentType = this._navParams.data.componentType;
|
||||
addSelector(componentType, 'ion-page');
|
||||
|
||||
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);
|
||||
|
||||
// auto-add page css className created from component JS class name
|
||||
let cssClassName = pascalCaseToDashCase(componentType.name);
|
||||
this._renderer.setElementClass(componentRef.location.nativeElement, cssClassName, true);
|
||||
this._viewCtrl.setInstance(componentRef.instance);
|
||||
this.enabled = true;
|
||||
done();
|
||||
});
|
||||
constructor(public _cfr: ComponentFactoryResolver, public _renderer: Renderer, public _navParams: NavParams, public _viewCtrl: ViewController) {
|
||||
this._bdDismiss = _navParams.data.opts.enableBackdropDismiss;
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
// intentionally kept empty
|
||||
this._load(this._navParams.data.component);
|
||||
}
|
||||
|
||||
dismiss(role: any): Promise<any> {
|
||||
return this._viewCtrl.dismiss(null, role);
|
||||
/** @private */
|
||||
_load(component: any) {
|
||||
if (component) {
|
||||
const componentFactory = this._cfr.resolveComponentFactory(component);
|
||||
|
||||
// ******** DOM WRITE ****************
|
||||
const componentRef = this._viewport.createComponent(componentFactory, this._viewport.length, this._viewport.parentInjector, []);
|
||||
this._viewCtrl._setInstance(componentRef.instance);
|
||||
|
||||
this._setCssClass(componentRef, 'ion-page');
|
||||
this._setCssClass(componentRef, 'show-page');
|
||||
this._setCssClass(componentRef, pascalCaseToDashCase(component.name));
|
||||
this._enabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
bdClick() {
|
||||
if (this.enabled && this.d.enableBackdropDismiss) {
|
||||
this.dismiss('backdrop');
|
||||
/** @private */
|
||||
_setCssClass(componentRef: any, className: string) {
|
||||
this._renderer.setElementClass(componentRef.location.nativeElement, className, true);
|
||||
}
|
||||
|
||||
_bdClick() {
|
||||
if (this._enabled && this._bdDismiss) {
|
||||
return this._viewCtrl.dismiss(null, 'backdrop');
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('body:keyup', ['$event'])
|
||||
private _keyUp(ev: KeyboardEvent) {
|
||||
if (this.enabled && this._viewCtrl.isLast() && ev.keyCode === Key.ESCAPE ) {
|
||||
this.bdClick();
|
||||
_keyUp(ev: KeyboardEvent) {
|
||||
if (this._enabled && this._viewCtrl.isLast() && ev.keyCode === Key.ESCAPE) {
|
||||
this._bdClick();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -79,43 +77,33 @@ export class ModalCmp {
|
||||
* Animations for modals
|
||||
*/
|
||||
class ModalSlideIn extends PageTransition {
|
||||
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
|
||||
super(enteringView, leavingView, opts);
|
||||
|
||||
let ele = enteringView.pageRef().nativeElement;
|
||||
let backdropEle = ele.querySelector('ion-backdrop');
|
||||
let backdrop = new Animation(backdropEle);
|
||||
let wrapper = new Animation(ele.querySelector('.modal-wrapper'));
|
||||
init() {
|
||||
super.init();
|
||||
const ele: HTMLElement = this.enteringView.pageRef().nativeElement;
|
||||
const backdropEle = ele.querySelector('ion-backdrop');
|
||||
const backdrop = new Animation(backdropEle);
|
||||
const wrapper = new Animation(ele.querySelector('.modal-wrapper'));
|
||||
|
||||
backdrop.fromTo('opacity', 0.01, 0.4);
|
||||
wrapper.fromTo('translateY', '100%', '0%');
|
||||
|
||||
|
||||
this
|
||||
.element(enteringView.pageRef())
|
||||
.element(this.enteringView.pageRef())
|
||||
.easing('cubic-bezier(0.36,0.66,0.04,1)')
|
||||
.duration(400)
|
||||
.add(backdrop)
|
||||
.add(wrapper);
|
||||
|
||||
if (enteringView.hasNavbar()) {
|
||||
// entering page has a navbar
|
||||
let enteringNavBar = new Animation(enteringView.navbarRef());
|
||||
enteringNavBar.before.addClass('show-navbar');
|
||||
this.add(enteringNavBar);
|
||||
}
|
||||
}
|
||||
}
|
||||
PageTransition.register('modal-slide-in', ModalSlideIn);
|
||||
|
||||
|
||||
class ModalSlideOut extends PageTransition {
|
||||
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
|
||||
super(enteringView, leavingView, opts);
|
||||
|
||||
let ele = leavingView.pageRef().nativeElement;
|
||||
init() {
|
||||
super.init();
|
||||
const ele: HTMLElement = this.leavingView.pageRef().nativeElement;
|
||||
let backdrop = new Animation(ele.querySelector('ion-backdrop'));
|
||||
let wrapperEle = <HTMLElement> ele.querySelector('.modal-wrapper');
|
||||
let wrapperEle = <HTMLElement>ele.querySelector('.modal-wrapper');
|
||||
let wrapperEleRect = wrapperEle.getBoundingClientRect();
|
||||
let wrapper = new Animation(wrapperEle);
|
||||
|
||||
@@ -126,7 +114,7 @@ class ModalSlideOut extends PageTransition {
|
||||
backdrop.fromTo('opacity', 0.4, 0.0);
|
||||
|
||||
this
|
||||
.element(leavingView.pageRef())
|
||||
.element(this.leavingView.pageRef())
|
||||
.easing('ease-out')
|
||||
.duration(250)
|
||||
.add(backdrop)
|
||||
@@ -137,12 +125,11 @@ PageTransition.register('modal-slide-out', ModalSlideOut);
|
||||
|
||||
|
||||
class ModalMDSlideIn extends PageTransition {
|
||||
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
|
||||
super(enteringView, leavingView, opts);
|
||||
|
||||
let ele = enteringView.pageRef().nativeElement;
|
||||
let backdrop = new Animation(ele.querySelector('ion-backdrop'));
|
||||
let wrapper = new Animation(ele.querySelector('.modal-wrapper'));
|
||||
init() {
|
||||
super.init();
|
||||
const ele: HTMLElement = this.enteringView.pageRef().nativeElement;
|
||||
const backdrop = new Animation(ele.querySelector('ion-backdrop'));
|
||||
const wrapper = new Animation(ele.querySelector('.modal-wrapper'));
|
||||
|
||||
backdrop.fromTo('opacity', 0.01, 0.4);
|
||||
wrapper.fromTo('translateY', '40px', '0px');
|
||||
@@ -150,35 +137,27 @@ class ModalMDSlideIn extends PageTransition {
|
||||
|
||||
const DURATION = 280;
|
||||
const EASING = 'cubic-bezier(0.36,0.66,0.04,1)';
|
||||
this.element(enteringView.pageRef()).easing(EASING).duration(DURATION)
|
||||
this.element(this.enteringView.pageRef()).easing(EASING).duration(DURATION)
|
||||
.add(backdrop)
|
||||
.add(wrapper);
|
||||
|
||||
if (enteringView.hasNavbar()) {
|
||||
// entering page has a navbar
|
||||
let enteringNavBar = new Animation(enteringView.navbarRef());
|
||||
enteringNavBar.before.addClass('show-navbar');
|
||||
this.add(enteringNavBar);
|
||||
}
|
||||
}
|
||||
}
|
||||
PageTransition.register('modal-md-slide-in', ModalMDSlideIn);
|
||||
|
||||
|
||||
class ModalMDSlideOut extends PageTransition {
|
||||
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
|
||||
super(enteringView, leavingView, opts);
|
||||
|
||||
let ele = leavingView.pageRef().nativeElement;
|
||||
let backdrop = new Animation(ele.querySelector('ion-backdrop'));
|
||||
let wrapper = new Animation(ele.querySelector('.modal-wrapper'));
|
||||
init() {
|
||||
super.init();
|
||||
const ele: HTMLElement = this.leavingView.pageRef().nativeElement;
|
||||
const backdrop = new Animation(ele.querySelector('ion-backdrop'));
|
||||
const wrapper = new Animation(ele.querySelector('.modal-wrapper'));
|
||||
|
||||
backdrop.fromTo('opacity', 0.4, 0.0);
|
||||
wrapper.fromTo('translateY', '0px', '40px');
|
||||
wrapper.fromTo('opacity', 0.99, 0);
|
||||
|
||||
this
|
||||
.element(leavingView.pageRef())
|
||||
.element(this.leavingView.pageRef())
|
||||
.duration(200)
|
||||
.easing('cubic-bezier(0.47,0,0.745,0.715)')
|
||||
.add(wrapper)
|
||||
|
||||
Reference in New Issue
Block a user