@rdlabo/ionic-theme-ios26 0.3.3 → 0.3.5

package/src/gestures/index.ts

@@ -0,0 +1,290 @@
+import { EffectScales, registeredEffect } from './interfaces';
+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';
+import { cloneElement, getTransform } from './utils';
+
+const GESTURE_NAME = 'ios26-enable-gesture';
+const ANIMATED_NAME = 'ios26-animated';
+
+export const registerEffect = (
+  targetElement: HTMLElement,
+  effectTagName: string,
+  selectedClassName: string,
+  scales: EffectScales,
+): registeredEffect | undefined => {
+  if (!targetElement.classList.contains('ios')) {
+    return undefined;
+  }
+
+  let gesture!: Gesture;
+  let moveAnimation: Animation | undefined;
+  let currentTouchedElement: HTMLElement | undefined;
+  let animationLatestX: number | undefined;
+  let effectElementPositionY: number | undefined;
+
+  let enterAnimationPromise: Promise<void> | undefined;
+  let moveAnimationPromise: Promise<void> | undefined;
+  let clearActivatedTimer: ReturnType<typeof setTimeout> | undefined;
+
+  const effectElement = cloneElement(effectTagName);
+
+  /**
+   * These event listeners fix a bug where gestures don't complete properly.
+   * They terminate the gesture using native events as a fallback.
+   */
+  const onPointerDown = () => {
+    clearActivated();
+    currentTouchedElement?.classList.remove('ion-activated');
+    gesture.destroy();
+    createAnimationGesture();
+  };
+  const onPointerUp = (event: PointerEvent) => {
+    clearActivatedTimer = setTimeout(() => {
+      onEndGesture();
+      currentTouchedElement?.classList.remove('ion-activated');
+      gesture.destroy();
+      createAnimationGesture();
+    });
+  };
+
+  targetElement.addEventListener('pointerdown', onPointerDown);
+  targetElement.addEventListener('pointerup', onPointerUp);
+
+  const createAnimationGesture = () => {
+    targetElement.classList.add(GESTURE_NAME);
+    gesture = createGesture({
+      el: targetElement,
+      threshold: 0,
+      gestureName: `${GESTURE_NAME}_${effectTagName}_${crypto.randomUUID()}`,
+      onStart: (event) => onStartGesture(event),
+      onMove: (event) => onMoveGesture(event),
+      onEnd: (event) => onEndGesture(),
+    });
+    gesture.enable(true);
+  };
+  createAnimationGesture();
+
+  const clearActivated = () => {
+    if (!currentTouchedElement) {
+      return;
+    }
+    requestAnimationFrame(() => {
+      effectElement.style.display = 'none';
+      effectElement.innerHTML = '';
+      effectElement.style.transform = 'none';
+    });
+
+    targetElement.classList.remove(ANIMATED_NAME);
+    currentTouchedElement = undefined;
+    moveAnimation = undefined; // 次回のために破棄
+    moveAnimationPromise = undefined;
+    enterAnimationPromise = undefined; // 次回のためにリセット
+  };
+
+  const onStartGesture = (detail: GestureDetail): boolean | undefined => {
+    enterAnimationPromise = undefined;
+    currentTouchedElement = ((detail.event.target as HTMLElement).closest(effectTagName) as HTMLElement) || undefined;
+    const tabSelectedElement = targetElement.querySelector(`${effectTagName}.${selectedClassName}`);
+    if (currentTouchedElement === undefined || tabSelectedElement === null) {
+      return false;
+    }
+    effectElementPositionY = tabSelectedElement.getBoundingClientRect().top;
+
+    const startTransform = getTransform(
+      tabSelectedElement.getBoundingClientRect().left + tabSelectedElement.clientWidth / 2,
+      effectElementPositionY,
+      tabSelectedElement,
+    );
+    const middleTransform = getTransform(
+      (tabSelectedElement.getBoundingClientRect().left + tabSelectedElement.clientWidth / 2 + detail.currentX) / 2,
+      effectElementPositionY,
+      currentTouchedElement,
+    );
+    const endTransform = getTransform(detail.currentX, effectElementPositionY, currentTouchedElement);
+    const enterAnimation = createAnimation();
+    enterAnimation
+      .addElement(effectElement)
+      .delay(70)
+      .beforeStyles({
+        width: `${tabSelectedElement.clientWidth}px`,
+        height: `${tabSelectedElement.clientHeight}px`,
+        display: 'block',
+      })
+      .beforeAddWrite(() => {
+        tabSelectedElement.childNodes.forEach((node) => {
+          effectElement.appendChild(node.cloneNode(true));
+        });
+        targetElement.classList.add(ANIMATED_NAME);
+        currentTouchedElement!.classList.add('ion-activated');
+        currentTouchedElement!.click();
+      });
+
+    if (currentTouchedElement === tabSelectedElement) {
+      enterAnimation
+        .keyframes([
+          {
+            transform: `${startTransform} ${scales.small}`,
+            opacity: 1,
+            offset: 0,
+          },
+          {
+            transform: `${middleTransform} ${scales.large}`,
+            opacity: 1,
+            offset: 0.6,
+          },
+          {
+            transform: `${endTransform} ${scales.medium}`,
+            opacity: 1,
+            offset: 1,
+          },
+        ])
+        .duration(160);
+    } else {
+      enterAnimation
+        .keyframes([
+          {
+            transform: `${startTransform} ${scales.small}`,
+            opacity: 1,
+            offset: 0,
+          },
+          {
+            transform: `${middleTransform} ${scales.large}`,
+            opacity: 1,
+            offset: 0.65,
+          },
+          {
+            transform: `${endTransform} ${scales.medium}`,
+            opacity: 1,
+            offset: 1,
+          },
+        ])
+        .duration(280);
+    }
+    animationLatestX = detail.currentX;
+    enterAnimationPromise = enterAnimation.play().then(() => {
+      enterAnimationPromise = undefined;
+    });
+    return true;
+  };
+
+  const onMoveGesture = (detail: GestureDetail): boolean | undefined => {
+    if (currentTouchedElement === undefined || enterAnimationPromise || moveAnimationPromise) {
+      return true; // Skip Animation
+    }
+
+    const startTransform = getTransform(animationLatestX!, effectElementPositionY!, currentTouchedElement);
+    const endTransform = getTransform(detail.currentX, effectElementPositionY!, currentTouchedElement);
+
+    // Move用のアニメーションオブジェクトを初回のみ作成し、再利用する
+    if (!moveAnimation) {
+      moveAnimation = createAnimation();
+      moveAnimation
+        .addElement(effectElement)
+        .duration(800)
+        .easing('ease-in-out')
+        .keyframes([
+          {
+            transform: `${startTransform} ${scales.medium}`,
+            opacity: 1,
+            offset: 0,
+          },
+          {
+            transform: `${startTransform} ${scales.xlarge}`,
+            opacity: 1,
+            offset: 0.2,
+          },
+          {
+            transform: `${endTransform} ${scales.medium}`,
+            opacity: 1,
+            offset: 1,
+          },
+        ]);
+    } else {
+      moveAnimation.duration(0).keyframes([
+        {
+          transform: `${endTransform} ${scales.medium}`,
+          opacity: 1,
+          offset: 1,
+        },
+        {
+          transform: `${endTransform} ${scales.medium}`,
+          opacity: 1,
+          offset: 1,
+        },
+      ]);
+    }
+    animationLatestX = detail.currentX;
+    moveAnimationPromise = moveAnimation.play().then(() => {
+      moveAnimationPromise = undefined;
+    });
+    return true;
+  };
+
+  const onEndGesture = (): boolean | undefined => {
+    // タイマーをクリア（正常にonEndGestureが実行された場合）
+    if (clearActivatedTimer !== undefined) {
+      clearTimeout(clearActivatedTimer);
+      clearActivatedTimer = undefined;
+    }
+
+    if (currentTouchedElement === undefined) {
+      return false;
+    }
+
+    const transform = getTransform(animationLatestX!, effectElementPositionY!, currentTouchedElement);
+
+    const leaveAnimation = createAnimation();
+    leaveAnimation.addElement(effectElement);
+    leaveAnimation
+      .onFinish(() => clearActivated())
+      .easing('ease-in')
+      .duration(80)
+      .keyframes([
+        {
+          transform: `${transform} ${scales.medium}`,
+          opacity: 1,
+        },
+        {
+          transform: `${transform} ${scales.small}`,
+          opacity: 0,
+        },
+      ]);
+    (async () => {
+      // Wait for enter animation to complete before playing leave animation
+      if (enterAnimationPromise) {
+        setTimeout(() => currentTouchedElement!.classList.remove('ion-activated'), 50);
+        await enterAnimationPromise;
+      } else {
+        currentTouchedElement!.classList.remove('ion-activated');
+      }
+      leaveAnimation.play();
+    })();
+    return true;
+  };
+
+  return {
+    destroy: () => {
+      // Remove event listeners
+      targetElement.removeEventListener('pointerdown', onPointerDown);
+      targetElement.removeEventListener('pointerup', onPointerUp);
+
+      // Clear any pending timer
+      if (clearActivatedTimer !== undefined) {
+        clearTimeout(clearActivatedTimer);
+        clearActivatedTimer = undefined;
+      }
+
+      // Clear activated state
+      clearActivated();
+
+      // Destroy gesture
+      if (gesture) {
+        gesture.destroy();
+      }
+
+      // Remove gesture class
+      targetElement.classList.remove(GESTURE_NAME);
+    },
+  };
+};

