From d3eb071c325828fc208e71086016096caecc2047 Mon Sep 17 00:00:00 2001 From: Dan Bucholtz Date: Tue, 9 Jan 2018 11:17:15 -0600 Subject: [PATCH] refactor(nav): fix transition to operate on ion-page element in case of host element, add a todo on iOS transition to figure this out later, and then remove the automatic appending of the .ion-page class --- packages/core/src/components/nav/nav.tsx | 2 +- .../components/nav/transitions/transition.ios.ts | 4 ++++ .../components/nav/transitions/transition.md.ts | 15 ++++++++++++--- 3 files changed, 17 insertions(+), 4 deletions(-) diff --git a/packages/core/src/components/nav/nav.tsx b/packages/core/src/components/nav/nav.tsx index a261fce85b..5aaacb6411 100644 --- a/packages/core/src/components/nav/nav.tsx +++ b/packages/core/src/components/nav/nav.tsx @@ -763,7 +763,7 @@ export function fireViewWillLifecycles(enteringView: ViewController, leavingView export function attachViewToDom(nav: Nav, enteringView: ViewController, delegate: FrameworkDelegate) { if (enteringView && enteringView.state === STATE_NEW) { - return delegate.attachViewToDom(nav.element, enteringView.component, enteringView.data, ['ion-page']).then((mountingData) => { + return delegate.attachViewToDom(nav.element, enteringView.component, enteringView.data, []).then((mountingData) => { Object.assign(enteringView, mountingData); enteringView.state = STATE_ATTACHED; }); diff --git a/packages/core/src/components/nav/transitions/transition.ios.ts b/packages/core/src/components/nav/transitions/transition.ios.ts index eb0f3b0bc0..b4a2170cee 100644 --- a/packages/core/src/components/nav/transitions/transition.ios.ts +++ b/packages/core/src/components/nav/transitions/transition.ios.ts @@ -11,6 +11,10 @@ const CENTER = '0%'; const OFF_OPACITY = 0.8; const SHOW_BACK_BTN_CSS = 'show-back-button'; +// TODO - make sure this uses the `ion-page` logic from the md transition +// DO this later since the transition is broke as a joke anyway +// Dan B 1/9/2018 + export function buildIOSTransition(rootTransition: Transition, enteringView: ViewController, leavingView: ViewController, opts: AnimationOptions): Promise { rootTransition.enteringView = enteringView; diff --git a/packages/core/src/components/nav/transitions/transition.md.ts b/packages/core/src/components/nav/transitions/transition.md.ts index 73e5ccf5c8..f71b19833a 100644 --- a/packages/core/src/components/nav/transitions/transition.md.ts +++ b/packages/core/src/components/nav/transitions/transition.md.ts @@ -12,7 +12,9 @@ export function buildMdTransition(rootTransition: Transition, enteringView: View rootTransition.enteringView = enteringView; rootTransition.leavingView = leavingView; - rootTransition.addElement(enteringView.element); + const ionPageElement = getIonPageElement(enteringView.element); + + rootTransition.addElement(ionPageElement); rootTransition.beforeRemoveClass('hide-page'); const backDirection = (opts.direction === 'back'); @@ -27,7 +29,7 @@ export function buildMdTransition(rootTransition: Transition, enteringView: View .fromTo('opacity', 0.01, 1, true); } - const enteringToolbarEle = enteringView.element.querySelector('ion-toolbar'); + const enteringToolbarEle = ionPageElement.querySelector('ion-toolbar'); if (enteringToolbarEle) { const enteringToolBar = rootTransition.create(); enteringToolBar.addElement(enteringToolbarEle); @@ -50,9 +52,16 @@ export function buildMdTransition(rootTransition: Transition, enteringView: View // leaving content rootTransition.duration(opts.duration || 200).easing('cubic-bezier(0.47,0,0.745,0.715)'); const leavingPage = rootTransition.create(); - leavingPage.addElement(leavingView.element); + leavingPage.addElement(getIonPageElement(leavingView.element)); rootTransition.add(leavingPage.fromTo(TRANSLATEY, CENTER, OFF_BOTTOM).fromTo('opacity', 1, 0)); } return Promise.resolve(rootTransition); } + +function getIonPageElement(element: HTMLElement) { + if (element.tagName.toLowerCase() === 'ion-page') { + return element; + } + return element.querySelector('ion-page'); +}