@rdlabo/ionic-theme-ios27 0.1.0-beta.pr154.shac3e35365120e → 0.1.0

package/src/transition/ios.transition.ts

@@ -6,8 +6,6 @@ import { connectNativeUIShellTransition } from '../native-integration';
 
 const DURATION = 540;
 
-// TODO(FW-2832): types
-
 const getClonedElement = <T extends HTMLIonBackButtonElement | HTMLIonTitleElement>(tagName: string) => {
   return document.querySelector<T>(`${tagName}.ion-cloned-element`);
 };
@@ -119,480 +117,6 @@ const animateFixedBackButton = (
   root.addAnimation(animation);
 };
 
-const getLargeTitle = (refEl: any) => {
-  const tabs = refEl.tagName === 'ION-TABS' ? refEl : refEl.querySelector('ion-tabs');
-  const query = 'ion-content ion-header:not(.header-collapse-condense-inactive) ion-title.title-large';
-
-  if (tabs != null) {
-    const activeTab = tabs.querySelector('ion-tab:not(.tab-hidden), .ion-page:not(.ion-page-hidden)');
-    return activeTab != null ? activeTab.querySelector(query) : null;
-  }
-
-  return refEl.querySelector(query);
-};
-
-const getBackButton = (refEl: any, backDirection: boolean) => {
-  const tabs = refEl.tagName === 'ION-TABS' ? refEl : refEl.querySelector('ion-tabs');
-  let buttonsList = [];
-
-  if (tabs != null) {
-    const activeTab = tabs.querySelector('ion-tab:not(.tab-hidden), .ion-page:not(.ion-page-hidden)');
-    if (activeTab != null) {
-      buttonsList = activeTab.querySelectorAll('ion-buttons');
-    }
-  } else {
-    buttonsList = refEl.querySelectorAll('ion-buttons');
-  }
-
-  for (const buttons of buttonsList) {
-    const parentHeader = buttons.closest('ion-header');
-    const activeHeader = parentHeader && !parentHeader.classList.contains('header-collapse-condense-inactive');
-    const backButton = buttons.querySelector('ion-back-button');
-    const buttonsCollapse = buttons.classList.contains('buttons-collapse');
-    const startSlot = buttons.slot === 'start' || buttons.slot === '';
-
-    if (backButton !== null && startSlot && ((buttonsCollapse && activeHeader && backDirection) || !buttonsCollapse)) {
-      return backButton;
-    }
-  }
-
-  return null;
-};
-
-const createLargeTitleTransition = (
-  rootAnimation: Animation,
-  rtl: boolean,
-  backDirection: boolean,
-  enteringEl: HTMLElement,
-  leavingEl: HTMLElement | undefined,
-) => {
-  const enteringBackButton = getBackButton(enteringEl, backDirection);
-  const leavingLargeTitle = getLargeTitle(leavingEl);
-
-  const enteringLargeTitle = getLargeTitle(enteringEl);
-  const leavingBackButton = getBackButton(leavingEl, backDirection);
-
-  const shouldAnimationForward = enteringBackButton !== null && leavingLargeTitle !== null && !backDirection;
-  const shouldAnimationBackward = enteringLargeTitle !== null && leavingBackButton !== null && backDirection;
-
-  if (shouldAnimationForward) {
-    const leavingLargeTitleBox = leavingLargeTitle.getBoundingClientRect();
-    const enteringBackButtonBox = enteringBackButton.getBoundingClientRect();
-
-    const enteringBackButtonTextEl = shadow(enteringBackButton).querySelector('.button-text');
-
-    // Text element not rendered if developers pass text="" to the back button
-    const enteringBackButtonTextBox = enteringBackButtonTextEl?.getBoundingClientRect();
-
-    const leavingLargeTitleTextEl = shadow(leavingLargeTitle).querySelector('.toolbar-title')!;
-    const leavingLargeTitleTextBox = leavingLargeTitleTextEl.getBoundingClientRect();
-
-    animateLargeTitle(
-      rootAnimation,
-      rtl,
-      backDirection,
-      leavingLargeTitle,
-      leavingLargeTitleBox,
-      leavingLargeTitleTextBox,
-      enteringBackButtonBox,
-      enteringBackButtonTextEl,
-      enteringBackButtonTextBox,
-    );
-    // animateBackButton(
-    //   rootAnimation,
-    //   rtl,
-    //   backDirection,
-    //   enteringBackButton,
-    //   enteringBackButtonBox,
-    //   enteringBackButtonTextEl,
-    //   enteringBackButtonTextBox,
-    //   leavingLargeTitle,
-    //   leavingLargeTitleTextBox,
-    // );
-  } else if (shouldAnimationBackward) {
-    const enteringLargeTitleBox = enteringLargeTitle.getBoundingClientRect();
-    const leavingBackButtonBox = leavingBackButton.getBoundingClientRect();
-
-    const leavingBackButtonTextEl = shadow(leavingBackButton).querySelector('.button-text');
-
-    // Text element not rendered if developers pass text="" to the back button
-    const leavingBackButtonTextBox = leavingBackButtonTextEl?.getBoundingClientRect();
-
-    const enteringLargeTitleTextEl = shadow(enteringLargeTitle).querySelector('.toolbar-title')!;
-    const enteringLargeTitleTextBox = enteringLargeTitleTextEl.getBoundingClientRect();
-
-    animateLargeTitle(
-      rootAnimation,
-      rtl,
-      backDirection,
-      enteringLargeTitle,
-      enteringLargeTitleBox,
-      enteringLargeTitleTextBox,
-      leavingBackButtonBox,
-      leavingBackButtonTextEl,
-      leavingBackButtonTextBox,
-    );
-    // animateBackButton(
-    //   rootAnimation,
-    //   rtl,
-    //   backDirection,
-    //   leavingBackButton,
-    //   leavingBackButtonBox,
-    //   leavingBackButtonTextEl,
-    //   leavingBackButtonTextBox,
-    //   enteringLargeTitle,
-    //   enteringLargeTitleTextBox,
-    // );
-  }
-
-  return {
-    forward: shouldAnimationForward,
-    backward: shouldAnimationBackward,
-  };
-};
-
-const animateBackButton = (
-  rootAnimation: Animation,
-  rtl: boolean,
-  backDirection: boolean,
-  backButtonEl: HTMLIonBackButtonElement,
-  backButtonBox: DOMRect,
-  backButtonTextEl: HTMLElement | null,
-  backButtonTextBox: DOMRect | undefined,
-  largeTitleEl: HTMLIonTitleElement,
-  largeTitleTextBox: DOMRect,
-) => {
-  const BACK_BUTTON_START_OFFSET = rtl ? `calc(100% - ${backButtonBox.right + 4}px)` : `${backButtonBox.left - 4}px`;
-
-  const TEXT_ORIGIN_X = rtl ? 'right' : 'left';
-  const ICON_ORIGIN_X = rtl ? 'left' : 'right';
-
-  const CONTAINER_ORIGIN_X = rtl ? 'right' : 'left';
-  let WIDTH_SCALE = 1;
-  let HEIGHT_SCALE = 1;
-
-  let TEXT_START_SCALE = `scale(${HEIGHT_SCALE})`;
-  const TEXT_END_SCALE = 'scale(1)';
-
-  if (backButtonTextEl && backButtonTextBox) {
-    /**
-     * When the title and back button texts match then they should overlap during the
-     * page transition. If the texts do not match up then the back button text scale
-     * adjusts to not perfectly match the large title text otherwise the proportions
-     * will be incorrect. When the texts match we scale both the width and height to
-     * account for font weight differences between the title and back button.
-     */
-    const doTitleAndButtonTextsMatch = backButtonTextEl.textContent?.trim() === largeTitleEl.textContent?.trim();
-    WIDTH_SCALE = largeTitleTextBox.width / backButtonTextBox.width;
-    /**
-     * Subtract an offset to account for slight sizing/padding differences between the
-     * title and the back button.
-     */
-    HEIGHT_SCALE = (largeTitleTextBox.height - LARGE_TITLE_SIZE_OFFSET) / backButtonTextBox.height;
-
-    /**
-     * Even though we set TEXT_START_SCALE to HEIGHT_SCALE above, we potentially need
-     * to re-compute this here since the HEIGHT_SCALE may have changed.
-     */
-    TEXT_START_SCALE = doTitleAndButtonTextsMatch ? `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})` : `scale(${HEIGHT_SCALE})`;
-  }
-
-  const backButtonIconEl = shadow(backButtonEl).querySelector('ion-icon')!;
-  const backButtonIconBox = backButtonIconEl.getBoundingClientRect();
-
-  /**
-   * We need to offset the container by the icon dimensions
-   * so that the back button text aligns with the large title
-   * text. Otherwise, the back button icon will align with the
-   * large title text but the back button text will not.
-   */
-  const CONTAINER_START_TRANSLATE_X = rtl
-    ? `${backButtonIconBox.width / 2 - (backButtonIconBox.right - backButtonBox.right)}px`
-    : `${backButtonBox.left - backButtonIconBox.width / 2}px`;
-  const CONTAINER_END_TRANSLATE_X = rtl ? `-${window.innerWidth - backButtonBox.right}px` : `${backButtonBox.left}px`;
-
-  /**
-   * Back button container should be
-   * aligned to the top of the title container
-   * so the texts overlap as the back button
-   * text begins to fade in.
-   */
-  const CONTAINER_START_TRANSLATE_Y = `${largeTitleTextBox.top}px`;
-
-  /**
-   * The cloned back button should align exactly with the
-   * real back button on the entering page otherwise there will
-   * be a layout shift.
-   */
-  const CONTAINER_END_TRANSLATE_Y = `${backButtonBox.top}px`;
-
-  /**
-   * In the forward direction, the cloned back button
-   * container should translate from over the large title
-   * to over the back button. In the backward direction,
-   * it should translate from over the back button to over
-   * the large title.
-   */
-  const FORWARD_CONTAINER_KEYFRAMES = [
-    { offset: 0, transform: `translate3d(${CONTAINER_START_TRANSLATE_X}, ${CONTAINER_START_TRANSLATE_Y}, 0)` },
-    { offset: 1, transform: `translate3d(${CONTAINER_END_TRANSLATE_X}, ${CONTAINER_END_TRANSLATE_Y}, 0)` },
-  ];
-  const BACKWARD_CONTAINER_KEYFRAMES = [
-    { offset: 0, transform: `translate3d(${CONTAINER_END_TRANSLATE_X}, ${CONTAINER_END_TRANSLATE_Y}, 0)` },
-    { offset: 1, transform: `translate3d(${CONTAINER_START_TRANSLATE_X}, ${CONTAINER_START_TRANSLATE_Y}, 0)` },
-  ];
-  const CONTAINER_KEYFRAMES = backDirection ? BACKWARD_CONTAINER_KEYFRAMES : FORWARD_CONTAINER_KEYFRAMES;
-
-  /**
-   * In the forward direction, the text in the cloned back button
-   * should start to be (roughly) the size of the large title
-   * and then scale down to be the size of the actual back button.
-   * The text should also translate, but that translate is handled
-   * by the container keyframes.
-   */
-  const FORWARD_TEXT_KEYFRAMES = [
-    { offset: 0, opacity: 0, transform: TEXT_START_SCALE },
-    { offset: 1, opacity: 1, transform: TEXT_END_SCALE },
-  ];
-  const BACKWARD_TEXT_KEYFRAMES = [
-    { offset: 0, opacity: 1, transform: TEXT_END_SCALE },
-    { offset: 1, opacity: 0, transform: TEXT_START_SCALE },
-  ];
-  const TEXT_KEYFRAMES = backDirection ? BACKWARD_TEXT_KEYFRAMES : FORWARD_TEXT_KEYFRAMES;
-
-  /**
-   * The icon should scale in/out in the second
-   * half of the animation. The icon should also
-   * translate, but that translate is handled by the
-   * container keyframes.
-   */
-  const FORWARD_ICON_KEYFRAMES = [
-    { offset: 0, opacity: 0, transform: 'scale(0.6)' },
-    { offset: 0.6, opacity: 0, transform: 'scale(0.6)' },
-    { offset: 1, opacity: 1, transform: 'scale(1)' },
-  ];
-  const BACKWARD_ICON_KEYFRAMES = [
-    { offset: 0, opacity: 1, transform: 'scale(1)' },
-    { offset: 0.2, opacity: 0, transform: 'scale(0.6)' },
-    { offset: 1, opacity: 0, transform: 'scale(0.6)' },
-  ];
-  const ICON_KEYFRAMES = backDirection ? BACKWARD_ICON_KEYFRAMES : FORWARD_ICON_KEYFRAMES;
-
-  const enteringBackButtonTextAnimation = createAnimation();
-  const enteringBackButtonIconAnimation = createAnimation();
-  const enteringBackButtonAnimation = createAnimation();
-
-  const clonedBackButtonEl = getClonedElement<HTMLIonBackButtonElement>('ion-back-button')!;
-
-  const clonedBackButtonTextEl = shadow(clonedBackButtonEl).querySelector('.button-text')!;
-  const clonedBackButtonIconEl = shadow(clonedBackButtonEl).querySelector('ion-icon')!;
-
-  clonedBackButtonEl.text = backButtonEl.text;
-  clonedBackButtonEl.mode = backButtonEl.mode;
-  clonedBackButtonEl.icon = backButtonEl.icon;
-  clonedBackButtonEl.color = backButtonEl.color;
-  clonedBackButtonEl.disabled = backButtonEl.disabled;
-
-  clonedBackButtonEl.style.setProperty('display', 'block');
-  clonedBackButtonEl.style.setProperty('position', 'fixed');
-
-  enteringBackButtonIconAnimation.addElement(clonedBackButtonIconEl);
-  enteringBackButtonTextAnimation.addElement(clonedBackButtonTextEl);
-  enteringBackButtonAnimation.addElement(clonedBackButtonEl);
-
-  enteringBackButtonAnimation
-    .beforeStyles({
-      position: 'absolute',
-      top: '0px',
-      [CONTAINER_ORIGIN_X]: '0px',
-    })
-    /**
-     * The write hooks must be set on this animation as it is guaranteed to run. Other
-     * animations such as the back button text animation will not run if the back button
-     * has no visible text.
-     */
-    .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(CONTAINER_KEYFRAMES);
-
-  enteringBackButtonTextAnimation
-    .beforeStyles({
-      'transform-origin': `${TEXT_ORIGIN_X} top`,
-    })
-    .keyframes(TEXT_KEYFRAMES);
-
-  enteringBackButtonIconAnimation
-    .beforeStyles({
-      'transform-origin': `${ICON_ORIGIN_X} center`,
-    })
-    .keyframes(ICON_KEYFRAMES);
-
-  rootAnimation.addAnimation([enteringBackButtonTextAnimation, enteringBackButtonIconAnimation, enteringBackButtonAnimation]);
-};
-
-const animateLargeTitle = (
-  rootAnimation: Animation,
-  rtl: boolean,
-  backDirection: boolean,
-  largeTitleEl: HTMLIonTitleElement,
-  largeTitleBox: DOMRect,
-  largeTitleTextBox: DOMRect,
-  backButtonBox: DOMRect,
-  backButtonTextEl: HTMLElement | null,
-  backButtonTextBox: DOMRect | undefined,
-) => {
-  /**
-   * The horizontal transform origin for the large title
-   */
-  const ORIGIN_X = rtl ? 'right' : 'left';
-
-  const TITLE_START_OFFSET = rtl ? `calc(100% - ${largeTitleBox.right}px)` : `${largeTitleBox.left}px`;
-
-  /**
-   * The cloned large should align exactly with the
-   * real large title on the leaving page otherwise there will
-   * be a layout shift.
-   */
-  const START_TRANSLATE_X = '0px';
-  const START_TRANSLATE_Y = `${largeTitleBox.top}px`;
-
-  /**
-   * How much to offset the large title translation by.
-   * This accounts for differences in sizing between the large
-   * title and the back button due to padding and font weight.
-   */
-  const LARGE_TITLE_TRANSLATION_OFFSET = 8;
-  let END_TRANSLATE_X = rtl
-    ? `-${window.innerWidth - backButtonBox.right - LARGE_TITLE_TRANSLATION_OFFSET}px`
-    : `${backButtonBox.x + LARGE_TITLE_TRANSLATION_OFFSET}px`;
-
-  /**
-   * How much to scale the large title up/down by.
-   */
-  let HEIGHT_SCALE = 0.5;
-
-  /**
-   * The large title always starts full size.
-   */
-  const START_SCALE = 'scale(1)';
-
-  /**
-   * By default, we don't worry about having the large title scaled to perfectly
-   * match the back button because we don't know if the back button's text matches
-   * the large title's text.
-   */
-  let END_SCALE = `scale(${HEIGHT_SCALE})`;
-
-  // Text element not rendered if developers pass text="" to the back button
-  if (backButtonTextEl && backButtonTextBox) {
-    /**
-     * The scaled title should (roughly) overlap the back button. This ensures that
-     * the back button and title overlap during the animation. Note that since both
-     * elements either fade in or fade out over the course of the animation, neither
-     * element will be fully visible on top of the other. As a result, the overlap
-     * does not need to be perfect, so approximate values are acceptable here.
-     */
-    END_TRANSLATE_X = rtl
-      ? `-${window.innerWidth - backButtonTextBox.right - LARGE_TITLE_TRANSLATION_OFFSET}px`
-      : `${backButtonTextBox.x - LARGE_TITLE_TRANSLATION_OFFSET}px`;
-
-    /**
-     * In the forward direction, the large title should start at its normal size and
-     * then scale down to be (roughly) the size of the back button on the other view.
-     * In the backward direction, the large title should start at (roughly) the size
-     * of the back button and then scale up to its original size.
-     * Note that since both elements either fade in or fade out over the course of the
-     * animation, neither element will be fully visible on top of the other. As a result,
-     * the overlap  does not need to be perfect, so approximate values are acceptable here.
-     */
-
-    /**
-     * When the title and back button texts match then they should overlap during the
-     * page transition. If the texts do not match up then the large title text scale
-     * adjusts to not perfectly match the back button text otherwise the proportions
-     * will be incorrect. When the texts match we scale both the width and height to
-     * account for font weight differences between the title and back button.
-     */
-    const doTitleAndButtonTextsMatch = backButtonTextEl.textContent?.trim() === largeTitleEl.textContent?.trim();
-
-    const WIDTH_SCALE = backButtonTextBox.width / largeTitleTextBox.width;
-    HEIGHT_SCALE = backButtonTextBox.height / (largeTitleTextBox.height - LARGE_TITLE_SIZE_OFFSET);
-
-    /**
-     * Even though we set TEXT_START_SCALE to HEIGHT_SCALE above, we potentially need
-     * to re-compute this here since the HEIGHT_SCALE may have changed.
-     */
-    END_SCALE = doTitleAndButtonTextsMatch ? `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})` : `scale(${HEIGHT_SCALE})`;
-  }
-
-  /**
-   * The midpoints of the back button and the title should align such that the back
-   * button and title appear to be centered with each other.
-   */
-  const backButtonMidPoint = backButtonBox.top + backButtonBox.height / 2;
-  const titleMidPoint = (largeTitleBox.height * HEIGHT_SCALE) / 2;
-  const END_TRANSLATE_Y = `${backButtonMidPoint - titleMidPoint}px`;
-
-  const BACKWARDS_KEYFRAMES = [
-    { offset: 0, opacity: 0, transform: `translate3d(${END_TRANSLATE_X}, ${END_TRANSLATE_Y}, 0) ${END_SCALE}` },
-    { offset: 0.1, opacity: 0 },
-    { offset: 1, opacity: 1, transform: `translate3d(${START_TRANSLATE_X}, ${START_TRANSLATE_Y}, 0) ${START_SCALE}` },
-  ];
-  const FORWARDS_KEYFRAMES = [
-    {
-      offset: 0,
-      opacity: 0.99,
-      transform: `translate3d(${START_TRANSLATE_X}, ${START_TRANSLATE_Y}, 0) ${START_SCALE}`,
-    },
-    { offset: 0.6, opacity: 0 },
-    { offset: 1, opacity: 0, transform: `translate3d(${END_TRANSLATE_X}, ${END_TRANSLATE_Y}, 0) ${END_SCALE}` },
-  ];
-
-  const KEYFRAMES = backDirection ? BACKWARDS_KEYFRAMES : FORWARDS_KEYFRAMES;
-
-  const clonedTitleEl = getClonedElement<HTMLIonTitleElement>('ion-title')!;
-  const clonedLargeTitleAnimation = createAnimation();
-
-  clonedTitleEl.innerText = largeTitleEl.innerText;
-  clonedTitleEl.size = largeTitleEl.size;
-  clonedTitleEl.color = largeTitleEl.color;
-
-  clonedLargeTitleAnimation.addElement(clonedTitleEl);
-
-  clonedLargeTitleAnimation
-    .beforeStyles({
-      'transform-origin': `${ORIGIN_X} top`,
-
-      /**
-       * Since font size changes will cause
-       * the dimension of the large title to change
-       * we need to set the cloned title height
-       * equal to that of the original large title height.
-       */
-      height: `${largeTitleBox.height}px`,
-      display: '',
-      position: 'relative',
-      [ORIGIN_X]: TITLE_START_OFFSET,
-    })
-    .beforeAddWrite(() => {
-      largeTitleEl.style.setProperty('opacity', '0');
-    })
-    .afterAddWrite(() => {
-      largeTitleEl.style.setProperty('opacity', '');
-      clonedTitleEl.style.setProperty('display', 'none');
-    })
-    .keyframes(KEYFRAMES);
-
-  rootAnimation.addAnimation(clonedLargeTitleAnimation);
-};
-
 export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptions): Animation => {
   try {
     const EASING = 'cubic-bezier(0.32,0.72,0,1)';
@@ -958,14 +482,3 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio
     throw err;
   }
 };
-
-/**
- * The scale of the back button during the animation
- * is computed based on the scale of the large title
- * and vice versa. However, we need to account for slight
- * variations in the size of the large title due to
- * padding and font weight. This value should be used to subtract
- * a small amount from the large title height when computing scales
- * to get more accurate scale results.
- */
-const LARGE_TITLE_SIZE_OFFSET = 10;