@rdlabo/ionic-theme-ios26 1.1.1 → 1.2.1

package/src/tab-bar-searchable/animations/enter.ts

@@ -0,0 +1,92 @@
+import { ElementReferences, ElementSizes } from '../interfaces';
+import { Animation, createAnimation } from '@ionic/core';
+import { cloneElement } from '../../utils';
+import { ANIMATION_DELAY_CLOSE_BUTTONS, OPACITY_TRANSITION } from '../utils';
+
+export const createEffectAnimation = (references: ElementReferences, sizes: ElementSizes): Animation => {
+  const effectElement = cloneElement('ion-icon');
+  const closeButtonRect = references.closeButtonIcon?.getBoundingClientRect();
+  const iconName = references.selectedTabButtonIcon?.getAttribute('name');
+  const selectedTabButtonIconRect = references.selectedTabButtonIcon?.getBoundingClientRect();
+
+  return createAnimation()
+    .addElement(effectElement)
+    .beforeAddWrite(() => {
+      effectElement.style.display = 'inline-block';
+      references.closeButtonIcon.style.opacity = '0';
+      if (iconName && closeButtonRect) {
+        effectElement.setAttribute('name', iconName);
+        effectElement.style.width = `${closeButtonRect.width}px`;
+        effectElement.style.height = `${closeButtonRect.height}px`;
+      }
+    })
+    .afterAddWrite(() => {
+      effectElement.style.display = 'none';
+      references.closeButtonIcon.style.opacity = '1';
+    })
+    .fromTo(
+      'transform',
+      `translate3d(${selectedTabButtonIconRect.left}px, ${selectedTabButtonIconRect.top}px, 0)`,
+      `translate3d(${closeButtonRect.left}px, ${closeButtonRect.top}px, 0)`,
+    );
+};
+
+export const createSearchContainerAnimation = (references: ElementReferences, sizes: ElementSizes): Animation => {
+  return createAnimation()
+    .addElement(references.searchContainer)
+    .beforeAddWrite(() => (references.searchContainer.style.transformOrigin = 'right center'))
+    .fromTo(
+      'transform',
+      `scale(${sizes.fabButton.width / sizes.searchContainer.width}, ${sizes.fabButton.height / sizes.searchContainer.height})`,
+      'scale(1)',
+    )
+    .fromTo('opacity', '0.2', '1');
+};
+
+export const createCloseButtonsAnimation = (references: ElementReferences): Animation => {
+  return createAnimation()
+    .delay(ANIMATION_DELAY_CLOSE_BUTTONS)
+    .addElement(references.closeButtons)
+    .beforeAddWrite(() => (references.closeButtons.style.transformOrigin = 'left center'))
+    .afterClearStyles(['transform', 'transform-origin'])
+    .fromTo('transform', 'scale(1.5, 1)', 'scale(1)');
+};
+
+export const createTabBarAnimation = (ionTabBar: HTMLElement, references: ElementReferences, sizes: ElementSizes): Animation => {
+  return createAnimation()
+    .addElement(ionTabBar)
+    .beforeAddWrite(() => {
+      ionTabBar.querySelectorAll<HTMLElement>('ion-tab-button').forEach((element: HTMLElement) => {
+        element.style.transition = OPACITY_TRANSITION;
+        element.style.opacity = '0';
+      });
+      references.selectedTabButton.classList.remove('tab-selected');
+      const iconName = references.selectedTabButtonIcon?.getAttribute('name');
+      if (iconName) {
+        references.closeButtonIcon?.setAttribute('name', iconName);
+      }
+    })
+    .afterAddWrite(() => {
+      references.selectedTabButton.classList.add('tab-selected');
+      ionTabBar.style.pointerEvents = 'none';
+    })
+    .fromTo(
+      'transform',
+      'scale(1)',
+      `scale(${sizes.closeButton.width / sizes.tabBar.width}, ${sizes.closeButton.height / sizes.tabBar.height})`,
+    )
+    .fromTo('opacity', '1', '0');
+};
+
+export const createFabButtonAnimation = (ionFabButton: HTMLElement): Animation => {
+  return createAnimation()
+    .addElement(ionFabButton)
+    .beforeAddWrite(() => {
+      ionFabButton.style.transformOrigin = 'center right';
+      ionFabButton.querySelector<HTMLElement>('ion-icon')?.style.setProperty('opacity', '0');
+    })
+    .afterAddWrite(() => {
+      ionFabButton.style.pointerEvents = 'none';
+    })
+    .fromTo('opacity', '1', '0');
+};

