Skip to content
Permalink
Browse files

fix(header): fix collapsing iOS header when using with split pane (#1…

  • Loading branch information...
liamdebeasi committed Oct 4, 2019
1 parent 17614cd commit dea1c2635d20115c9906ccfa83c500c0d56468a6
Showing with 17 additions and 8 deletions.
  1. +3 −1 core/src/components/header/header.utils.ts
  2. +14 −7 core/src/utils/transition/ios.transition.ts
@@ -88,7 +88,9 @@ export const handleToolbarIntersection = (ev: any, mainHeaderIndex: HeaderIndex,
const rootArea = event.rootBounds.width * event.rootBounds.height;

const isPageHidden = intersectionArea === 0 && rootArea === 0;
const isPageTransitioning = intersectionArea > 0 && (intersection.left !== event.rootBounds.left || intersection.right !== event.rootBounds.right);
const leftDiff = Math.abs(intersection.left - event.boundingClientRect.left);
const rightDiff = Math.abs(intersection.right - event.boundingClientRect.right);
const isPageTransitioning = intersectionArea > 0 && (leftDiff >= 5 || rightDiff >= 5);

if (isPageHidden || isPageTransitioning) {
return;
@@ -61,13 +61,15 @@ const createLargeTitleTransition = (rootAnimation: IonicAnimation, rtl: boolean,
};

const animateBackButton = (rootAnimation: IonicAnimation, rtl: boolean, backDirection: boolean, backButtonEl: any) => {
const backButtonBounds = backButtonEl.getBoundingClientRect();
const BACK_BUTTON_START_OFFSET = (rtl) ? `calc(100% - ${backButtonBounds.right + 4}px)` : `${backButtonBounds.left - 4}px`;
const START_TEXT_TRANSLATE = (rtl) ? '7px' : '-7px';
const END_TEXT_TRANSLATE = (rtl) ? '-4px' : '4px';

const ICON_TRANSLATE = (rtl) ? '-4px' : '4px';

const TEXT_TRANSFORM_ORIGIN_X = (rtl) ? 'right' : 'left';
const ICON_TRANSFORM_ORIGIN_X = (rtl) ? 'left' : 'right';
const TEXT_ORIGIN_X = (rtl) ? 'right' : 'left';
const ICON_ORIGIN_X = (rtl) ? 'left' : 'right';

const FORWARD_TEXT_KEYFRAMES = [
{ offset: 0, opacity: 0, transform: `translate(${START_TEXT_TRANSLATE}, ${addSafeArea(8)}) scale(2.1)` },
@@ -113,29 +115,33 @@ const animateBackButton = (rootAnimation: IonicAnimation, rtl: boolean, backDire

enteringBackButtonTextAnimation
.beforeStyles({
'transform-origin': `${TEXT_TRANSFORM_ORIGIN_X} center`
'transform-origin': `${TEXT_ORIGIN_X} center`
})
.beforeAddWrite(() => {
backButtonEl.style.setProperty('display', 'none');
clonedBackButtonEl.style.setProperty(TEXT_ORIGIN_X, BACK_BUTTON_START_OFFSET);
})
.afterAddWrite(() => {
backButtonEl.style.setProperty('display', '');
clonedBackButtonEl.style.setProperty('display', 'none');
clonedBackButtonEl.style.removeProperty(TEXT_ORIGIN_X);
})
.keyframes(TEXT_KEYFRAMES);

enteringBackButtonIconAnimation
.beforeStyles({
'transform-origin': `${ICON_TRANSFORM_ORIGIN_X} center`
'transform-origin': `${ICON_ORIGIN_X} center`
})
.keyframes(ICON_KEYFRAMES);

rootAnimation.addAnimation([enteringBackButtonTextAnimation, enteringBackButtonIconAnimation]);
};

const animateLargeTitle = (rootAnimation: IonicAnimation, rtl: boolean, backDirection: boolean, largeTitleEl: any) => {
const largeTitleBounds = largeTitleEl.getBoundingClientRect();
const TITLE_START_OFFSET = (rtl) ? `calc(100% - ${largeTitleBounds.right}px)` : `${largeTitleBounds.left}px`;
const START_TRANSLATE = (rtl) ? '-18px' : '18px';
const TRANSFORM_ORIGIN_X = (rtl) ? 'right' : 'left';
const ORIGIN_X = (rtl) ? 'right' : 'left';

const BACKWARDS_KEYFRAMES = [
{ offset: 0, opacity: 0, transform: `translate(${START_TRANSLATE}, ${addSafeArea(0)}) scale(0.49)` },
@@ -160,10 +166,11 @@ const animateLargeTitle = (rootAnimation: IonicAnimation, rtl: boolean, backDire

clonedLargeTitleAnimation
.beforeStyles({
'transform-origin': `${TRANSFORM_ORIGIN_X} center`,
'transform-origin': `${ORIGIN_X} center`,
'height': '46px',
'display': '',
'position': 'relative'
'position': 'relative',
[ORIGIN_X]: TITLE_START_OFFSET
})
.beforeAddWrite(() => {
largeTitleEl.style.setProperty('display', 'none');

0 comments on commit dea1c26

Please sign in to comment.
You can’t perform that action at this time.