pagewave 1.0.4 → 1.0.6

package/dist/KeyFramePreset.css

@@ -0,0 +1,55 @@
+@keyframes fade {
+    from{
+        opacity: 1;
+    }
+    to{
+        opacity: 0;
+    }
+}
+@keyframes fadeaway {
+    from{
+        position: relative;
+        opacity: 1;
+        left: 0
+    }
+    to{
+        position: relative;
+        opacity: 0;
+        left: -200px
+    }
+}
+@keyframes fadetoleft {
+    from{
+        position: relative;
+        left: 0;
+        opacity: 1;
+    }
+    to{
+        position: relative;
+        left: -100px;
+        opacity: 0;
+    }
+}
+@keyframes fadetoright {
+    from{
+        position: relative;
+        left: 0;
+        opacity: 1;
+    }
+    to{
+        position: relative;
+        left: 100px;
+        opacity: 0;
+    }
+}
+@keyframes rotatefade {
+  0% {
+    transform: rotateZ(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: rotateY(-180deg);
+    opacity: 0;
+  }
+}
+

package/{OverlayPreset.css → dist/OverlayPreset.css}

@@ -6,7 +6,7 @@
         width: 100%;
         height: 100%;
         position: absolute;
-        background-color: var(--div-color);
+        
         clip-path: circle(0%);
         top: 0;
     }
@@ -14,7 +14,7 @@
         width: 100%;
         height: 100%;
         position: absolute;
-        background-color: var(--div-color);
+        
         clip-path: circle(100%);
         top: 0;
     }
@@ -25,14 +25,14 @@
         width: 100%;
         position: absolute;
         top: 0;
-        background-color: var(--div-color);
+        
     }
     to{
         height: 100%;
         width: 100%;
         position: absolute;
         top: 0;
-        background-color: var(--div-color);
+        
     }
 }
 @keyframes rise {
@@ -41,14 +41,14 @@
         width: 100%;
         position: absolute;
         bottom: 0;
-        background-color: var(--div-color);
+        
     }
     to{
         height: 100%;
         width: 100%;
         position: absolute;
         bottom: 0;
-        background-color: var(--div-color);
+        
     }
 }
 @keyframes leftcurtain{
@@ -57,14 +57,14 @@
         width: 0%;
         position: absolute;
         top: 0;   
-        background-color: var(--div-color);   
+           
     }
     to{
         height: 100%;
         width: 50%;
         position: absolute;
         top: 0;
-        background-color: var(--div-color);
+        
     }
 }
 @keyframes rightcurtain{
@@ -74,7 +74,7 @@
         position: absolute;
         right: 0;
         top: 0;   
-        background-color: var(--div-color);   
+           
     }
     to{
         height: 100%;
@@ -82,7 +82,7 @@
         position: absolute;
         right: 0;
         top: 0;
-        background-color: var(--div-color);
+        
     }
 }
 @keyframes inverseSlide{
@@ -92,7 +92,7 @@
         position: absolute;
         right: 0;
         top: 0;
-        background-color: var(--div-color);
+        
     }
     to{
         height: 100%;
@@ -100,7 +100,6 @@
         position: absolute;
         right: 0;
         top: 0;
-        background-color: var(--div-color);
     }
 }
 @keyframes slide {
@@ -109,13 +108,49 @@
         width: 0%;
         position: absolute;
         top: 0;
-        background-color: var(--div-color);
+        
     }
     to{
         height: 100%;
         width: 100%;
         position: absolute;
         top: 0;
-        background-color: var(--div-color);
+        
     }
 }
+
+@keyframes wipe {
+  /* Initial: left middle, thin vertical bar */
+  0% {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 1%;
+    height: 2%;
+    transform: translateY(-50%) scaleX(0) scaleY(1);
+    transform-origin: left center;
+    z-index: 9999;
+  }
+
+  /* Grow to the right */
+  50% {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    height: 2%;
+    transform: translateY(-50%);
+  }
+
+  /* Expand up & down */
+  100% {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transform: translateY(-50%);
+    transform-origin: left center;
+    z-index: 9999;
+  }
+}

package/dist/index.d.mts

