Class Tour

A Tour that shows a series of guided steps.

Param: config

The configuration of the Tour

Tutorial

tours

Hierarchy (view full)

Properties

config targetElement fadeElement overlayElement #stepIndex STATUS HIGHLIGHT_PADDING #activeTour

Accessors

id title description namespace key steps currentStep stepIndex hasNext hasPrevious canStart status tourInProgress activeTour

Methods

complete exit reset start next previous progress _reloadProgress _getTargetElement _preStep _postStep _renderStep _onButtonClick _saveProgress _loadProgress onMovementAction fromJSON

Properties

config

config: TourConfig

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

targetElement

targetElement: HTMLElement

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

fadeElement

fadeElement: HTMLElement

The HTMLElement that fades out the rest of the screen

overlayElement

overlayElement: any

The HTMLElement that blocks input while a Tour is active

Private #stepIndex

#stepIndex: number = -1

Static STATUS

STATUS: {
    UNSTARTED: string;
    IN_PROGRESS: string;
    COMPLETED: string;
} = ...

Type declaration

  • UNSTARTED: string
  • IN_PROGRESS: string
  • COMPLETED: string

Static HIGHLIGHT_PADDING

HIGHLIGHT_PADDING: number = 10

Padding around a Highlighted Element

Static Private #activeTour

#activeTour: Tour = null

A singleton reference which tracks the currently active Tour.

Accessors

id

  • get id(): string

  • The unique identifier of the tour.

    Returns string

title

  • get title(): string

  • The human-readable title for the tour.

    Returns string

description

  • get description(): string

  • The human-readable description of the tour.

    Returns string

namespace

  • get namespace(): string

  • The package namespace for the tour.

    Returns string

key

  • get key(): string

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

    Returns string

steps

currentStep

  • get currentStep(): TourStep

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

    Returns TourStep

stepIndex

  • get stepIndex(): number

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

    Returns number

hasNext

  • get hasNext(): boolean

  • Returns True if there is a next TourStep

    Returns boolean

hasPrevious

  • get hasPrevious(): boolean

  • Returns True if there is a previous TourStep

    Returns boolean

canStart

  • 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

status

  • get status(): string

  • The current status of the Tour

    Returns string

Static tourInProgress

  • get tourInProgress(): boolean

  • Indicates if a Tour is currently in progress.

    Returns boolean

Static activeTour

  • get activeTour(): Tour

  • Returns the active Tour, if any

    Returns Tour

Methods

complete

  • complete(): Promise<any>

  • Advance the tour to a completed state.

    Returns Promise<any>

exit

  • exit(): void

  • Exit the tour at the current step.

    Returns void

reset

  • reset(): Promise<any>

  • Reset the Tour to an un-started state.

    Returns Promise<any>

start

  • start(): Promise<any>

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

    Returns Promise<any>

next

  • next(): Promise<any>

  • Progress the Tour to the next step.

    Returns Promise<any>

previous

  • previous(): Promise<any>

  • Rewind the Tour to the previous step.

    Returns Promise<any>

progress

  • progress(stepIndex): Promise<any>

  • Progresses to a given Step

    Parameters

    • stepIndex: number

      The step to progress to

    Returns Promise<any>

_reloadProgress

  • _reloadProgress(): void
  • Internal

    Reloads the Tour's current step from the saved progress

    Returns void

Protected _getTargetElement

  • _getTargetElement(selector): Element
  • Protected

    Query the DOM for the target element using the provided selector

    Parameters

    • selector: string

      A CSS selector

    Returns Element

    The target element, or null if not found

Protected _preStep

  • _preStep(): Promise<void>
  • Protected

    Set-up operations performed before a step is shown.

    Returns Promise<void>

    Abstract

Protected _postStep

  • _postStep(): Promise<void>
  • Protected

    Clean-up operations performed after a step is completed.

    Returns Promise<void>

    Abstract

Protected _renderStep

  • _renderStep(): Promise<void>
  • Protected

    Renders the current Step of the Tour

    Returns Promise<void>

Private _onButtonClick

  • _onButtonClick(event, buttons): void | Promise<any>
  • Private

    Handle Tour Button clicks

    Parameters

    • event: Event

      A click event

    • buttons: HTMLElement[]

      The step buttons

    Returns void | Promise<any>

Private _saveProgress

  • _saveProgress(): void
  • Private

    Saves the current progress of the Tour to a world setting

    Returns void

Private _loadProgress

  • _loadProgress(): number
  • Private

    Returns the User's current progress of this Tour

    Returns number

Static onMovementAction

  • onMovementAction(movementDirections): boolean

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

    Parameters

    • movementDirections: string[]

      The Directions being moved in

    Returns boolean

Static fromJSON

  • fromJSON(filepath): Promise<Tour>

  • Creates and returns a Tour by loading a JSON file

    Parameters

    • filepath: string

      The path to the JSON file

    Returns Promise<Tour>

Settings

Member Visibility

Theme

On This Page

configtargetElementfadeElementoverlayElement#stepIndexSTATUSHIGHLIGHT_PADDING#activeTouridtitledescriptionnamespacekeystepscurrentStepstepIndexhasNexthasPreviouscanStartstatustourInProgressactiveTourcompleteexitresetstartnextpreviousprogress_reloadProgress_getTargetElement_preStep_postStep_renderStep_onButtonClick_saveProgress_loadProgressonMovementActionfromJSON