From f39d3ad9dd61db24afb08215d86c118f1d4accd8 Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Tue, 20 Mar 2018 18:00:26 +0100 Subject: [PATCH] feat(angular): ion-nav --- angular/src/navigation/ion-nav.ts | 119 ++++++++++++++++-- angular/src/navigation/router-transition.ts | 5 +- angular/src/util/util.ts | 7 ++ .../virtual-scroll/virtual-scroll.tsx | 4 +- core/src/index.d.ts | 1 + demos/angular/package-lock.json | 6 +- 6 files changed, 121 insertions(+), 21 deletions(-) diff --git a/angular/src/navigation/ion-nav.ts b/angular/src/navigation/ion-nav.ts index 87f99236bb..30dbabe059 100644 --- a/angular/src/navigation/ion-nav.ts +++ b/angular/src/navigation/ion-nav.ts @@ -1,22 +1,26 @@ -import { Component, ViewEncapsulation } from '@angular/core'; -import { - NavigationEnd, - NavigationStart, - Router -} from '@angular/router'; +import { ComponentFactoryResolver, Directive, ElementRef, Injector} from '@angular/core'; +import { NavigationEnd, NavigationStart, Router } from '@angular/router'; + +import { FrameworkDelegate, NavOptions, NavParams, TransitionDoneFn, ViewController } from '@ionic/core'; +import { proxyEl } from '../util/util'; +import { AngularDelegate } from '..'; -@Component({ +@Directive({ selector: 'ion-nav', - template: '', - styles: [` - ion-nav > :not(.show-page) { display: none; } - `], - encapsulation: ViewEncapsulation.None }) export class IonNav { - constructor(router: Router) { + private delegate: FrameworkDelegate; + + constructor( + private ref: ElementRef, + router: Router, + cfr: ComponentFactoryResolver, + injector: Injector, + angularDelegate: AngularDelegate, + ) { + this.delegate = angularDelegate.create(cfr, injector); console.log('ion-nav'); router.events.subscribe(ev => { @@ -29,4 +33,93 @@ export class IonNav { }); } + push(page: any, params?: NavParams, opts?: NavOptions, done?: TransitionDoneFn): Promise { + return proxyEl(this.ref, 'push', page, params, this.wrap(opts), done); + } + + insert(insertIndex: number, page: any, params?: NavParams, opts?: NavOptions, done?: TransitionDoneFn): Promise { + return proxyEl(this.ref, 'insert', insertIndex, page, params, this.wrap(opts), done); + } + + insertPages(insertIndex: number, insertPages: any[], opts?: NavOptions, done?: TransitionDoneFn): Promise { + return proxyEl(this.ref, 'insertPages', insertIndex, insertPages, this.wrap(opts), done); + } + + pop(opts?: NavOptions, done?: TransitionDoneFn): Promise { + return proxyEl(this.ref, 'pop', this.wrap(opts), done); + } + + popTo(indexOrViewCtrl: any, opts?: NavOptions, done?: TransitionDoneFn): Promise { + return proxyEl(this.ref, 'popTo', indexOrViewCtrl, this.wrap(opts), done); + } + + popToRoot(opts?: NavOptions, done?: TransitionDoneFn): Promise { + return proxyEl(this.ref, 'popToRoot', this.wrap(opts), done); + } + + popAll(): Promise { + return proxyEl(this.ref, 'popAll'); + } + + removeIndex(startIndex: number, removeCount = 1, opts?: NavOptions, done?: TransitionDoneFn): Promise { + return proxyEl(this.ref, 'removeIndex', startIndex, removeCount, this.wrap(opts), done); + } + + removeView(viewController: ViewController, opts?: NavOptions, done?: TransitionDoneFn): Promise { + return proxyEl(this.ref, 'removeView', viewController, this.wrap(opts), done); + } + + setRoot(pageOrViewCtrl: any, params?: any, opts?: NavOptions, done?: TransitionDoneFn): Promise { + return proxyEl(this.ref, 'setRoot', pageOrViewCtrl, params, this.wrap(opts), done); + } + + setPages(pages: any[], opts?: NavOptions, done?: TransitionDoneFn): Promise { + return proxyEl(this.ref, 'setPages', pages, this.wrap(opts), done); + } + + getAllChildNavs(): any[] { + return proxyEl(this.ref, 'getAllChildNavs'); + } + + canGoBack(view?: ViewController): boolean { + return proxyEl(this.ref, 'canGoBack', view); + } + + getActive(): ViewController { + return proxyEl(this.ref, 'getActive'); + } + + getByIndex(index: number): ViewController { + return proxyEl(this.ref, 'getByIndex', index); + } + + getPrevious(view?: ViewController): ViewController|undefined { + return proxyEl(this.ref, 'getPrevious', view); + } + + getViews(): Array { + return proxyEl(this.ref, 'getViews'); + } + /** + * Return a view controller + */ + getViewById(id: string): ViewController|undefined { + return proxyEl(this.ref, 'getViewById', id); + } + + indexOf(viewController: ViewController) { + return proxyEl(this.ref, 'indexOf', viewController); + } + + length() { + return proxyEl(this.ref, 'length'); + } + + private wrap(opts?: NavOptions): NavOptions { + return { + ...this.wrap(opts), + delegate: this.delegate + }; + } + } diff --git a/angular/src/navigation/router-transition.ts b/angular/src/navigation/router-transition.ts index c9a589560d..7ef3bfdcf7 100644 --- a/angular/src/navigation/router-transition.ts +++ b/angular/src/navigation/router-transition.ts @@ -1,6 +1,5 @@ import { ComponentRef } from '@angular/core'; - export function runTransition(enteringRef: ComponentRef, leavingRef: ComponentRef): Promise { const enteringElm = (enteringRef && enteringRef.location && enteringRef.location.nativeElement); const leavingElm = (leavingRef && leavingRef.location && leavingRef.location.nativeElement); @@ -9,11 +8,11 @@ export function runTransition(enteringRef: ComponentRef, leavingRef: Compon return Promise.resolve(); } - return transition(enteringElm, leavingElm); + return tr(enteringElm, leavingElm); } -function transition(enteringElm: HTMLElement, leavingElm: HTMLElement): Promise { +function tr(enteringElm: HTMLElement, leavingElm: HTMLElement): Promise { console.log('transition start'); return new Promise(resolve => { diff --git a/angular/src/util/util.ts b/angular/src/util/util.ts index 0012c7475d..fe3d7fd14e 100644 --- a/angular/src/util/util.ts +++ b/angular/src/util/util.ts @@ -1,3 +1,4 @@ +import { ElementRef } from '@angular/core'; export function proxyMethod(ctrlName: string, methodName: string, ...args: any[]) { const controller = ensureElementInBody(ctrlName); @@ -5,6 +6,12 @@ export function proxyMethod(ctrlName: string, methodName: string, ...args: any[] .then(() => (controller as any)[methodName].apply(controller, args)); } +export function proxyEl(ref: ElementRef, methodName: string, ...args: any[]) { + return ref.nativeElement.componentOnReady() + .then((el: any) => el[methodName].apply(el, args)); +} + + export function ensureElementInBody(elementName: string) { let element = document.querySelector(elementName); if (!element) { diff --git a/core/src/components/virtual-scroll/virtual-scroll.tsx b/core/src/components/virtual-scroll/virtual-scroll.tsx index 6767a221b5..a770b7f2d4 100644 --- a/core/src/components/virtual-scroll/virtual-scroll.tsx +++ b/core/src/components/virtual-scroll/virtual-scroll.tsx @@ -28,7 +28,7 @@ export class VirtualScroll { private heightChanged = false; private lastItemLen = 0; - @Element() el: HTMLElement; + @Element() el: HTMLStencilElement; @Prop({context: 'dom'}) dom: DomController; @Prop({context: 'enableListener'}) enableListener: EventListenerEnable; @@ -257,7 +257,7 @@ export class VirtualScroll { } else if (this.domRender) { this.domRender(this.virtualDom); } else if (this.renderer) { - (this.el as any).forceUpdate(); + this.el.forceUpdate(); } if (this.heightChanged) { this.el.style.height = this.totalHeight + 'px'; diff --git a/core/src/index.d.ts b/core/src/index.d.ts index 237a1da237..83d74d5985 100644 --- a/core/src/index.d.ts +++ b/core/src/index.d.ts @@ -59,6 +59,7 @@ export * from './components/modal/modal'; export { ModalController } from './components/modal-controller/modal-controller'; export * from './components/nav/nav'; export { ViewController } from './components/nav/view-controller'; +export { NavParams, NavOptions, TransitionDoneFn} from './components/nav/nav-util'; export { Note } from './components/note/note'; export { PickerColumnCmp } from './components/picker-column/picker-column'; export * from './components/picker/picker'; diff --git a/demos/angular/package-lock.json b/demos/angular/package-lock.json index 5db4ef0f3e..53f9ff23ad 100644 --- a/demos/angular/package-lock.json +++ b/demos/angular/package-lock.json @@ -236,9 +236,9 @@ "integrity": "sha512-6HkJ+IZAy1o+EKjw1hBn+/CzkhHolCMXnUBxjHBCdNduCkeAiijFVCmok5lYbTjCX0xNI/rBtJmkFKrotBmWLQ==" }, "@ionic/core": { - "version": "0.1.4-5", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-0.1.4-5.tgz", - "integrity": "sha512-d8h7mMCWwyU+aPBwGcznnkmN4xTWSgjxE9gxKZ+qKxzeHN5C/T5qbGgfHzyO5Dad4EO3lsvkAP6ijjrL1VQIGQ==", + "version": "0.1.4-8", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-0.1.4-8.tgz", + "integrity": "sha512-6KelGeTQ9hOMr7Gz4qoKqpu1/qJoqZyZZNWZf1vZa3lC47n2NDTv8TE4f+2x0Vp9PqQ/DZoJLPLuvKb5l0CKYQ==", "requires": { "ionicons": "4.0.0-18" }