@@ -0,0 +1,127 @@
+type DirectionType = "normal" | "reverse";
+
+type OptionsType = {
+    mainContentIdName: string;
+    pageAnimationDelay: number;
+    runAnimationOnPageReload: boolean;
+    runAnimationOnCrossSite: boolean;
+    pageRevealDelay: number;
+    leavePageOnLink: boolean;
+    pageBlockerId: string;
+    classToIgnoreLink: string;
+    animateIgnoredLinks: boolean;
+    animateSelfLink: boolean;
+    loadEvent: "DOMContentLoaded" | "load";
+    preferIgnore: boolean;
+};
+
+type TimingType = "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "step-start" | "step-end";
+
+interface TransitionStyle {
+    duration: number;
+    timing?: TimingType;
+    handle(direction: DirectionType, mainElement: HTMLElement): void;
+    hidePage(options: OptionsType): void;
+    revealPage(options: OptionsType): void;
+}
+
+declare class KeyFrameBase implements TransitionStyle {
+    duration: number;
+    timing: TimingType;
+    constructor(duration: number, timing?: TimingType);
+    handle(direction: DirectionType, mainElement: HTMLElement): void;
+    hidePage(options: OptionsType): void;
+    revealPage(options: OptionsType): void;
+    protected waitForElementLoad(selector: string, functionToExecute: (element: HTMLElement) => void): void;
+    protected ApplyAnimation(element: HTMLElement, animationName: string, duration: number, timing: TimingType, direction: DirectionType): void;
+}
+
+declare class KeyFrameCustom extends KeyFrameBase {
+    animationName: string;
+    constructor(animationName: string, duration: number, timing?: TimingType);
+    handle(direction: DirectionType, mainElement: HTMLElement): void;
+}
+
+type KeyFrameType = "fade" | "fadeaway" | "fadetoleft" | "fadetoright";
+
+declare class KeyFramePreset extends KeyFrameCustom {
+    constructor(kfType: KeyFrameType, duration: number, timing?: TimingType);
+    handle(direction: DirectionType, mainElement: HTMLElement): void;
+}
+
+declare class MultiElementAnimation extends KeyFrameBase {
+    animateableObjects: {
+        [selector: string]: string;
+    };
+    mainElementAnimation: string;
+    constructor(animateableObjects: {
+        [selector: string]: string;
+    }, duration: number, timing?: TimingType, mainElementAnimation?: string);
+    handle(direction: DirectionType, mainElement: HTMLElement): void;
+}
+
+declare class OverlayBase implements TransitionStyle {
+    duration: number;
+    timing: TimingType;
+    color: string;
+    constructor(duration: number, color: string, timing?: TimingType);
+    handle(direction: DirectionType, mainElement: HTMLElement): void;
+    hidePage(options: OptionsType): void;
+    revealPage(options: OptionsType): void;
+    private waitForElementLoad;
+}
+
+declare class OverlayCustom extends OverlayBase {
+    divAnimationObject: Record<string, string>;
+    mainElementAnimation: KeyFrameBase | null;
+    constructor(divAnimationObject: Record<string, string>, duration: number, color: string, timing?: TimingType, mainElementAnimation?: KeyFrameBase | null);
+    handle(direction: DirectionType, mainElement: HTMLElement): void;
+}
+
+type OverlayType = "slide" | "inverseSlide" | "curtain" | "rise" | "fall" | "bubble" | "wipe";
+
+declare class OverlayPreset extends OverlayCustom {
+    constructor(oType: OverlayType, duration: number, color: string, timing?: TimingType);
+    handle(direction: DirectionType, mainElement: HTMLElement): void;
+}
+
+type OverlayStyledDiv = {
+    animationName: string;
+    cssDesign: Partial<Record<keyof CSSStyleDeclaration, string>>;
+};
+declare class OverlayStyled extends OverlayBase {
+    divAnimationObject: Record<string, OverlayStyledDiv>;
+    mainElementAnimation: KeyFrameBase | null;
+    blockerDesign: Partial<Record<keyof CSSStyleDeclaration, string>>;
+    constructor(divAnimationObject: Record<string, OverlayStyledDiv>, duration: number, color: string, timing?: TimingType, mainElementAnimation?: KeyFrameBase | null, blockerDesign?: Partial<Record<keyof CSSStyleDeclaration, string>>);
+    hidePage(options: OptionsType): void;
+    handle(direction: DirectionType, mainElement: HTMLElement): void;
+}
+
+declare class PageWave {
+    defaultOptions: OptionsType;
+    finalOptions: OptionsType;
+    routeTransitions: Record<string, TransitionStyle>;
+    constructor(transitions: Record<string, TransitionStyle>, options?: Partial<OptionsType>);
+    private CallHook;
+    private isNavigationFromSameSite;
+    private isInternalLink;
+    private HandleClickAnimation;
+    ListenForChange(defaultTransitionStyle: TransitionStyle, leaveFunction?: (link: string) => void): void;
+    SendPoint(defaultTransitionStyle: TransitionStyle, leaveFunction?: (link: string) => void, externalLeaveFunction?: (link: string) => void): void;
+    getStorageRouteTransition(defaultTransitionStyle: TransitionStyle): TransitionStyle;
+    EndPoint(defaultTransitionStyle: TransitionStyle): void;
+    CallEndPoint(): void;
+    SaveAndTransition(animationName: string, aStyle: TransitionStyle, direction?: DirectionType): void;
+    AnimatePageTransition(aStyle: TransitionStyle, direction?: DirectionType): void;
+}
+
+declare class StyleTransition extends KeyFrameBase {
+    styleString: keyof CSSStyleDeclaration;
+    startValue: string;
+    endValue: string;
+    constructor(styleString: keyof CSSStyleDeclaration, duration: number, startValue: string, endValue: string, timing?: TimingType);
+    handle(direction: DirectionType, mainElement: HTMLElement): void;
+}
+
+export { type DirectionType, KeyFrameBase, KeyFrameCustom, KeyFramePreset, type KeyFrameType, MultiElementAnimation, type OptionsType, OverlayBase, OverlayCustom, OverlayPreset, OverlayStyled, type OverlayStyledDiv, type OverlayType, PageWave, StyleTransition, type TimingType, type TransitionStyle };

