mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 13:32:54 +08:00
chore(components): ngmodule updates
This commit is contained in:
Adam Bradley
@ -1,16 +1,13 @@
|
||||
import { Component, ComponentResolver, ElementRef, HostListener, Renderer, ViewChild, ViewContainerRef } from '@angular/core';
|
||||
import { Component, ComponentFactoryResolver, ElementRef, HostListener, Renderer, ViewChild, ViewContainerRef } from '@angular/core';
|
||||
|
||||
import { addSelector } from '../../config/bootstrap';
|
||||
import { Animation } from '../../animations/animation';
|
||||
import { Backdrop } from '../backdrop/backdrop';
|
||||
import { Config } from '../../config/config';
|
||||
import { CSS, nativeRaf } from '../../util/dom';
|
||||
import { isPresent, pascalCaseToDashCase } from '../../util/util';
|
||||
import { pascalCaseToDashCase } from '../../util/util';
|
||||
import { Key } from '../../util/key';
|
||||
import { NavParams } from '../nav/nav-params';
|
||||
import { NavParams } from '../../navigation/nav-params';
|
||||
import { PageTransition } from '../../transitions/page-transition';
|
||||
import { TransitionOptions } from '../../transitions/transition';
|
||||
import { ViewController } from '../nav/view-controller';
|
||||
import { ViewController } from '../../navigation/view-controller';
|
||||
|
||||
|
||||
/**
|
||||
@ -18,41 +15,45 @@ import { ViewController } from '../nav/view-controller';
|
||||
*/
|
||||
@Component({
|
||||
selector: 'ion-popover',
|
||||
template: `
|
||||
<ion-backdrop (click)="bdClick($event)" [class.hide-backdrop]="!d.showBackdrop"></ion-backdrop>
|
||||
<div class="popover-wrapper">
|
||||
<div class="popover-arrow"></div>
|
||||
<div class="popover-content">
|
||||
<div class="popover-viewport">
|
||||
<div #viewport nav-viewport></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
directives: [Backdrop]
|
||||
template:
|
||||
'<ion-backdrop (click)="_bdClick()" [class.hide-backdrop]="!d.showBackdrop"></ion-backdrop>' +
|
||||
'<div class="popover-wrapper">' +
|
||||
'<div class="popover-arrow"></div>' +
|
||||
'<div class="popover-content">' +
|
||||
'<div class="popover-viewport">' +
|
||||
'<div #viewport nav-viewport></div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
})
|
||||
export class PopoverCmp {
|
||||
@ViewChild('viewport', {read: ViewContainerRef}) viewport: ViewContainerRef;
|
||||
|
||||
private d: {
|
||||
@ViewChild('viewport', {read: ViewContainerRef}) _viewport: ViewContainerRef;
|
||||
|
||||
d: {
|
||||
cssClass?: string;
|
||||
showBackdrop?: boolean;
|
||||
enableBackdropDismiss?: boolean;
|
||||
};
|
||||
private enabled: boolean;
|
||||
private id: number;
|
||||
private showSpinner: boolean;
|
||||
|
||||
/** @private */
|
||||
_enabled: boolean;
|
||||
|
||||
/** @private */
|
||||
id: number;
|
||||
|
||||
constructor(
|
||||
private _compiler: ComponentResolver,
|
||||
private _elementRef: ElementRef,
|
||||
private _renderer: Renderer,
|
||||
private _config: Config,
|
||||
private _navParams: NavParams,
|
||||
private _viewCtrl: ViewController
|
||||
public _cfr: ComponentFactoryResolver,
|
||||
public _elementRef: ElementRef,
|
||||
public _renderer: Renderer,
|
||||
public _config: Config,
|
||||
public _navParams: NavParams,
|
||||
public _viewCtrl: ViewController
|
||||
) {
|
||||
this.d = _navParams.data.opts;
|
||||
|
||||
_renderer.setElementClass(_elementRef.nativeElement, `popover-${_config.get('mode')}`, true);
|
||||
|
||||
if (this.d.cssClass) {
|
||||
this.d.cssClass.split(' ').forEach(cssClass => {
|
||||
// Make sure the class isn't whitespace, otherwise it throws exceptions
|
||||
@ -63,46 +64,43 @@ export class PopoverCmp {
|
||||
this.id = (++popoverIds);
|
||||
}
|
||||
|
||||
ionViewWillEnter() {
|
||||
addSelector(this._navParams.data.componentType, 'ion-popover-inner');
|
||||
|
||||
this._compiler.resolveComponent(this._navParams.data.componentType).then((componentFactory) => {
|
||||
let componentRef = this.viewport.createComponent(componentFactory, this.viewport.length, this.viewport.parentInjector);
|
||||
|
||||
this._viewCtrl.setInstance(componentRef.instance);
|
||||
|
||||
// manually fire ionViewWillEnter() since PopoverCmp's ionViewWillEnter already happened
|
||||
this._viewCtrl.fireWillEnter();
|
||||
});
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
let activeElement: any = document.activeElement;
|
||||
if (document.activeElement) {
|
||||
activeElement.blur();
|
||||
}
|
||||
this.enabled = true;
|
||||
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, pascalCaseToDashCase(component.name));
|
||||
this._enabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
bdTouch(ev: UIEvent) {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
/** @private */
|
||||
_setCssClass(componentRef: any, className: string) {
|
||||
this._renderer.setElementClass(componentRef.location.nativeElement, className, true);
|
||||
}
|
||||
|
||||
bdClick() {
|
||||
if (this.enabled && this.d.enableBackdropDismiss) {
|
||||
this.dismiss('backdrop');
|
||||
_bdClick() {
|
||||
if (this._enabled && this.d.enableBackdropDismiss) {
|
||||
return this._viewCtrl.dismiss(null, 'backdrop');
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('body:keyup', ['$event'])
|
||||
private _keyUp(ev: KeyboardEvent) {
|
||||
if (this.enabled && ev.keyCode === Key.ESCAPE && this._viewCtrl.isLast()) {
|
||||
this.bdClick();
|
||||
_keyUp(ev: KeyboardEvent) {
|
||||
if (this._enabled && ev.keyCode === Key.ESCAPE && this._viewCtrl.isLast()) {
|
||||
this._bdClick();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -112,9 +110,6 @@ export class PopoverCmp {
|
||||
* Animations for popover
|
||||
*/
|
||||
class PopoverTransition extends PageTransition {
|
||||
constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
|
||||
super(enteringView, leavingView, opts);
|
||||
}
|
||||
|
||||
mdPositionView(nativeEle: HTMLElement, ev: any) {
|
||||
let originY = 'top';
|
||||
@ -138,7 +133,6 @@ class PopoverTransition extends PageTransition {
|
||||
let targetTop = (targetDim && 'top' in targetDim) ? targetDim.top : (bodyHeight / 2) - (popoverHeight / 2);
|
||||
let targetLeft = (targetDim && 'left' in targetDim) ? targetDim.left : (bodyWidth / 2) - (popoverWidth / 2);
|
||||
|
||||
let targetWidth = targetDim && targetDim.width || 0;
|
||||
let targetHeight = targetDim && targetDim.height || 0;
|
||||
|
||||
let popoverCSS = {
|
||||
@ -170,7 +164,7 @@ class PopoverTransition extends PageTransition {
|
||||
popoverEle.style.top = popoverCSS.top + 'px';
|
||||
popoverEle.style.left = popoverCSS.left + 'px';
|
||||
|
||||
popoverEle.style[CSS.transformOrigin] = originY + ' ' + originX;
|
||||
(<any>popoverEle.style)[CSS.transformOrigin] = originY + ' ' + originX;
|
||||
|
||||
// Since the transition starts before styling is done we
|
||||
// want to wait for the styles to apply before showing the wrapper
|
||||
@ -250,7 +244,7 @@ class PopoverTransition extends PageTransition {
|
||||
popoverEle.style.top = popoverCSS.top + 'px';
|
||||
popoverEle.style.left = popoverCSS.left + 'px';
|
||||
|
||||
popoverEle.style[CSS.transformOrigin] = originY + ' ' + originX;
|
||||
(<any>popoverEle.style)[CSS.transformOrigin] = originY + ' ' + originX;
|
||||
|
||||
// Since the transition starts before styling is done we
|
||||
// want to wait for the styles to apply before showing the wrapper
|
||||
@ -259,10 +253,8 @@ class PopoverTransition extends PageTransition {
|
||||
}
|
||||
|
||||
class PopoverPopIn extends PopoverTransition {
|
||||
constructor(enteringView: ViewController, leavingView: ViewController, private opts: TransitionOptions) {
|
||||
super(enteringView, leavingView, opts);
|
||||
|
||||
let ele = enteringView.pageRef().nativeElement;
|
||||
init() {
|
||||
let ele = this.enteringView.pageRef().nativeElement;
|
||||
|
||||
let backdrop = new Animation(ele.querySelector('ion-backdrop'));
|
||||
let wrapper = new Animation(ele.querySelector('.popover-wrapper'));
|
||||
@ -288,10 +280,8 @@ PageTransition.register('popover-pop-in', PopoverPopIn);
|
||||
|
||||
|
||||
class PopoverPopOut extends PopoverTransition {
|
||||
constructor(enteringView: ViewController, leavingView: ViewController, private opts: TransitionOptions) {
|
||||
super(enteringView, leavingView, opts);
|
||||
|
||||
let ele = leavingView.pageRef().nativeElement;
|
||||
init() {
|
||||
let ele = this.leavingView.pageRef().nativeElement;
|
||||
let backdrop = new Animation(ele.querySelector('ion-backdrop'));
|
||||
let wrapper = new Animation(ele.querySelector('.popover-wrapper'));
|
||||
|
||||
@ -309,11 +299,8 @@ PageTransition.register('popover-pop-out', PopoverPopOut);
|
||||
|
||||
|
||||
class PopoverMdPopIn extends PopoverTransition {
|
||||
constructor(enteringView: ViewController, leavingView: ViewController, private opts: TransitionOptions) {
|
||||
super(enteringView, leavingView, opts);
|
||||
|
||||
let ele = enteringView.pageRef().nativeElement;
|
||||
|
||||
init() {
|
||||
let ele = this.enteringView.pageRef().nativeElement;
|
||||
let content = new Animation(ele.querySelector('.popover-content'));
|
||||
let viewport = new Animation(ele.querySelector('.popover-viewport'));
|
||||
|
||||
@ -338,10 +325,8 @@ PageTransition.register('popover-md-pop-in', PopoverMdPopIn);
|
||||
|
||||
|
||||
class PopoverMdPopOut extends PopoverTransition {
|
||||
constructor(enteringView: ViewController, leavingView: ViewController, private opts: TransitionOptions) {
|
||||
super(enteringView, leavingView, opts);
|
||||
|
||||
let ele = leavingView.pageRef().nativeElement;
|
||||
init() {
|
||||
let ele = this.leavingView.pageRef().nativeElement;
|
||||
let wrapper = new Animation(ele.querySelector('.popover-wrapper'));
|
||||
|
||||
wrapper.fromTo('opacity', 0.99, 0);
|
||||
|
||||
Reference in New Issue
Block a user