From aa53563944de2af1a1cd48d938513679cfb067db Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Fri, 27 Apr 2018 00:15:06 +0200 Subject: [PATCH] refactor(transition): deduplicates animation builder --- core/src/components.d.ts | 4 +- core/src/components/nav/nav-interface.ts | 16 +++-- core/src/components/nav/nav.tsx | 44 ++++---------- .../components/router-outlet/route-outlet.tsx | 36 ++--------- .../animations/ios.transition.ts | 6 +- .../nav => utils}/animations/md.transition.ts | 6 +- core/src/utils/transition.ts | 60 +++++++++---------- 7 files changed, 64 insertions(+), 108 deletions(-) rename core/src/{components/nav => utils}/animations/ios.transition.ts (97%) rename core/src/{components/nav => utils}/animations/md.transition.ts (92%) diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 03434ec400..134b699352 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -55,6 +55,7 @@ import { PopoverOptions, RangeInputChangeEvent, RouteID, + RouterOutletOptions, RouteWrite, SelectInputChangeEvent, SelectPopoverOption, @@ -79,9 +80,6 @@ import { import { ViewController, } from './components/nav/view-controller'; -import { - RouterOutletOptions, -} from './components/router-outlet/route-outlet'; import { RouterDirection, RouterEventDetail, diff --git a/core/src/components/nav/nav-interface.ts b/core/src/components/nav/nav-interface.ts index fda14ca41f..320913fde1 100644 --- a/core/src/components/nav/nav-interface.ts +++ b/core/src/components/nav/nav-interface.ts @@ -1,4 +1,4 @@ -import { Animation, ComponentRef, FrameworkDelegate } from '../../interface'; +import { Animation, AnimationBuilder, ComponentRef, FrameworkDelegate, Mode } from '../../interface'; import { ViewController } from './view-controller'; export { Nav } from './nav'; @@ -15,16 +15,20 @@ export interface NavResult { direction?: NavDirection; } -export interface NavOptions { +export interface RouterOutletOptions { animate?: boolean; - animation?: string; - direction?: NavDirection; + animationBuilder?: AnimationBuilder; duration?: number; easing?: string; - id?: string; + showGoBack?: boolean; + direction?: NavDirection; + deepWait?: boolean; + mode?: Mode; keyboardClose?: boolean; +} + +export interface NavOptions extends RouterOutletOptions { progressAnimation?: boolean; - ev?: any; updateURL?: boolean; delegate?: FrameworkDelegate; viewIsReady?: (enteringEl: HTMLElement) => Promise; diff --git a/core/src/components/nav/nav.tsx b/core/src/components/nav/nav.tsx index c3c1e5d6ba..af57cf5e7a 100644 --- a/core/src/components/nav/nav.tsx +++ b/core/src/components/nav/nav.tsx @@ -1,20 +1,15 @@ import { Build, Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core'; import { Animation, ComponentProps, Config, FrameworkDelegate, GestureDetail, Mode, NavOutlet, QueueController, RouteID, RouteWrite, RouterDirection } from '../../interface'; -import { NavComponent, NavDirection, NavOptions, NavResult, TransitionDoneFn, TransitionInstruction } from '../../interface'; +import { NavComponent, NavOptions, NavResult, TransitionDoneFn, TransitionInstruction } from '../../interface'; import { assert } from '../../utils/helpers'; -import { AnimationOptions, ViewLifecycle, lifecycle, transition } from '../../utils/transition'; +import { TransitionOptions, ViewLifecycle, lifecycle, transition } from '../../utils/transition'; import { ViewController, ViewState, convertToViews, matches } from './view-controller'; -import iosTransitionAnimation from './animations/ios.transition'; -import mdTransitionAnimation from './animations/md.transition'; - - @Component({ tag: 'ion-nav', }) export class Nav implements NavOutlet { - private init = false; private transInstr: TransitionInstruction[] = []; private sbTrns?: Animation; private useRouter = false; @@ -288,7 +283,6 @@ export class Nav implements NavOutlet { this.fireError('nav controller was destroyed', ti); return; } - this.init = true; if (ti.done) { ti.done( @@ -557,30 +551,24 @@ export class Nav implements NavOutlet { // or if it is a portal (modal, actionsheet, etc.) const opts = ti.opts!; - const animationBuilder = this.getAnimationBuilder(opts); - - const progressAnimation = opts.progressAnimation - ? (animation: Animation) => this.sbTrns = animation + const progressCallback = opts.progressAnimation + ? (animation: Animation) => { this.sbTrns = animation; } : undefined; const enteringEl = enteringView.element!; const leavingEl = leavingView && leavingView.element!; - const animationOpts: AnimationOptions = { - animationCtrl: this.animationCtrl, - animationBuilder: animationBuilder, - animation: undefined, - - direction: opts.direction as NavDirection, - duration: opts.duration, - easing: opts.easing, - viewIsReady: opts.viewIsReady, - + const animationOpts: TransitionOptions = { + mode: this.mode, + animate: this.animated, showGoBack: this.canGoBack(enteringView), - progressAnimation, + animationCtrl: this.animationCtrl, + progressCallback, window: this.win, baseEl: this.el, enteringEl, - leavingEl + leavingEl, + + ...opts }; const trns = await transition(animationOpts); return this.transitionFinish(trns, enteringView, leavingView, opts); @@ -607,14 +595,6 @@ export class Nav implements NavOutlet { }; } - private getAnimationBuilder(opts: NavOptions) { - if (opts.duration === 0 || opts.animate === false || !this.init || this.animated === false || this.views.length <= 1) { - return undefined; - } - const mode = opts.animation || this.config.get('pageTransition', this.mode); - return mode === 'ios' ? iosTransitionAnimation : mdTransitionAnimation; - } - private insertViewAt(view: ViewController, index: number) { const views = this.views; const existingIndex = views.indexOf(view); diff --git a/core/src/components/router-outlet/route-outlet.tsx b/core/src/components/router-outlet/route-outlet.tsx index 338a9b8827..d321830300 100644 --- a/core/src/components/router-outlet/route-outlet.tsx +++ b/core/src/components/router-outlet/route-outlet.tsx @@ -1,11 +1,8 @@ import { Component, Element, Event, EventEmitter, Method, Prop } from '@stencil/core'; -import { AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode, NavDirection, NavOutlet, RouteID, RouteWrite } from '../../interface'; +import { AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode, NavOutlet, RouteID, RouteWrite, RouterOutletOptions } from '../../interface'; import { transition } from '../../utils'; import { attachComponent, detachComponent } from '../../utils/framework-delegate'; -import iosTransitionAnimation from '../nav/animations/ios.transition'; -import mdTransitionAnimation from '../nav/animations/md.transition'; - @Component({ tag: 'ion-router-outlet' @@ -76,18 +73,15 @@ export class RouterOutlet implements NavOutlet { opts = opts || {}; await transition({ - animationBuilder: this.getAnimationBuilder(opts), - direction: opts.direction, - duration: opts.duration, - easing: opts.easing, - deepWait: opts.deepWait, - + mode: this.mode, + animate: this.animated, animationCtrl: this.animationCtrl, - showGoBack: opts.showGoBack, window: this.win, enteringEl: enteringEl, leavingEl: leavingEl, baseEl: this.el, + + ...opts }); this.isTransitioning = false; @@ -117,16 +111,6 @@ export class RouterOutlet implements NavOutlet { } : undefined; } - private getAnimationBuilder(opts: RouterOutletOptions) { - if (opts.duration === 0 || this.animated === false) { - return undefined; - } - const mode = opts.mode || this.config.get('pageTransition', this.mode); - return opts.animationBuilder - || this.animationBuilder - || mode === 'ios' ? iosTransitionAnimation : mdTransitionAnimation; - } - render() { return [ this.mode === 'ios' &&
, @@ -134,13 +118,3 @@ export class RouterOutlet implements NavOutlet { ]; } } - -export interface RouterOutletOptions { - animationBuilder?: AnimationBuilder; - duration?: number; - easing?: string; - showGoBack?: boolean; - direction?: NavDirection; - deepWait?: boolean; - mode?: 'md' | 'ios'; -} diff --git a/core/src/components/nav/animations/ios.transition.ts b/core/src/utils/animations/ios.transition.ts similarity index 97% rename from core/src/components/nav/animations/ios.transition.ts rename to core/src/utils/animations/ios.transition.ts index b2f2590aef..ad46caa1df 100644 --- a/core/src/components/nav/animations/ios.transition.ts +++ b/core/src/utils/animations/ios.transition.ts @@ -1,5 +1,5 @@ -import { Animation } from '../../../interface'; -import { AnimationOptions } from '../../../utils/transition'; +import { Animation } from '../../interface'; +import { TransitionOptions } from '../../utils/transition'; const DURATION = 500; const EASING = 'cubic-bezier(0.36,0.66,0.04,1)'; @@ -9,7 +9,7 @@ const TRANSLATEX = 'translateX'; const CENTER = '0%'; const OFF_OPACITY = 0.8; -export default function iosTransitionAnimation(Animation: Animation, navEl: HTMLElement, opts: AnimationOptions): Promise { +export default function iosTransitionAnimation(Animation: Animation, navEl: HTMLElement, opts: TransitionOptions): Promise { const isRTL = document.dir === 'rtl'; const OFF_RIGHT = isRTL ? '-99.5%' : '99.5%'; diff --git a/core/src/components/nav/animations/md.transition.ts b/core/src/utils/animations/md.transition.ts similarity index 92% rename from core/src/components/nav/animations/md.transition.ts rename to core/src/utils/animations/md.transition.ts index d923f14f08..c7fcae08d8 100644 --- a/core/src/components/nav/animations/md.transition.ts +++ b/core/src/utils/animations/md.transition.ts @@ -1,11 +1,11 @@ -import { Animation } from '../../../interface'; -import { AnimationOptions } from '../../../utils/transition'; +import { Animation } from '../../interface'; +import { TransitionOptions } from '../../utils/transition'; const TRANSLATEY = 'translateY'; const OFF_BOTTOM = '40px'; const CENTER = '0px'; -export default function mdTransitionAnimation(Animation: Animation, _: HTMLElement, opts: AnimationOptions): Promise { +export default function mdTransitionAnimation(Animation: Animation, _: HTMLElement, opts: TransitionOptions): Promise { const enteringEl = opts.enteringEl; const leavingEl = opts.leavingEl; diff --git a/core/src/utils/transition.ts b/core/src/utils/transition.ts index a0dbe17852..0e4ba1f0eb 100644 --- a/core/src/utils/transition.ts +++ b/core/src/utils/transition.ts @@ -1,15 +1,29 @@ -import { Animation, AnimationBuilder, NavDirection } from '../interface'; +import { Animation, AnimationBuilder, NavDirection, NavOptions } from '../interface'; +import iosTransitionAnimation from './animations/ios.transition'; +import mdTransitionAnimation from './animations/md.transition'; -export function transition(opts: AnimationOptions): Promise { +export function transition(opts: TransitionOptions): Promise { beforeTransition(opts); - return (opts.leavingEl && (opts.animationBuilder || opts.animation)) - ? animation(opts) + const animationBuilder = getAnimationBuilder(opts); + return (animationBuilder) + ? animation(animationBuilder, opts) : noAnimation(opts); // fast path for no animation } -function beforeTransition(opts: AnimationOptions) { +function getAnimationBuilder(opts: TransitionOptions): AnimationBuilder | undefined { + if (!opts.leavingEl || opts.animate === false || opts.duration === 0) { + return undefined; + } + if (opts.animationBuilder) { + return opts.animationBuilder; + } + return opts.mode === 'ios' ? iosTransitionAnimation : mdTransitionAnimation; + +} + +function beforeTransition(opts: TransitionOptions) { const enteringEl = opts.enteringEl; const leavingEl = opts.leavingEl; @@ -26,10 +40,10 @@ function beforeTransition(opts: AnimationOptions) { } } -async function animation(opts: AnimationOptions): Promise { +async function animation(animationBuilder: AnimationBuilder, opts: TransitionOptions): Promise { await waitForReady(opts, true); - const trns = await createTransition(opts); + const trns = await opts.animationCtrl.create(animationBuilder, opts.baseEl, opts); fireWillEvents(opts.window, opts.enteringEl, opts.leavingEl); await playTransition(trns, opts); @@ -39,7 +53,7 @@ async function animation(opts: AnimationOptions): Promise { return trns; } -async function noAnimation(opts: AnimationOptions): Promise { +async function noAnimation(opts: TransitionOptions): Promise { const enteringEl = opts.enteringEl; const leavingEl = opts.leavingEl; if (enteringEl) { @@ -55,7 +69,7 @@ async function noAnimation(opts: AnimationOptions): Promise { return null; } -async function waitForReady(opts: AnimationOptions, defaultDeep: boolean) { +async function waitForReady(opts: TransitionOptions, defaultDeep: boolean) { const deep = opts.deepWait != null ? opts.deepWait : defaultDeep; const promises = deep ? [ deepReady(opts.enteringEl), @@ -75,23 +89,17 @@ async function notifyViewReady(viewIsReady: undefined | ((enteringEl: HTMLElemen } } -function createTransition(opts: AnimationOptions) { - if (opts.animation) { - return opts.animation; - } - return opts.animationCtrl.create(opts.animationBuilder, opts.baseEl, opts); -} -function playTransition(transition: Animation, opts: AnimationOptions): Promise { - const progressAnimation = opts.progressAnimation; +function playTransition(transition: Animation, opts: TransitionOptions): Promise { + const progressCallback = opts.progressCallback; const promise = new Promise(resolve => transition.onFinish(resolve)); // cool, let's do this, start the transition - if (progressAnimation) { + if (progressCallback) { // this is a swipe to go back, just get the transition progress ready // kick off the swipe animation start transition.progressStart(); - progressAnimation(transition); + progressCallback(transition); } else { // only the top level transition should actually start "play" @@ -176,19 +184,11 @@ export const enum ViewLifecycle { WillUnload = 'ionViewWillUnload', } -export interface AnimationOptions { +export interface TransitionOptions extends NavOptions { animationCtrl: HTMLIonAnimationControllerElement; - animationBuilder: AnimationBuilder|undefined; - animation?: Animation; - direction?: NavDirection; - duration?: number; - easing?: string; - deepWait?: boolean; - viewIsReady?: (enteringEl: HTMLElement) => Promise; - showGoBack?: boolean; - progressAnimation?: Function; + progressCallback?: ((ani: Animation) => void); window: Window; + baseEl: HTMLElement; enteringEl: HTMLElement; leavingEl: HTMLElement|undefined; - baseEl: HTMLElement; }