package/src/tab-bar-searchable/animations/leave.ts

@@ -0,0 +1,89 @@
+import { ElementReferences, ElementSizes } from '../interfaces';
+import { Animation, createAnimation } from '@ionic/core';
+import { cloneElement } from '../../utils';
+import { ANIMATION_DELAY_CLOSE_BUTTONS, OPACITY_TRANSITION } from '../utils';
+
+export const createReverseEffectAnimation = (
+  references: ElementReferences,
+  searchableElementSizes: ElementSizes,
+  colorSelected: string,
+): Animation => {
+  const effectElement = cloneElement('ion-icon');
+  const closeButtonRect = references.closeButtonIcon?.getBoundingClientRect();
+
+  return createAnimation()
+    .addElement(effectElement)
+    .beforeAddWrite(() => {
+      effectElement.style.display = 'inline-block';
+      references.closeButtonIcon.style.opacity = '0';
+      if (searchableElementSizes.selectedTabButtonIcon) {
+        effectElement.style.width = `${searchableElementSizes.selectedTabButtonIcon.width}px`;
+        effectElement.style.height = `${searchableElementSizes.selectedTabButtonIcon.height}px`;
+        effectElement.style.color = colorSelected;
+      }
+    })
+    .afterAddWrite(() => {
+      effectElement.style.display = 'none';
+      references.closeButtonIcon.style.opacity = '1';
+      effectElement.style.color = '';
+    })
+    .fromTo(
+      'transform',
+      `translate3d(${closeButtonRect.left}px, ${closeButtonRect.top}px, 0)`,
+      `translate3d(${searchableElementSizes.selectedTabButtonIcon.left}px, ${searchableElementSizes.selectedTabButtonIcon.top}px, 0)`,
+    );
+};
+
+export const createReverseSearchContainerAnimation = (references: ElementReferences, sizes: ElementSizes): Animation => {
+  return createAnimation()
+    .addElement(references.searchContainer)
+    .beforeAddWrite(() => (references.searchContainer.style.transformOrigin = 'right center'))
+    .fromTo(
+      'transform',
+      'scale(1)',
+      `scale(${sizes.fabButton.width / sizes.searchContainer.width}, ${sizes.fabButton.height / sizes.searchContainer.height})`,
+    )
+    .fromTo('opacity', '1', '0.2');
+};
+
+export const createReverseCloseButtonsAnimation = (references: ElementReferences): Animation => {
+  return createAnimation()
+    .delay(ANIMATION_DELAY_CLOSE_BUTTONS)
+    .addElement(references.closeButtons)
+    .beforeAddWrite(() => (references.closeButtons.style.transformOrigin = 'left center'))
+    .afterClearStyles(['transform', 'transform-origin'])
+    .fromTo('transform', 'scale(1)', 'scale(1.5, 1)');
+};
+
+export const createReverseTabBarAnimation = (ionTabBar: HTMLElement, references: ElementReferences, sizes: ElementSizes): Animation => {
+  return createAnimation()
+    .addElement(ionTabBar)
+    .beforeAddWrite(() => {
+      ionTabBar.style.pointerEvents = 'auto';
+      ionTabBar.querySelectorAll<HTMLElement>('ion-tab-button').forEach((element: HTMLElement) => {
+        element.style.transition = OPACITY_TRANSITION;
+        element.style.opacity = '1';
+      });
+    })
+    .afterClearStyles(['transform', 'opacity'])
+    .fromTo(
+      'transform',
+      `scale(${sizes.closeButton.width / sizes.tabBar.width}, ${sizes.closeButton.height / sizes.tabBar.height})`,
+      'scale(1)',
+    )
+    .fromTo('opacity', '0', '1');
+};
+
+export const createReverseFabButtonAnimation = (ionFabButton: HTMLElement, references: ElementSizes): Animation => {
+  return createAnimation()
+    .addElement(ionFabButton)
+    .beforeAddWrite(() => {
+      ionFabButton.querySelector<HTMLElement>('ion-icon')?.style.setProperty('opacity', '1');
+      ionFabButton.style.transformOrigin = 'center right';
+    })
+    .afterAddWrite(() => {
+      ionFabButton.style.pointerEvents = 'auto';
+    })
+    .fromTo('opacity', '0', '1')
+    .fromTo('transform', `scale(${references.searchContainer.height / references.fabButton.height})`, 'scale(1)');
+};

package/src/tab-bar-searchable/index.ts

@@ -0,0 +1,141 @@
+import { createAnimation } from '@ionic/core';
+import {
+  ANIMATION_DELAY_BASE,
+  ANIMATION_DURATION,
+  ANIMATION_EASING,
+  getElementReferences,
+  getElementSizes,
+  throwErrorByFailedClickElement,
+} from './utils';
+import { SearchableEventCache, TabBarSearchableFunction, TabBarSearchableType } from './interfaces';
+import {
+  createCloseButtonsAnimation,
+  createEffectAnimation,
+  createFabButtonAnimation,
+  createSearchContainerAnimation,
+  createTabBarAnimation,
+} from './animations/enter';
+import {
+  createReverseCloseButtonsAnimation,
+  createReverseEffectAnimation,
+  createReverseFabButtonAnimation,
+  createReverseSearchContainerAnimation,
+  createReverseTabBarAnimation,
+} from './animations/leave';
+
+export * from './interfaces';
+
+/**
+ *  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+ *   <ion-fab-button (click)="present($event)">
+ *     <ion-icon name="search"></ion-icon>
+ *   </ion-fab-button>
+ *  </ion-fab>
+ *  <ion-footer [translucent]="true">
+ *   <ion-toolbar>
+ *     <ion-buttons slot="start">
+ *     <!-- ion-icon does not need `name` attribute. -->
+ *       <ion-button fill="default"><ion-icon slot="icon-only"></ion-icon>
+ *     </ion-button>
+ *     </ion-buttons>
+ *     <!-- User set `ionChange` or other events. -->
+ *     <ion-searchbar (ionChange)="example($event)"></ion-searchbar>
+ *   </ion-toolbar>
+ *  </ion-footer>
+ **/
+
+export const attachTabBarSearchable = (
+  ionTabBar: HTMLElement,
+  ionFabButton: HTMLElement,
+  ionFooter: HTMLElement,
+): TabBarSearchableFunction => {
+  if (!ionTabBar || !ionFabButton || !ionFooter) {
+    throw new Error('TabBarSearchable should be defined with props');
+  }
+  // Initialize
+  ionFooter.style.pointerEvents = 'none';
+  ionFooter.style.opacity = '0';
+  ionTabBar.style.transformOrigin = 'left center';
+
+  // Saved Params
+  let searchableEventCache: SearchableEventCache | undefined;
+
+  return async (event: Event, type: TabBarSearchableType) => {
+    if (type === TabBarSearchableType.Enter) {
+      searchableEventCache = await enterEvent(event, ionTabBar, ionFabButton, ionFooter);
+    } else if (searchableEventCache !== undefined) {
+      await leaveEvent(event, searchableEventCache, ionTabBar, ionFabButton, ionFooter);
+      searchableEventCache = undefined;
+    } else {
+      throw new Error('TabBarSearchableType.Leave should be run after TabBarSearchableType.Enter');
+    }
+  };
+};
+
+const enterEvent = async (
+  event: Event,
+  ionTabBar: HTMLElement,
+  ionFabButton: HTMLElement,
+  ionFooter: HTMLElement,
+): Promise<SearchableEventCache> => {
+  if (!(event.target as HTMLElement)?.closest('ion-fab-button')) {
+    throw throwErrorByFailedClickElement('ion-fab-button');
+  }
+
+  const references = getElementReferences(ionTabBar, ionFooter);
+  const sizes = getElementSizes(ionTabBar, ionFabButton, references);
+  const colorSelected = references.selectedTabButton
+    ? getComputedStyle(references.selectedTabButton).getPropertyValue('--color-selected').trim()
+    : '';
+
+  const effectAnimation = createEffectAnimation(references, sizes);
+  const searchContainerAnimation = createSearchContainerAnimation(references, sizes);
+  const closeButtonsAnimation = createCloseButtonsAnimation(references);
+  const tabBarAnimation = createTabBarAnimation(ionTabBar, references, sizes);
+  const fabButtonAnimation = createFabButtonAnimation(ionFabButton);
+
+  await createAnimation()
+    .delay(ANIMATION_DELAY_BASE)
+    .duration(ANIMATION_DURATION)
+    .easing(ANIMATION_EASING)
+    .addElement(ionFooter)
+    .afterAddWrite(() => (ionFooter.style.pointerEvents = 'auto'))
+    .fromTo('opacity', '0.8', '1')
+    .addAnimation([tabBarAnimation, fabButtonAnimation, searchContainerAnimation, effectAnimation, closeButtonsAnimation])
+    .play();
+
+  return {
+    elementSizes: sizes,
+    colorSelected,
+  };
+};
+
+const leaveEvent = async (
+  event: Event,
+  searchableEventCache: SearchableEventCache,
+  ionTabBar: HTMLElement,
+  ionFabButton: HTMLElement,
+  ionFooter: HTMLElement,
+): Promise<void> => {
+  if (!(event.target as HTMLElement)?.closest('ion-buttons[slot=start] ion-button')) {
+    throw throwErrorByFailedClickElement('ion-buttons[slot=start] ion-button');
+  }
+
+  const references = getElementReferences(ionTabBar, ionFooter);
+
+  const effectAnimation = createReverseEffectAnimation(references, searchableEventCache.elementSizes, searchableEventCache.colorSelected);
+  const searchContainerAnimation = createReverseSearchContainerAnimation(references, searchableEventCache.elementSizes);
+  const closeButtonsAnimation = createReverseCloseButtonsAnimation(references);
+  const tabBarAnimation = createReverseTabBarAnimation(ionTabBar, references, searchableEventCache.elementSizes);
+  const fabButtonAnimation = createReverseFabButtonAnimation(ionFabButton, searchableEventCache.elementSizes);
+
+  await createAnimation()
+    .delay(ANIMATION_DELAY_BASE)
+    .duration(ANIMATION_DURATION)
+    .easing(ANIMATION_EASING)
+    .addElement(ionFooter)
+    .afterAddWrite(() => (ionFooter.style.pointerEvents = 'none'))
+    .fromTo('opacity', '1', '0')
+    .addAnimation([tabBarAnimation, fabButtonAnimation, searchContainerAnimation, effectAnimation, closeButtonsAnimation])
+    .play();
+};

package/src/tab-bar-searchable/interfaces.ts

@@ -0,0 +1,28 @@
+export enum TabBarSearchableType {
+  Enter = 'enter',
+  Leave = 'leave',
+}
+
+export type TabBarSearchableFunction = (event: Event, type: TabBarSearchableType) => Promise<void>;
+
+export interface SearchableEventCache {
+  elementSizes: ElementSizes;
+  colorSelected: string;
+}
+
+// DOM要素とサイズ情報の型定義
+export interface ElementSizes {
+  tabBar: { width: number; height: number };
+  closeButton: { width: number; height: number };
+  fabButton: { width: number; height: number };
+  searchContainer: { width: number; height: number };
+  selectedTabButtonIcon: { width: number; height: number; top: number; left: number };
+}
+
+export interface ElementReferences {
+  searchContainer: HTMLElement;
+  closeButtons: HTMLElement;
+  selectedTabButton: HTMLElement;
+  selectedTabButtonIcon: HTMLElement;
+  closeButtonIcon: HTMLElement;
+}

package/src/tab-bar-searchable/utils.ts

@@ -0,0 +1,75 @@
+import { ElementReferences, ElementSizes } from './interfaces';
+
+export const ANIMATION_DURATION = 400;
+export const ANIMATION_DELAY_BASE = 140;
+export const ANIMATION_DELAY_CLOSE_BUTTONS = 240;
+export const ANIMATION_EASING = 'cubic-bezier(0, 1, 0.22, 1)';
+export const OPACITY_TRANSITION = 'opacity 140ms ease';
+
+export const throwErrorByFailedClickElement = (selector: string): Error => {
+  return new Error('Expected click element to be inside `' + selector + '`');
+};
+
+export const throwErrorByFailedExistElement = (selector: string): Error => {
+  return new Error('Expected element `' + selector + '` to exist');
+};
+
+export const getElement = (docs: HTMLElement, selector: string): HTMLElement => {
+  const el = docs.querySelector<HTMLElement>(selector);
+  if (!el) {
+    throw throwErrorByFailedClickElement(selector);
+  }
+  return el;
+};
+
+export const getElementReferences = (ionTabBar: HTMLElement, ionFooter: HTMLElement): ElementReferences => {
+  const searchContainer = getElement(ionFooter, 'ion-searchbar .searchbar-input-container');
+  const closeButtons = getElement(ionFooter, 'ion-buttons[slot=start]');
+  const selectedTabButton = ionTabBar.querySelector<HTMLElement>('ion-tab-button.tab-selected');
+  const selectedTabButtonIcon = selectedTabButton?.querySelector('ion-icon');
+  const closeButtonIcon = closeButtons.querySelector('ion-icon');
+
+  if (!selectedTabButton) {
+    throw throwErrorByFailedExistElement('ion-tab-button.tab-selected');
+  }
+
+  if (!selectedTabButtonIcon) {
+    throw throwErrorByFailedExistElement('ion-tab-button.tab-selected ion-icon');
+  }
+
+  if (!closeButtonIcon) {
+    throw throwErrorByFailedExistElement('ion-buttons[slot=start] ion-button ion-icon');
+  }
+
+  return {
+    searchContainer,
+    closeButtons,
+    selectedTabButton,
+    selectedTabButtonIcon,
+    closeButtonIcon,
+  };
+};
+
+/**
+ * 各要素のサイズ情報を取得
+ */
+export const getElementSizes = (ionTabBar: HTMLElement, ionFabButton: HTMLElement, references: ElementReferences): ElementSizes => {
+  const tabBarRect = ionTabBar.getBoundingClientRect();
+  const fabButtonRect = ionFabButton.getBoundingClientRect();
+  const closeButtonRect = references.closeButtons.getBoundingClientRect();
+  const searchContainerRect = references.searchContainer.getBoundingClientRect();
+  const selectedTabButtonIconRect = references.selectedTabButtonIcon!.getBoundingClientRect();
+
+  return {
+    tabBar: { width: tabBarRect.width, height: tabBarRect.height },
+    closeButton: { width: closeButtonRect.width, height: closeButtonRect.height },
+    fabButton: { width: fabButtonRect.width, height: fabButtonRect.height },
+    searchContainer: { width: searchContainerRect.width, height: searchContainerRect.height },
+    selectedTabButtonIcon: {
+      width: selectedTabButtonIconRect.width,
+      height: selectedTabButtonIconRect.height,
+      top: selectedTabButtonIconRect.top,
+      left: selectedTabButtonIconRect.left,
+    },
+  };
+};