Class Velvette

Constructs an object that takes a Config param and can then perform view transitions based on navigations. There are 3 ways to invoke a navigation-based transition:

See Config for the different configuration options.

Constructors

constructor

Properties

#internal

Methods

crossDocument intercept startNavigation

Constructors

constructor

Properties

Private #internal

#internal: {
    findMatchingNav: ((navigation) => null | NavigationInfo);
    findMatchingNavForNavigateEvent: ((event) => null | NavigationInfo);
    startNavigation(nav, afterUpdateCallback, transitionFinished, phase): Promise<void>;
}

Type declaration

  • findMatchingNav: ((navigation) => null | NavigationInfo)
      • (navigation): null | NavigationInfo
      • Private

        Parameters

        • navigation: {
              from: string;
              navigationType: "push" | "replace" | "traverse" | "reload";
              to: string;
              traverseDelta: number;
          }
          • from: string
          • navigationType: "push" | "replace" | "traverse" | "reload"
          • to: string
          • traverseDelta: number

        Returns null | NavigationInfo

  • findMatchingNavForNavigateEvent: ((event) => null | NavigationInfo)
      • (event): null | NavigationInfo

      • Parameters

        Returns null | NavigationInfo

  • startNavigation:function
    • startNavigation(nav, afterUpdateCallback, transitionFinished, phase): Promise<void>

    • Parameters

      • nav: NavigationInfo
      • afterUpdateCallback: PromiseLike<void>
      • transitionFinished: null | PromiseLike<void>
      • phase: "new-only" | "old-only" | "both"

      Returns Promise<void>

Methods

crossDocument

intercept

  • intercept(event, interceptor): Promise<null | ViewTransition>

  • Parameters

    • event: NavigateEvent

      A NavigateEvent

    • interceptor: {
          handler: (() => Promise<void>);
      }
      • handler: (() => Promise<void>)
          • (): Promise<void>

          • Returns Promise<void>

    Returns Promise<null | ViewTransition>

    Example

    const velvette = new Velvette(config);
    window.navigation.addEventListener("navigate", event => {
      if (shouldInterceptEvent(event)) {
          // This would potentially start a transition based on the configuration.
          velvette.intercept(event, {
                 async handler() {
                    // Make actual DOM change
                 }
             });
          });
      }

startNavigation

  • startNavigation(navigation, update): null | ViewTransition

  • Parameters

    • navigation: {
          from: string;
          navigationType: NavigationType;
          to: string;
          traverseDelta: number;
      }
      • from: string

        The previous URL of the navigation

      • navigationType: NavigationType

        The type of navigation (push/replace/reload/traverse)

      • to: string

        The next URL of the navigation

      • traverseDelta: number

        If this is a traverse navigation, the delta. E.g. -1 is "back".

    • update: (() => void | Promise<void>)

      The operation that updates the DOM based on the navigation.

        • (): void | Promise<void>

        • Returns void | Promise<void>

    Returns null | ViewTransition

    Example

    const velvette = new Velvette(config);
    link.addEventListener("click", event => {
        velvette.startNavigation({
            from: document.URL,
            to: event.target.href,
            navigationType: "push",
        }, () => {
           // Make actual DOM change.
        });
    });

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc