@rdlabo/ionic-theme-ios26 0.3.4 → 0.4.0

package/dist/gestures/gestures.js

@@ -0,0 +1,240 @@
+import { createGesture, createAnimation } from '@ionic/core';
+import { cloneElement, getTransform } from './utils';
+const GESTURE_NAME = 'ios26-enable-gesture';
+const ANIMATED_NAME = 'ios26-animated';
+export const registerEffect = (targetElement, effectTagName, selectedClassName, scales) => {
+    if (!targetElement.classList.contains('ios')) {
+        return undefined;
+    }
+    let gesture;
+    let moveAnimation;
+    let currentTouchedElement;
+    let animationLatestX;
+    let effectElementPositionY;
+    let enterAnimationPromise;
+    let moveAnimationPromise;
+    let clearActivatedTimer;
+    const effectElement = cloneElement(effectTagName);
+    const onPointerDown = () => {
+        clearActivated();
+        currentTouchedElement?.classList.remove('ion-activated');
+        gesture.destroy();
+        createAnimationGesture();
+    };
+    const onPointerUp = (event) => {
+        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) => {
+        enterAnimationPromise = undefined;
+        currentTouchedElement = detail.event.target.closest(effectTagName) || 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) => {
+        if (currentTouchedElement === undefined || enterAnimationPromise || moveAnimationPromise) {
+            return true;
+        }
+        const startTransform = getTransform(animationLatestX, effectElementPositionY, currentTouchedElement);
+        const endTransform = getTransform(detail.currentX, effectElementPositionY, currentTouchedElement);
+        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 = () => {
+        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 () => {
+            if (enterAnimationPromise) {
+                setTimeout(() => currentTouchedElement.classList.remove('ion-activated'), 50);
+                await enterAnimationPromise;
+            }
+            else {
+                currentTouchedElement.classList.remove('ion-activated');
+            }
+            leaveAnimation.play();
+        })();
+        return true;
+    };
+    return {
+        destroy: () => {
+            targetElement.removeEventListener('pointerdown', onPointerDown);
+            targetElement.removeEventListener('pointerup', onPointerUp);
+            if (clearActivatedTimer !== undefined) {
+                clearTimeout(clearActivatedTimer);
+                clearActivatedTimer = undefined;
+            }
+            clearActivated();
+            if (gesture) {
+                gesture.destroy();
+            }
+            targetElement.classList.remove(GESTURE_NAME);
+        },
+    };
+};

package/dist/gestures/index.d.ts

@@ -0,0 +1,3 @@
+import { EffectScales, registeredEffect } from './interfaces';
+export declare const registerEffect: (targetElement: HTMLElement, effectTagName: string, selectedClassName: string, scales: EffectScales) => registeredEffect | undefined;
+//# sourceMappingURL=index.d.ts.map

package/dist/gestures/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/gestures/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAS9D,eAAO,MAAM,cAAc,GACzB,eAAe,WAAW,EAC1B,eAAe,MAAM,EACrB,mBAAmB,MAAM,EACzB,QAAQ,YAAY,KACnB,gBAAgB,GAAG,SAmRrB,CAAC"}

package/dist/gestures/index.js

@@ -0,0 +1,240 @@
+import { createGesture, createAnimation } from '@ionic/core';
+import { cloneElement, getTransform } from './utils';
+const GESTURE_NAME = 'ios26-enable-gesture';
+const ANIMATED_NAME = 'ios26-animated';
+export const registerEffect = (targetElement, effectTagName, selectedClassName, scales) => {
+    if (!targetElement.classList.contains('ios')) {
+        return undefined;
+    }
+    let gesture;
+    let moveAnimation;
+    let currentTouchedElement;
+    let animationLatestX;
+    let effectElementPositionY;
+    let enterAnimationPromise;
+    let moveAnimationPromise;
+    let clearActivatedTimer;
+    const effectElement = cloneElement(effectTagName);
+    const onPointerDown = () => {
+        clearActivated();
+        currentTouchedElement?.classList.remove('ion-activated');
+        gesture.destroy();
+        createAnimationGesture();
+    };
+    const onPointerUp = (event) => {
+        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) => {
+        enterAnimationPromise = undefined;
+        currentTouchedElement = detail.event.target.closest(effectTagName) || 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) => {
+        if (currentTouchedElement === undefined || enterAnimationPromise || moveAnimationPromise) {
+            return true;
+        }
+        const startTransform = getTransform(animationLatestX, effectElementPositionY, currentTouchedElement);
+        const endTransform = getTransform(detail.currentX, effectElementPositionY, currentTouchedElement);
+        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 = () => {
+        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 () => {
+            if (enterAnimationPromise) {
+                setTimeout(() => currentTouchedElement.classList.remove('ion-activated'), 50);
+                await enterAnimationPromise;
+            }
+            else {
+                currentTouchedElement.classList.remove('ion-activated');
+            }
+            leaveAnimation.play();
+        })();
+        return true;
+    };
+    return {
+        destroy: () => {
+            targetElement.removeEventListener('pointerdown', onPointerDown);
+            targetElement.removeEventListener('pointerup', onPointerUp);
+            if (clearActivatedTimer !== undefined) {
+                clearTimeout(clearActivatedTimer);
+                clearActivatedTimer = undefined;
+            }
+            clearActivated();
+            if (gesture) {
+                gesture.destroy();
+            }
+            targetElement.classList.remove(GESTURE_NAME);
+        },
+    };
+};

package/dist/gestures/interfaces.d.ts

@@ -0,0 +1,10 @@
+export interface EffectScales {
+    small: string;
+    medium: string;
+    large: string;
+    xlarge: string;
+}
+export interface registeredEffect {
+    destroy: () => void;
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/dist/gestures/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../src/gestures/interfaces.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB"}

package/dist/gestures/interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/gestures/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/gestures/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/gestures/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/gestures/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/dist/index.d.ts

@@ -1,3 +1,5 @@
-import { Gesture } from '@ionic/core/dist/types/utils/gesture';
-export declare const registerTabBarEffect: (ionTabBar: HTMLElement) => Gesture;
+import { registeredEffect } from './gestures/interfaces';
+export * from './gestures/interfaces';
+export declare const registerTabBarEffect: (targetElement: HTMLElement) => registeredEffect | undefined;
+export declare const registerSegmentEffect: (targetElement: HTMLElement) => registeredEffect | undefined;
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AAE/D,eAAO,MAAM,oBAAoB,GAAI,WAAW,WAAW,KAAG,OAiO7D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,cAAc,uBAAuB,CAAC;AAEtC,eAAO,MAAM,oBAAoB,GAAI,eAAe,WAAW,KAAG,gBAAgB,GAAG,SAOpF,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,eAAe,WAAW,KAAG,gBAAgB,GAAG,SAOrF,CAAC"}