pagewave 1.0.3 → 1.0.5

package/dist/index.d.ts

@@ -0,0 +1,126 @@
+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?: string;
+    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?: {});
+    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;
+    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.js

@@ -0,0 +1,573 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  KeyFrameBase: () => KeyFrameBase,
+  KeyFrameCustom: () => KeyFrameCustom,
+  KeyFramePreset: () => KeyFramePreset,
+  MultiElementAnimation: () => MultiElementAnimation,
+  OverlayBase: () => OverlayBase,
+  OverlayCustom: () => OverlayCustom,
+  OverlayPreset: () => OverlayPreset,
+  OverlayStyled: () => OverlayStyled,
+  PageWave: () => PageWave,
+  StyleTransition: () => StyleTransition
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/classes/KeyFrameBase.ts
+var KeyFrameBase = class {
+  duration;
+  timing;
+  constructor(duration, timing = "linear") {
+    this.duration = duration;
+    this.timing = timing;
+  }
+  handle(direction, mainElement) {
+  }
+  hidePage(options) {
+    for (const ele of document.getElementsByClassName("pagewave-overlay-div")) {
+      ele.remove();
+    }
+    const mainContent = document.getElementById(options.mainContentIdName);
+    if (mainContent) {
+      mainContent.hidden = true;
+    } else {
+      this.waitForElementLoad(
+        `#${options.mainContentIdName}`,
+        (element) => {
+          element.hidden = true;
+        }
+      );
+    }
+  }
+  revealPage(options) {
+    const mainContent = document.getElementById(options.mainContentIdName);
+    if (mainContent) {
+      mainContent.hidden = false;
+    } else {
+      this.waitForElementLoad(
+        `#${options.mainContentIdName}`,
+        (element) => {
+          element.hidden = false;
+        }
+      );
+    }
+  }
+  waitForElementLoad(selector, functionToExecute) {
+    const existingElement = document.querySelector(selector);
+    if (existingElement != null) {
+      functionToExecute(existingElement);
+      return;
+    }
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (node.nodeType === Node.ELEMENT_NODE) {
+            const element = node;
+            if (element.matches(selector)) {
+              observer.disconnect();
+              functionToExecute(element);
+            }
+          }
+        });
+      });
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+  }
+  ApplyAnimation(element, animationName, duration, timing, direction) {
+    element.style.animation = `${animationName} ${duration}ms ${timing} both ${direction}`;
+    setTimeout(() => {
+      element.style.animation = "";
+      if (direction == "normal") {
+        element.hidden = true;
+      }
+    }, duration);
+    if (direction == "reverse") {
+      let handleAnimation2 = function(event) {
+        if (event.animationName == animationName && currentAnimation != null) {
+          const animationKeyframes = currentAnimation.effect;
+          const kfValues = Object.values(animationKeyframes.getKeyframes()[0]);
+          const kfKeys = Object.keys(animationKeyframes.getKeyframes()[0]);
+          const animationProperties = kfValues.slice(3, kfValues.length - 1);
+          const animationKeys = kfKeys.slice(3, kfValues.length - 1);
+          for (let i = 0; i < animationKeys.length; i++) {
+            const animationKey = animationKeys[i].toString();
+            const animationProperty = animationProperties[i].toString();
+            element.style.setProperty(animationKey, animationProperty);
+          }
+          element.style.animation = "";
+          element.removeEventListener("animationend", handleAnimation2);
+        }
+      };
+      var handleAnimation = handleAnimation2;
+      let currentAnimation = null;
+      element.getAnimations().forEach((animation) => {
+        if (currentAnimation == null && animation.id == animationName) {
+          currentAnimation = animation;
+        }
+      });
+      element.addEventListener("animationend", handleAnimation2);
+    }
+  }
+};
+
+// src/classes/KeyFrameCustom.ts
+var KeyFrameCustom = class extends KeyFrameBase {
+  animationName;
+  constructor(animationName, duration, timing = "linear") {
+    super(duration, timing);
+    this.animationName = animationName;
+  }
+  handle(direction, mainElement) {
+    mainElement.hidden = false;
+    this.ApplyAnimation(mainElement, this.animationName, this.duration, this.timing, direction);
+  }
+};
+
+// src/classes/KeyFramePreset.ts
+var KeyFramePreset = class extends KeyFrameCustom {
+  constructor(kfType, duration, timing = "linear") {
+    const animationMap = {
+      fade: "fade",
+      fadeaway: "fadeaway",
+      fadetoleft: "fadetoleft",
+      fadetoright: "fadetoright"
+    };
+    super(animationMap[kfType], duration, timing);
+  }
+  handle(direction, mainElement) {
+    super.handle(direction, mainElement);
+  }
+};
+
+// src/classes/MultiElementAnimation.ts
+var MultiElementAnimation = class extends KeyFrameBase {
+  animateableObjects;
+  mainElementAnimation;
+  constructor(animateableObjects, duration, timing = "linear", mainElementAnimation = "") {
+    super(duration, timing);
+    this.animateableObjects = animateableObjects;
+    this.mainElementAnimation = mainElementAnimation;
+  }
+  handle(direction, mainElement) {
+    let timing = this.timing;
+    for (const [selector, animationName] of Object.entries(this.animateableObjects)) {
+      mainElement.querySelectorAll(selector).forEach(
+        (element) => {
+          this.ApplyAnimation(element, animationName, this.duration, timing, direction);
+        }
+      );
+    }
+    if (this.mainElementAnimation != "") {
+      this.ApplyAnimation(mainElement, this.mainElementAnimation, this.duration, timing, direction);
+    }
+  }
+};
+
+// src/classes/OverlayBase.ts
+var OverlayBase = class {
+  duration;
+  timing;
+  color;
+  constructor(duration, color, timing = "linear") {
+    this.duration = duration;
+    this.color = color;
+    this.timing = timing;
+  }
+  handle(direction, mainElement) {
+  }
+  hidePage(options) {
+    const mainContent = document.getElementById(options.mainContentIdName);
+    if (document.getElementById(options.pageBlockerId)) {
+      const pageBlockerElement = document.getElementById(options.pageBlockerId);
+      pageBlockerElement.style.cssText = `position: absolute; width: 100%; height: 100%; z-index: 100; top: 0; background-color: ${this.color}`;
+      return;
+    }
+    for (const ele of document.getElementsByClassName("pagewave-overlay-div")) {
+      ele.remove();
+    }
+    const pageBlocker = document.createElement("div");
+    pageBlocker.id = options.pageBlockerId;
+    pageBlocker.style.cssText = `position: absolute; width: 100%; height: 100%; z-index: 100; top: 0; background-color: ${this.color}`;
+    mainContent.append(pageBlocker);
+  }
+  revealPage(options) {
+    const pageBlocker = document.getElementById(options.pageBlockerId);
+    const mainElement = document.getElementById(options.mainContentIdName);
+    if (mainElement) {
+      mainElement.hidden = false;
+    }
+    if (pageBlocker) {
+      pageBlocker.style.cssText = "";
+    } else {
+      this.waitForElementLoad(
+        `#${options.pageBlockerId}`,
+        (element) => {
+          element.style.cssText = "";
+        }
+      );
+    }
+  }
+  waitForElementLoad(selector, functionToExecute) {
+    const existingElement = document.querySelector(selector);
+    if (existingElement != null) {
+      functionToExecute(existingElement);
+      return;
+    }
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (node.nodeType === Node.ELEMENT_NODE) {
+            const element = node;
+            if (element.matches(selector)) {
+              observer.disconnect();
+              functionToExecute(element);
+            }
+          }
+        });
+      });
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+  }
+};
+
+// src/classes/OverlayCustom.ts
+var OverlayCustom = class extends OverlayBase {
+  divAnimationObject;
+  mainElementAnimation;
+  constructor(divAnimationObject, duration, color, timing = "linear", mainElementAnimation = null) {
+    super(duration, color, timing);
+    this.divAnimationObject = divAnimationObject;
+    this.mainElementAnimation = mainElementAnimation;
+  }
+  handle(direction, mainElement) {
+    for (const ele of document.getElementsByClassName("pagewave-overlay-div")) {
+      ele.remove();
+    }
+    const root = document.documentElement;
+    root.style.setProperty("--div-color", this.color);
+    for (const [className, animationName] of Object.entries(this.divAnimationObject)) {
+      const divElement = document.createElement("div");
+      divElement.className = className + " pagewave-overlay-div";
+      divElement.style.animation = `${animationName} ${this.duration}ms ${this.timing} both ${direction}`;
+      divElement.style.backgroundColor = this.color;
+      divElement.style.position = "absolute";
+      mainElement.appendChild(divElement);
+      setTimeout(() => {
+        if (divElement.parentElement == mainElement) {
+          mainElement.removeChild(divElement);
+        }
+      }, this.duration);
+    }
+    if (this.mainElementAnimation !== null) {
+      this.mainElementAnimation.handle(direction, mainElement);
+    }
+  }
+};
+
+// src/classes/OverlayPreset.ts
+var OverlayPreset = class extends OverlayCustom {
+  constructor(oType, duration, color, timing = "linear") {
+    const overlayMap = {
+      slide: { firstOverlayElement: "slide" },
+      inverseSlide: { firstOverlayElement: "inverseSlide" },
+      curtain: { firstOverlayElement: "rightcurtain", secondOverlayElement: "leftcurtain" },
+      rise: { firstOverlayElement: "rise" },
+      fall: { firstOverlayElement: "fall" },
+      bubble: { firstOverlayElement: "bubble" },
+      wipe: { firstOverlayElement: "wipe" }
+    };
+    super(overlayMap[oType], duration, color, timing);
+  }
+  handle(direction, mainElement) {
+    super.handle(direction, mainElement);
+  }
+};
+
+// src/classes/OverlayStyled.ts
+var OverlayStyled = class extends OverlayBase {
+  divAnimationObject;
+  mainElementAnimation;
+  blockerDesign;
+  constructor(divAnimationObject, duration, color, timing = "linear", mainElementAnimation = null, blockerDesign = {}) {
+    super(duration, color, timing);
+    this.divAnimationObject = divAnimationObject;
+    this.mainElementAnimation = mainElementAnimation;
+    this.blockerDesign = blockerDesign;
+  }
+  hidePage(options) {
+    const mainContent = document.getElementById(options.mainContentIdName);
+    if (document.getElementById(options.pageBlockerId)) {
+      const pageBlockerElement = document.getElementById(options.pageBlockerId);
+      pageBlockerElement.style.cssText = `position: absolute; width: 100%; height: 100%; z-index: 100; top: 0; background-color: ${this.color}`;
+      for (const [styleKey, styleValue] of Object.entries(this.blockerDesign)) {
+        pageBlockerElement.style[styleKey] = styleValue;
+      }
+      return;
+    }
+    for (const ele of document.getElementsByClassName("pagewave-overlay-div")) {
+      ele.remove();
+    }
+    const pageBlocker = document.createElement("div");
+    pageBlocker.id = options.pageBlockerId;
+    pageBlocker.style.cssText = `position: absolute; width: 100%; height: 100%; z-index: 100; top: 0; background-color: ${this.color}`;
+    for (const [styleKey, styleValue] of Object.entries(this.blockerDesign)) {
+      pageBlocker.style[styleKey] = styleValue;
+    }
+    mainContent.append(pageBlocker);
+  }
+  handle(direction, mainElement) {
+    for (const ele of document.getElementsByClassName("pagewave-overlay-div")) {
+      ele.remove();
+    }
+    const root = document.documentElement;
+    root.style.setProperty("--div-color", this.color);
+    for (const [className, divProperties] of Object.entries(this.divAnimationObject)) {
+      const divElement = document.createElement("div");
+      divElement.className = className + " pagewave-overlay-div";
+      divElement.style.animation = `${divProperties.animationName} ${this.duration}ms ${this.timing} both ${direction}`;
+      divElement.style.backgroundColor = this.color;
+      divElement.style.position = "absolute";
+      for (const [styleKey, styleValue] of Object.entries(divProperties.cssDesign)) {
+        divElement.style[styleKey] = styleValue;
+      }
+      mainElement.appendChild(divElement);
+      setTimeout(() => {
+      }, this.duration);
+    }
+    if (this.mainElementAnimation !== null) {
+      this.mainElementAnimation.handle(direction, mainElement);
+    }
+  }
+};
+
+// src/classes/PageWave.ts
+var PageWave = class {
+  defaultOptions;
+  finalOptions;
+  routeTransitions;
+  constructor(transitions, options = {}) {
+    this.defaultOptions = {
+      mainContentIdName: "main-content",
+      pageAnimationDelay: 100,
+      runAnimationOnPageReload: false,
+      runAnimationOnCrossSite: false,
+      pageRevealDelay: 0,
+      leavePageOnLink: true,
+      pageBlockerId: "pageBlocker",
+      classToIgnoreLink: "ignore-click",
+      animateIgnoredLinks: false,
+      animateSelfLink: true,
+      loadEvent: "DOMContentLoaded",
+      preferIgnore: false
+    };
+    this.finalOptions = { ...this.defaultOptions, ...options };
+    this.routeTransitions = transitions;
+  }
+  CallHook(hookName, details = {}) {
+    const event = new CustomEvent(hookName, {
+      detail: details
+    });
+    window.dispatchEvent(event);
+  }
+  isNavigationFromSameSite() {
+    const referrer = document.referrer;
+    if (referrer == "") {
+      return false;
+    }
+    const currentHost = window.location.hostname;
+    const referrerHost = new URL(referrer).hostname;
+    return referrerHost === currentHost;
+  }
+  isInternalLink(link) {
+    try {
+      const url = new URL(link, window.location.href);
+      return url.hostname === window.location.hostname;
+    } catch (e) {
+      return false;
+    }
+  }
+  HandleClickAnimation(e, defaultTransitionStyle, leaveFunction = (link) => {
+    window.location.href = link;
+  }, externalLeaveFunction = (link) => {
+    window.location.href = link;
+  }) {
+    if (!e.target || !(e.target instanceof HTMLAnchorElement)) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.target.tagName.toLowerCase() == "a") {
+      const correctLeaveFunction = this.isInternalLink(e.target.href) ? leaveFunction : externalLeaveFunction;
+      const matchedRoute = Array.from(e.target.classList).find((cls) => cls in this.routeTransitions);
+      const shouldIgnore = this.finalOptions.preferIgnore && !matchedRoute || e.target.classList.contains(this.finalOptions.classToIgnoreLink);
+      if (!shouldIgnore && (e.target.href != window.location.href || this.finalOptions.animateSelfLink)) {
+        e.preventDefault();
+        let duration = defaultTransitionStyle.duration;
+        this.CallHook("animateSSP", { style: defaultTransitionStyle, clickEvent: e });
+        if (matchedRoute && matchedRoute in this.routeTransitions) {
+          this.AnimatePageTransition(this.routeTransitions[matchedRoute], "normal");
+          sessionStorage.setItem("animationType", matchedRoute);
+          duration = this.routeTransitions[matchedRoute].duration;
+        } else {
+          this.AnimatePageTransition(defaultTransitionStyle, "normal");
+          sessionStorage.setItem("animationType", "animation");
+          duration = defaultTransitionStyle.duration;
+        }
+        setTimeout(
+          () => {
+            this.CallHook("animateESP", { style: defaultTransitionStyle, clickEvent: e });
+            if (this.finalOptions.leavePageOnLink) {
+              correctLeaveFunction(e.target.href);
+            }
+          },
+          duration
+        );
+      } else if (e.target.classList.contains(this.finalOptions.classToIgnoreLink) || e.target.href == window.location.href && !this.finalOptions.animateSelfLink) {
+        sessionStorage.setItem("animationType", "ignore");
+        if (this.finalOptions.leavePageOnLink) {
+          correctLeaveFunction(e.target.href);
+        }
+      }
+    }
+  }
+  ListenForChange(defaultTransitionStyle, leaveFunction = (link) => {
+    window.location.href = link;
+  }) {
+    this.EndPoint(defaultTransitionStyle);
+    this.SendPoint(defaultTransitionStyle, leaveFunction);
+  }
+  SendPoint(defaultTransitionStyle, leaveFunction = (link) => {
+    window.location.href = link;
+  }, externalLeaveFunction = (link) => {
+    window.location.href = link;
+  }) {
+    const mainElement = document.getElementById(this.finalOptions.mainContentIdName);
+    mainElement.onclick = null;
+    mainElement.addEventListener("click", (e) => {
+      this.HandleClickAnimation(e, defaultTransitionStyle, leaveFunction, externalLeaveFunction);
+    });
+  }
+  getStorageRouteTransition(defaultTransitionStyle) {
+    const storageKey = sessionStorage.getItem("animationType");
+    if (storageKey != null && storageKey != "animation" && storageKey in this.routeTransitions) {
+      return this.routeTransitions[storageKey];
+    }
+    return defaultTransitionStyle;
+  }
+  EndPoint(defaultTransitionStyle) {
+    defaultTransitionStyle = this.getStorageRouteTransition(defaultTransitionStyle);
+    defaultTransitionStyle.hidePage(this.finalOptions);
+    const mainElement = document.getElementById(this.finalOptions.mainContentIdName);
+    mainElement.addEventListener(this.finalOptions.loadEvent, (e) => {
+      e.stopPropagation();
+      this.CallHook("animateSEP", { style: defaultTransitionStyle });
+      const doTransitionOnIgnoredLink = this.finalOptions.animateIgnoredLinks || sessionStorage.getItem("animationType") != "ignore";
+      const doAnimateOnReload = window.performance.getEntriesByType("navigation")[0]?.entryType != "reload" || this.finalOptions.runAnimationOnPageReload;
+      const doAnimateOnSameSite = this.isNavigationFromSameSite() || this.finalOptions.runAnimationOnCrossSite;
+      if (doAnimateOnReload && doAnimateOnSameSite && doTransitionOnIgnoredLink) {
+        setTimeout(
+          () => {
+            this.AnimatePageTransition(defaultTransitionStyle, "reverse");
+            setTimeout(
+              () => {
+                this.CallHook("animateEEP", { style: defaultTransitionStyle });
+                defaultTransitionStyle.revealPage(this.finalOptions);
+              },
+              this.finalOptions.pageRevealDelay
+            );
+          },
+          this.finalOptions.pageAnimationDelay
+        );
+      } else {
+        this.CallHook("animateEPNA", { style: defaultTransitionStyle });
+        defaultTransitionStyle.revealPage(this.finalOptions);
+      }
+    }, { once: true });
+  }
+  CallEndPoint() {
+    const dispatchEvent = new Event(this.finalOptions.loadEvent);
+    document.getElementById(this.finalOptions.mainContentIdName).dispatchEvent(dispatchEvent);
+  }
+  AnimatePageTransition(aStyle, direction = "normal") {
+    const mainElement = document.getElementById(this.finalOptions.mainContentIdName);
+    if (direction == "normal") {
+      this.CallHook("animateSF", { style: aStyle, ele: mainElement });
+    } else if (direction == "reverse") {
+      this.CallHook("animateSR", { style: aStyle, ele: mainElement });
+    }
+    aStyle.handle(direction, mainElement);
+    setTimeout(
+      () => {
+        if (direction == "normal") {
+          this.CallHook("animateEF", { style: aStyle, ele: mainElement });
+        } else if (direction == "reverse") {
+          this.CallHook("animateER", { style: aStyle, ele: mainElement });
+        }
+      },
+      aStyle.duration
+    );
+  }
+};
+
+// src/classes/StyleTransition.ts
+var StyleTransition = class extends KeyFrameBase {
+  styleString;
+  startValue;
+  endValue;
+  constructor(styleString, duration, startValue, endValue, timing = "linear") {
+    super(duration, timing);
+    this.styleString = styleString;
+    this.startValue = startValue;
+    this.endValue = endValue;
+  }
+  handle(direction, mainElement) {
+    if (direction == "normal") {
+      mainElement.style[this.styleString] = this.startValue;
+      mainElement.style.transition = this.styleString.toString() + " " + this.duration.toString() + "ms " + this.timing;
+      mainElement.style[this.styleString] = this.endValue;
+    } else if (direction == "reverse") {
+      mainElement.style[this.styleString] = this.endValue;
+      mainElement.style.transition = this.styleString.toString() + " " + this.duration.toString() + "ms " + this.timing;
+      setTimeout(
+        () => {
+          mainElement.style[this.styleString] = this.startValue;
+        },
+        40
+      );
+    }
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  KeyFrameBase,
+  KeyFrameCustom,
+  KeyFramePreset,
+  MultiElementAnimation,
+  OverlayBase,
+  OverlayCustom,
+  OverlayPreset,
+  OverlayStyled,
+  PageWave,
+  StyleTransition
+});
+//# sourceMappingURL=index.js.map