@rdlabo/ionic-theme-ios26 0.3.4 → 0.4.0

package/src/index.ts

@@ -1,244 +1,21 @@
-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;
+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)',
+  });
 };
 
-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 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/{components → styles/components}/ion-tabs.scss

@@ -46,7 +46,7 @@ ion-tab-bar.ios:not(.ios26-disabled) {
   /**
    * effectが有効な場合、effectでスタイリングするため不要
    */
-  &.tab-bar-ios26-effect:has(ion-tab-button.ion-activated) {
+  &.ios26-enable-gesture.ios26-animated {
     ion-tab-button.tab-selected::part(native) {
       background: rgba(var(--ios26-button-color-selected-rgb), 0);
     }
@@ -101,7 +101,7 @@ ion-tab-button.ios:not(.ios26-disabled) {
 
   &.ion-cloned-element {
     &::part(native) {
-      @include api.glass-background(1, 2px, 104%);
+      @include api.glass-background(1, 0, 104%);
       background: transparent;
     }
     color: var(--color-selected, var(--ion-color-primary, #0054e9));

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;
-      }
-    }
-  }
-}