package/src/gestures/interfaces.ts

@@ -0,0 +1,10 @@
+export interface EffectScales {
+  small: string;
+  medium: string;
+  large: string;
+  xlarge: string;
+}
+
+export interface registeredEffect {
+  destroy: () => void;
+}

package/src/gestures/utils.ts

@@ -0,0 +1,28 @@
+export 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;
+};
+
+export const getTransform = (detailCurrentX: number, tabEffectElY: 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)`;
+};

package/src/index.ts

@@ -0,0 +1,21 @@
+import { registeredEffect } from './gestures/interfaces';
+import { registerEffect } from './gestures';
+export * from './gestures/interfaces';
+
+export const registerTabBarEffect = (targetElement: HTMLElement): registeredEffect | undefined => {
+  return registerEffect(targetElement, 'ion-tab-button', 'tab-selected', {
+    small: 'scale(1.1)',
+    medium: 'scale(1.2)',
+    large: 'scale(1.3)',
+    xlarge: 'scale(1.3, 1.5)',
+  });
+};
+
+export const registerSegmentEffect = (targetElement: HTMLElement): registeredEffect | undefined => {
+  return registerEffect(targetElement, 'ion-segment-button', 'segment-button-checked', {
+    small: 'scale(1.35)',
+    medium: 'scale(1.45)',
+    large: 'scale(1.55)',
+    xlarge: 'scale(1.55, 1.65)',
+  });
+};

package/src/styles/components/ion-segment.scss

@@ -0,0 +1,106 @@
+@use '../utils/api';
+
+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 {
+      min-height: 24px;
+    }
+  }
+
+  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;
+    }
+  }
+
+  &:not(.ios26-enable-gesture).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;
+      }
+    }
+  }
+
+  &.ios26-enable-gesture {
+    &:has(ion-segment-button.ion-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;
+          transform: scale(1.1);
+          transform-origin: center center;
+        }
+      }
+    }
+    &.ios26-animated {
+      ion-segment-button {
+        &::part(indicator-background) {
+          background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0);
+        }
+      }
+    }
+  }
+}
+
+ion-segment-button.ios:not(.ios26-disabled) {
+  --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);
+  }
+
+  &.ion-cloned-element {
+    &::part(native) {
+      border-radius: 25px;
+      @include api.glass-background(1, 0, 104%);
+      background: transparent;
+      height: 100%;
+    }
+    color: var(--color-selected, var(--ion-color-primary, #0054e9));
+    pointer-events: none;
+    position: absolute;
+    left: 0;
+    top: -2.5px;
+    transform-origin: center;
+    & > * {
+      visibility: hidden;
+    }
+  }
+}

package/src/styles/components/ion-tabs.scss

@@ -0,0 +1,117 @@
+@use '../utils/api';
+
+ion-tab-bar.ios:not(.ios26-disabled) {
+  @include api.glass-background;
+  z-index: 2;
+
+  border-radius: 40px;
+  --color: rgb(var(--ion-text-color-rgb, 0, 0, 0));
+
+  &[slot='top'] {
+    position: absolute;
+    top: var(--ios26-floating-safe-area-top);
+    right: calc(16px + var(--ion-safe-area-right, 0px));
+  }
+
+  &[slot='bottom'] {
+    position: absolute;
+    bottom: var(--ios26-floating-safe-area-bottom);
+    left: calc(16px + var(--ion-safe-area-left, 0px));
+  }
+
+  /**
+   * 100% - margin-left - margin-right - right-fab - margin-left-fab
+   */
+  width: calc(100% - calc(18px + var(--ion-safe-area-left, 0px)) - calc(18px + var(--ion-safe-area-left, 0px)) - 60px - 12px);
+  max-width: 474px;
+  min-height: 56px;
+  &:has(:nth-child(5)) {
+    width: calc(100% - calc(18px + var(--ion-safe-area-left, 0px)) - calc(18px + var(--ion-safe-area-left, 0px)));
+    max-width: 546px;
+  }
+  padding: 2px 2px;
+
+  transition: transform var(--ios26-activated-transition-duration) ease-out;
+  will-change: transform;
+  &:has(ion-tab-button.ion-activated) {
+    transform: scale(1.038);
+  }
+
+  &:has(ion-tab-button.ion-activated) {
+    ion-tab-button.tab-selected:not(.ion-activated) {
+      --color-selected: rgb(var(--ion-text-color-rgb, 0, 0, 0));
+    }
+  }
+
+  /**
+   * effectが有効な場合、effectでスタイリングするため不要
+   */
+  &.ios26-enable-gesture.ios26-animated {
+    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 {
+      filter: brightness(104%);
+    }
+  }
+
+  &.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, 0, 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/{md-remove-ios-class-effect.scss → styles/md-remove-ios-class-effect.scss}

@@ -13,12 +13,12 @@ ion-toolbar.md:not(.ios26-disabled) {
   }
 }
 
-ion-buttons.md.ios26-disabled {
+ion-buttons.md {
   /**
    * ion-buttons.ios26-disabled > ion-button.button-default is for ios26 structure.
    * for .md, remove button-default styles. Will be button-clear.
    */
-  ion-button:not(.ios26-disabled).button-default {
+  ion-button.md:not(.ios26-disabled).button-default {
     // copy .button-clear
     --color: initial;
     --background: transparent;

package/src/components/ion-segment.scss

@@ -1,64 +0,0 @@
-@use '../utils/api';
-
-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 {
-      min-height: 24px;
-    }
-  }
-
-  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-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;
-      }
-    }
-  }
-}