@rdlabo/ionic-theme-ios26 0.3.4 → 0.4.0

package/dist/index.js

@@ -1,208 +1,18 @@
-import { createGesture, createAnimation } from '@ionic/core';
-export const registerTabBarEffect = (ionTabBar) => {
-    let gesture;
-    let currentTouchedButton;
-    let gestureMoveStartTime;
-    let tabEffectElY;
-    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();
-            }
-            if (!isAfterAddWrite) {
-                gesture.destroy();
-                createTabButtonGesture();
-            }
-            currentTouchedButton = null;
-        }
-    };
-    const getTransform = (detailCurrentX, tabSelectedActual) => {
-        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) => {
-        currentTouchedButton = detail.event.target.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) => {
-        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) => {
-        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 { registerEffect } from './gestures';
+export * from './gestures/interfaces';
+export const registerTabBarEffect = (targetElement) => {
+    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) => {
-    const getCachedEl = document.querySelector(`${tagName}.ion-cloned-element`);
-    if (getCachedEl !== null) {
-        return getCachedEl;
-    }
-    const clonedEl = document.createElement(tagName);
-    clonedEl.classList.add('ion-cloned-element');
-    clonedEl.style.setProperty('display', 'none');
-    document.body.appendChild(clonedEl);
-    return clonedEl;
+export const registerSegmentEffect = (targetElement) => {
+    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/dist/utils.d.ts

@@ -0,0 +1,3 @@
+export declare const cloneElement: (tagName: string) => HTMLElement;
+export declare const getTransform: (detailCurrentX: number, tabEffectElY: number, tabSelectedActual: Element) => string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,GAAI,SAAS,MAAM,KAAG,WAY9C,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,gBAAgB,MAAM,EAAE,cAAc,MAAM,EAAE,mBAAmB,OAAO,KAAG,MAavG,CAAC"}

package/dist/utils.js

@@ -0,0 +1,24 @@
+export const cloneElement = (tagName) => {
+    const getCachedEl = document.querySelector(`${tagName}.ion-cloned-element`);
+    if (getCachedEl !== null) {
+        return getCachedEl;
+    }
+    const clonedEl = document.createElement(tagName);
+    clonedEl.classList.add('ion-cloned-element');
+    clonedEl.style.setProperty('display', 'none');
+    document.body.appendChild(clonedEl);
+    return clonedEl;
+};
+export const getTransform = (detailCurrentX, tabEffectElY, tabSelectedActual) => {
+    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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rdlabo/ionic-theme-ios26",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "description": "iOS26 CSS Theme for Ionic Framework",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -19,7 +19,7 @@
   ],
   "scripts": {
     "build": "npm run build:css && npm run build:ts",
-    "build:css": "rm -rf dist/css && sass src:dist/css --style=compressed --no-source-map",
+    "build:css": "rm -rf dist/css && sass src/styles:dist/css --style=compressed --no-source-map",
     "build:ts": "tsc",
     "build:demo": "npm run build && cd demo && npm install && npm run build -- --configuration=production",
     "prepare": "husky install",

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)`;
+};