A Tour that shows a series of guided steps.

Hierarchy (View Summary)

Constructors

  • Construct a Tour by providing a configuration.

    Parameters

    • config: TourConfig

      The configuration of the Tour

    • Optionaloptions: { id?: string; namespace?: string } = {}

      Additional options for configuring the tour

      • Optionalid?: string

        A tour ID that supercedes TourConfig#id

      • Optionalnamespace?: string

        A tour namespace that supercedes TourConfig#namespace

    Returns Tour

Properties

config: TourConfig

Configuration of the tour. This object is cloned to avoid mutating the original configuration.

fadeElement: HTMLElement

The HTMLElement that fades out the rest of the screen

overlayElement: any

The HTMLElement that blocks input while a Tour is active

targetElement: HTMLElement

The HTMLElement which is the focus of the current tour step.

HIGHLIGHT_PADDING: number = 10

Padding around a Highlighted Element

Accessors

  • get canStart(): boolean

    Return whether this Tour is currently eligible to be started? This is useful for tours which can only be used in certain circumstances, like if the canvas is active.

    Returns boolean

  • get currentStep(): null | TourStep

    Return the current Step, or null if the tour has not yet started.

    Returns null | TourStep

  • get description(): string

    The human-readable description of the tour.

    Returns string

  • get hasNext(): boolean

    Returns True if there is a next TourStep

    Returns boolean

  • get hasPrevious(): boolean

    Returns True if there is a previous TourStep

    Returns boolean

  • get id(): string

    The unique identifier of the tour.

    Returns string

  • get key(): string

    The key the Tour is stored under in game.tours, of the form ${namespace}.${id}

    Returns string

  • get namespace(): string

    The package namespace for the tour.

    Returns string

  • get stepIndex(): null | number

    The index of the current step; -1 if the tour has not yet started, or null if the tour is finished.

    Returns null | number

  • get title(): string

    The human-readable title for the tour.

    Returns string

  • get activeTour(): null | Tour

    Returns the active Tour, if any

    Returns null | Tour

  • get tourInProgress(): boolean

    Indicates if a Tour is currently in progress.

    Returns boolean

Methods

  • Internal

    Reloads the Tour's current step from the saved progress

    Returns void

  • Advance the tour to a completed state.

    Returns Promise<any>

  • Exit the tour at the current step.

    Returns void

  • Progress the Tour to the next step.

    Returns Promise<any>

  • Rewind the Tour to the previous step.

    Returns Promise<any>

  • Progresses to a given Step

    Parameters

    • stepIndex: number

      The step to progress to

    Returns Promise<any>

  • Reset the Tour to an un-started state.

    Returns Promise<any>

  • Start the Tour at its current step, or at the beginning if the tour has not yet been started.

    Returns Promise<any>

  • Protected

    Query the DOM for the target element using the provided selector

    Parameters

    • selector: string

      A CSS selector

    Returns null | Element

    The target element, or null if not found

  • Protected

    Clean-up operations performed after a step is completed.

    Returns Promise<void>

  • Protected

    Set-up operations performed before a step is shown.

    Returns Promise<void>

  • Protected

    Renders the current Step of the Tour

    Returns Promise<void>

  • Creates and returns a Tour by loading a JSON file

    Parameters

    • filepath: string

      The path to the JSON file

    Returns Promise<Tour>

  • Handle a movement action to either progress or regress the Tour.

    Parameters

    • movementDirections: string[]

      The Directions being moved in

    Returns true | void