@rdlabo/ionic-theme-ios26 0.3.2 → 0.3.4

package/src/components/ion-segment.scss

@@ -1,52 +1,63 @@
 @use '../utils/api';
 
-ion-toolbar.ios:not(.ios26-disabled) {
-  ion-segment {
-    @include api.glass-background;
-    min-height: 48px;
-    border-radius: 25px;
-
-    transition: transform var(--ios26-activated-transition-duration) ease-out;
-    will-change: transform;
-
-    &.in-toolbar-color:not(.in-segment-color) {
-      ion-segment-button:not(.segment-button-checked)::part(native) {
-        color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1) !important;
-      }
+ion-segment.ios:not(.ios26-disabled) {
+  @include api.glass-background;
+  min-height: 48px;
+  border-radius: 25px;
+
+  &.segment-expand {
+    min-height: 24px;
+    width: calc(100% - var(--ion-safe-area-left, 0) - var(--ion-safe-area-left, 0) - 24px);
+
+    &.segment-activated {
+      transform: scale(1);
     }
 
     ion-segment-button {
-      --border-width: 0;
-      --ion-color-base: var(--ion-text-color, #000);
-      --padding-start: 8px;
-      --padding-end: 8px;
-      min-width: 60px;
-      margin: 3px 2px;
-      font-size: 14.5px;
+      min-height: 24px;
+    }
+  }
 
-      &::part(indicator-background) {
-        border-radius: 25px;
-        box-shadow: none;
-        transition: background 0.2s ease;
-        background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.06);
-      }
+  transition: transform var(--ios26-activated-transition-duration) ease-out;
+  will-change: transform;
+
+  &.in-toolbar-color:not(.in-segment-color) {
+    ion-segment-button:not(.segment-button-checked)::part(native) {
+      color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 1) !important;
     }
+  }
 
-    &.segment-activated {
-      transform: scale(1.1);
-
-      ion-segment-button {
-        transition: transform 100ms ease-out;
-        &.segment-button-checked::part(native) {
-          transform: scale(1.08);
-        }
-        &::part(indicator-background) {
-          position: relative;
-          z-index: 1;
-          background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0);
-          transform: scale(1.1);
-          transform-origin: center center;
-        }
+  ion-segment-button {
+    --border-width: 0;
+    --ion-color-base: var(--ion-text-color, #000);
+    --padding-start: 8px;
+    --padding-end: 8px;
+    min-width: 60px;
+    margin: 3px 2px;
+    font-size: 14.5px;
+
+    &::part(indicator-background) {
+      border-radius: 25px;
+      box-shadow: none;
+      transition: background 0.2s ease;
+      background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.06);
+    }
+  }
+
+  &.segment-activated {
+    transform: scale(1.1);
+
+    ion-segment-button {
+      transition: transform 100ms ease-out;
+      &.segment-button-checked::part(native) {
+        transform: scale(1.08);
+      }
+      &::part(indicator-background) {
+        position: relative;
+        z-index: 1;
+        background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0);
+        transform: scale(1.1);
+        transform-origin: center center;
       }
     }
   }

package/src/components/ion-tabs.scss

@@ -43,44 +43,75 @@ ion-tab-bar.ios:not(.ios26-disabled) {
     }
   }
 
-  ion-tab-button {
-    ion-icon {
-      font-size: 26px;
+  /**
+   * effectが有効な場合、effectでスタイリングするため不要
+   */
+  &.tab-bar-ios26-effect:has(ion-tab-button.ion-activated) {
+    ion-tab-button.tab-selected::part(native) {
+      background: rgba(var(--ios26-button-color-selected-rgb), 0);
+    }
+    ion-tab-button.ion-activated {
+      ion-label,
+      ion-icon {
+        filter: brightness(100%);
+      }
     }
+  }
+}
+
+ion-tab-button.ios:not(.ios26-disabled) {
+  ion-icon {
+    font-size: 26px;
+  }
+  ion-label,
+  ion-icon {
+    transition:
+      filter var(--ios26-activated-transition-duration) ease,
+      color var(--ios26-activated-transition-duration) ease;
+  }
+  background: rgba(var(--ios26-glass-background-rgb), 0);
+  height: auto;
+  transition: transform var(--ios26-activated-transition-duration) ease;
+  &::part(native) {
+    overflow: visible;
+    min-height: 56px;
+    border-radius: 32px;
+  }
+
+  &.ion-activated {
+    transform: scale(1.1);
+    position: relative;
+    color: var(--color-selected);
     ion-label,
     ion-icon {
-      transition:
-        filter var(--ios26-activated-transition-duration) ease,
-        color var(--ios26-activated-transition-duration) ease;
+      filter: brightness(104%);
     }
-    background: rgba(var(--ios26-glass-background-rgb), 0);
-    height: auto;
-    transition: transform var(--ios26-activated-transition-duration) ease;
+  }
+
+  &.tab-selected {
     &::part(native) {
-      overflow: visible;
-      min-height: 56px;
-      border-radius: 32px;
+      background: rgba(var(--ios26-button-color-selected-rgb), 0.095);
+      transition: background var(--ios26-activated-transition-duration) ease;
     }
 
-    &.ion-activated {
-      transform: scale(1.1);
-      position: relative;
-      color: var(--color-selected);
-      ion-label,
-      ion-icon {
-        filter: brightness(104%);
-      }
+    &.ion-activated::part(native) {
+      background: rgba(var(--ios26-glass-box-shadow-color-rgb), 0.02);
     }
+  }
 
-    &.tab-selected {
-      &::part(native) {
-        background: rgba(var(--ios26-button-color-selected-rgb), 0.095);
-        transition: background var(--ios26-activated-transition-duration) ease;
-      }
-
-      &.ion-activated::part(native) {
-        background: rgba(var(--ios26-glass-box-shadow-color-rgb), 0.02);
-      }
+  &.ion-cloned-element {
+    &::part(native) {
+      @include api.glass-background(1, 2px, 104%);
+      background: transparent;
+    }
+    color: var(--color-selected, var(--ion-color-primary, #0054e9));
+    pointer-events: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    transform-origin: center;
+    & > * {
+      visibility: hidden;
     }
   }
 }

package/src/components/ion-toolbar.scss

@@ -21,7 +21,7 @@ ion-header.ios.header-collapse-condense:not(.ios26-disabled) ion-toolbar:not(.io
   padding-top: 0;
 }
 
-ion-toolbar.ios:not(.toolbar-title-large):not(.ios26-disabled) {
+ion-toolbar.ios:not(.toolbar-title-large):not(.ios26-disabled):not(:has(ion-segment.segment-expand)) {
   --min-height: 68px;
 }
 

package/src/index.ts

@@ -0,0 +1,244 @@
+import { createGesture, GestureDetail, createAnimation } from '@ionic/core';
+import type { Animation } from '@ionic/core/dist/types/utils/animation/animation-interface';
+import { Gesture } from '@ionic/core/dist/types/utils/gesture';
+
+export const registerTabBarEffect = (ionTabBar: HTMLElement): Gesture => {
+  let gesture!: Gesture;
+  let currentTouchedButton: HTMLIonTabButtonElement | null;
+  let gestureMoveStartTime: number | null;
+  let tabEffectElY: number | null;
+
+  const tabEffectEl = cloneElement('ion-tab-button');
+  const GestureName = 'tab-bar-gesture';
+  const MinScale = 'scale(1.1)';
+  const MiddleScale = 'scale(1.2)';
+  const MaxScale = 'scale(1.3)';
+  const OverScale = 'scale(1.4)';
+
+  ionTabBar.addEventListener('pointerdown', () => clearActivated());
+
+  const createTabButtonGesture = () => {
+    ionTabBar.classList.add('tab-bar-ios26-effect');
+    gesture = createGesture({
+      el: ionTabBar,
+      threshold: 0,
+      gestureName: GestureName,
+      onStart: (event) => {
+        enterTabButtonAnimation(event)?.play();
+      },
+      onMove: (event) => {
+        moveTabButtonAnimation(event)?.play();
+      },
+      onEnd: (event) => {
+        leaveTabButtonAnimation(event).then((animation) => animation?.play());
+      },
+    });
+    gesture.enable(true);
+  };
+  createTabButtonGesture();
+
+  const clearActivated = (isAfterAddWrite = false) => {
+    if (currentTouchedButton) {
+      tabEffectEl.style.display = 'none';
+      tabEffectEl.innerHTML = '';
+      tabEffectEl.style.top = 'auto';
+      tabEffectEl.style.top = 'left';
+      tabEffectEl.style.transform = 'none';
+
+      currentTouchedButton!.classList.remove('ion-activated');
+      if (isAfterAddWrite) {
+        currentTouchedButton.click();
+      }
+
+      /**
+       * もしこの処理がafterAddWrite以外で走る場合、正常に終了していない
+       */
+      if (!isAfterAddWrite) {
+        gesture.destroy();
+        createTabButtonGesture();
+      }
+      currentTouchedButton = null;
+    }
+  };
+
+  const getTransform = (detailCurrentX: number, tabSelectedActual: Element): string => {
+    const diff = -2;
+    const currentX = detailCurrentX - tabSelectedActual.clientWidth / 2;
+    const maxLeft = tabSelectedActual.getBoundingClientRect().left + diff;
+    const maxRight = tabSelectedActual.getBoundingClientRect().right - diff - tabSelectedActual.clientWidth;
+
+    if (maxLeft < currentX && currentX < maxRight) {
+      return `translate3d(${currentX}px, ${tabEffectElY}px, 0)`;
+    }
+    if (maxLeft > currentX) {
+      return `translate3d(${maxLeft}px, ${tabEffectElY}px, 0)`;
+    }
+    return `translate3d(${maxRight}px, ${tabEffectElY}px, 0)`;
+  };
+
+  const enterTabButtonAnimation = (detail: GestureDetail): Animation | undefined => {
+    currentTouchedButton = (detail.event.target as HTMLElement).closest('ion-tab-button');
+    const tabSelectedActual = ionTabBar.querySelector('ion-tab-button.tab-selected');
+    if (tabSelectedActual === null || currentTouchedButton === null) {
+      return undefined;
+    }
+
+    tabEffectElY = tabSelectedActual.getBoundingClientRect().top;
+    const startTransform = getTransform(
+      tabSelectedActual.getBoundingClientRect().left + tabSelectedActual.clientWidth / 2,
+      tabSelectedActual,
+    );
+    const middleTransform = getTransform(
+      (tabSelectedActual.getBoundingClientRect().left + tabSelectedActual.clientWidth / 2 + detail.currentX) / 2,
+      currentTouchedButton,
+    );
+    const endTransform = getTransform(detail.currentX, currentTouchedButton);
+    const tabButtonAnimation = createAnimation();
+    tabButtonAnimation
+      .addElement(tabEffectEl)
+      .delay(70)
+      .beforeStyles({
+        width: `${tabSelectedActual.clientWidth}px`,
+        height: `${tabSelectedActual.clientHeight}px`,
+        display: 'block',
+      })
+      .beforeAddWrite(() => {
+        tabSelectedActual.childNodes.forEach((node) => {
+          tabEffectEl.appendChild(node.cloneNode(true));
+        });
+        currentTouchedButton!.classList.add('ion-activated');
+      });
+
+    if (currentTouchedButton === tabSelectedActual) {
+      tabButtonAnimation
+        .keyframes([
+          {
+            transform: `${startTransform} ${MinScale}`,
+            opacity: 1,
+            offset: 0,
+          },
+          {
+            transform: `${middleTransform} ${MiddleScale}`,
+            opacity: 1,
+            offset: 0.6,
+          },
+          {
+            transform: `${endTransform} ${MaxScale}`,
+            opacity: 1,
+            offset: 1,
+          },
+        ])
+        .duration(120);
+      gestureMoveStartTime = detail.currentTime + 120;
+    } else {
+      tabButtonAnimation
+        .keyframes([
+          {
+            transform: `${startTransform} ${MinScale}`,
+            opacity: 1,
+            offset: 0,
+          },
+          {
+            transform: `${middleTransform} ${MiddleScale}`,
+            opacity: 1,
+            offset: 0.4,
+          },
+          {
+            transform: `${endTransform} ${MaxScale}`,
+            opacity: 1,
+            offset: 0.55,
+          },
+          {
+            transform: `${endTransform} ${OverScale}`,
+            opacity: 1,
+            offset: 0.75,
+          },
+          {
+            transform: `${endTransform} ${MaxScale}`,
+            opacity: 1,
+            offset: 1,
+          },
+        ])
+        .duration(480);
+      gestureMoveStartTime = detail.currentTime + 480;
+    }
+
+    return tabButtonAnimation;
+  };
+
+  const moveTabButtonAnimation = (detail: GestureDetail): Animation | undefined => {
+    if (gestureMoveStartTime) {
+      if (detail.currentTime < gestureMoveStartTime) {
+        return undefined;
+      }
+    }
+    const tabSelectedActual = ionTabBar.querySelector('ion-tab-button.tab-selected');
+    if (tabSelectedActual === null || currentTouchedButton === null) {
+      return undefined;
+    }
+
+    const transform = getTransform(detail.currentX, currentTouchedButton);
+
+    const tabButtonAnimation = createAnimation();
+    tabButtonAnimation.addElement(tabEffectEl);
+    tabButtonAnimation.duration(50).keyframes([
+      {
+        transform: `${transform} ${MaxScale}`,
+      },
+      {
+        transform: `${transform} ${MaxScale}`,
+      },
+    ]);
+    return tabButtonAnimation;
+  };
+
+  const leaveTabButtonAnimation = async (detail: GestureDetail): Promise<Animation | undefined> => {
+    if (gestureMoveStartTime) {
+      if (detail.currentTime < gestureMoveStartTime) {
+        await new Promise((resolve) => setTimeout(resolve, gestureMoveStartTime! - detail.currentTime));
+      }
+    }
+    const tabSelectedActual = ionTabBar.querySelector('ion-tab-button.tab-selected');
+    if (tabSelectedActual === null || currentTouchedButton === null) {
+      return undefined;
+    }
+
+    const endTransform = getTransform(
+      currentTouchedButton.getBoundingClientRect().left + currentTouchedButton.clientWidth / 2,
+      currentTouchedButton,
+    );
+
+    const tabButtonAnimation = createAnimation();
+    tabButtonAnimation.addElement(tabEffectEl);
+    tabButtonAnimation
+      .onFinish(() => clearActivated(true))
+      .duration(50)
+      .keyframes([
+        {
+          transform: `${endTransform} ${MaxScale}`,
+          opacity: 1,
+        },
+        {
+          transform: `${endTransform} ${MinScale}`,
+          opacity: 0,
+        },
+      ]);
+    return tabButtonAnimation;
+  };
+
+  return gesture;
+};
+
+const cloneElement = (tagName: string): HTMLElement => {
+  const getCachedEl = document.querySelector(`${tagName}.ion-cloned-element`);
+  if (getCachedEl !== null) {
+    return getCachedEl as HTMLElement;
+  }
+
+  const clonedEl = document.createElement(tagName) as HTMLElement;
+  clonedEl.classList.add('ion-cloned-element');
+  clonedEl.style.setProperty('display', 'none');
+  document.body.appendChild(clonedEl);
+
+  return clonedEl;
+};