package/dist/index.d.ts

@@ -0,0 +1,127 @@
+type DirectionType = "normal" | "reverse";
+
+type OptionsType = {
+    mainContentIdName: string;
+    pageAnimationDelay: number;
+    runAnimationOnPageReload: boolean;
+    runAnimationOnCrossSite: boolean;
+    pageRevealDelay: number;
+    leavePageOnLink: boolean;
+    pageBlockerId: string;
+    classToIgnoreLink: string;
+    animateIgnoredLinks: boolean;
+    animateSelfLink: boolean;
+    loadEvent: "DOMContentLoaded" | "load";
+    preferIgnore: boolean;
+};
+
+type TimingType = "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "step-start" | "step-end";
+
+interface TransitionStyle {
+    duration: number;
+    timing?: TimingType;
+    handle(direction: DirectionType, mainElement: HTMLElement): void;
+    hidePage(options: OptionsType): void;
+    revealPage(options: OptionsType): void;
+}
+
+declare class KeyFrameBase implements TransitionStyle {
+    duration: number;
+    timing: TimingType;
+    constructor(duration: number, timing?: TimingType);
+    handle(direction: DirectionType, mainElement: HTMLElement): void;
+    hidePage(options: OptionsType): void;
+    revealPage(options: OptionsType): void;
+    protected waitForElementLoad(selector: string, functionToExecute: (element: HTMLElement) => void): void;
+    protected ApplyAnimation(element: HTMLElement, animationName: string, duration: number, timing: TimingType, direction: DirectionType): void;
+}
+
+declare class KeyFrameCustom extends KeyFrameBase {
+    animationName: string;
+    constructor(animationName: string, duration: number, timing?: TimingType);
+    handle(direction: DirectionType, mainElement: HTMLElement): void;
+}
+
+type KeyFrameType = "fade" | "fadeaway" | "fadetoleft" | "fadetoright";
+
+declare class KeyFramePreset extends KeyFrameCustom {
+    constructor(kfType: KeyFrameType, duration: number, timing?: TimingType);
+    handle(direction: DirectionType, mainElement: HTMLElement): void;
+}
+
+declare class MultiElementAnimation extends KeyFrameBase {
+    animateableObjects: {
+        [selector: string]: string;
+    };
+    mainElementAnimation: string;
+    constructor(animateableObjects: {
+        [selector: string]: string;
+    }, duration: number, timing?: TimingType, mainElementAnimation?: string);
+    handle(direction: DirectionType, mainElement: HTMLElement): void;
+}
+
+declare class OverlayBase implements TransitionStyle {
+    duration: number;
+    timing: TimingType;
+    color: string;
+    constructor(duration: number, color: string, timing?: TimingType);
+    handle(direction: DirectionType, mainElement: HTMLElement): void;
+    hidePage(options: OptionsType): void;
+    revealPage(options: OptionsType): void;
+    private waitForElementLoad;
+}
+
+declare class OverlayCustom extends OverlayBase {
+    divAnimationObject: Record<string, string>;
+    mainElementAnimation: KeyFrameBase | null;
+    constructor(divAnimationObject: Record<string, string>, duration: number, color: string, timing?: TimingType, mainElementAnimation?: KeyFrameBase | null);
+    handle(direction: DirectionType, mainElement: HTMLElement): void;
+}
+
+type OverlayType = "slide" | "inverseSlide" | "curtain" | "rise" | "fall" | "bubble" | "wipe";
+
+declare class OverlayPreset extends OverlayCustom {
+    constructor(oType: OverlayType, duration: number, color: string, timing?: TimingType);
+    handle(direction: DirectionType, mainElement: HTMLElement): void;
+}
+
+type OverlayStyledDiv = {
+    animationName: string;
+    cssDesign: Partial<Record<keyof CSSStyleDeclaration, string>>;
+};
+declare class OverlayStyled extends OverlayBase {
+    divAnimationObject: Record<string, OverlayStyledDiv>;
+    mainElementAnimation: KeyFrameBase | null;
+    blockerDesign: Partial<Record<keyof CSSStyleDeclaration, string>>;
+    constructor(divAnimationObject: Record<string, OverlayStyledDiv>, duration: number, color: string, timing?: TimingType, mainElementAnimation?: KeyFrameBase | null, blockerDesign?: Partial<Record<keyof CSSStyleDeclaration, string>>);
+    hidePage(options: OptionsType): void;
+    handle(direction: DirectionType, mainElement: HTMLElement): void;
+}
+
+declare class PageWave {
+    defaultOptions: OptionsType;
+    finalOptions: OptionsType;
+    routeTransitions: Record<string, TransitionStyle>;
+    constructor(transitions: Record<string, TransitionStyle>, options?: Partial<OptionsType>);
+    private CallHook;
+    private isNavigationFromSameSite;
+    private isInternalLink;
+    private HandleClickAnimation;
+    ListenForChange(defaultTransitionStyle: TransitionStyle, leaveFunction?: (link: string) => void): void;
+    SendPoint(defaultTransitionStyle: TransitionStyle, leaveFunction?: (link: string) => void, externalLeaveFunction?: (link: string) => void): void;
+    getStorageRouteTransition(defaultTransitionStyle: TransitionStyle): TransitionStyle;
+    EndPoint(defaultTransitionStyle: TransitionStyle): void;
+    CallEndPoint(): void;
+    SaveAndTransition(animationName: string, aStyle: TransitionStyle, direction?: DirectionType): void;
+    AnimatePageTransition(aStyle: TransitionStyle, direction?: DirectionType): void;
+}
+
+declare class StyleTransition extends KeyFrameBase {
+    styleString: keyof CSSStyleDeclaration;
+    startValue: string;
+    endValue: string;
+    constructor(styleString: keyof CSSStyleDeclaration, duration: number, startValue: string, endValue: string, timing?: TimingType);
+    handle(direction: DirectionType, mainElement: HTMLElement): void;
+}
+
+export { type DirectionType, KeyFrameBase, KeyFrameCustom, KeyFramePreset, type KeyFrameType, MultiElementAnimation, type OptionsType, OverlayBase, OverlayCustom, OverlayPreset, OverlayStyled, type OverlayStyledDiv, type OverlayType, PageWave, StyleTransition, type TimingType, type TransitionStyle };