intro.js
Version:
User Onboarding and Product Walkthrough Library
275 lines (274 loc) • 9.18 kB
TypeScript
import { TourStep } from "./steps";
import { Package } from "../package";
import { introAfterChangeCallback, introBeforeChangeCallback, introBeforeExitCallback, introChangeCallback, introCompleteCallback, introExitCallback, introSkipCallback, introStartCallback } from "./callback";
import { TourOptions } from "./option";
/**
* Intro.js Tour class
*/
export declare class Tour implements Package<TourOptions> {
private _steps;
private _currentStepSignal;
private _refreshesSignal;
private _root;
private _direction;
private readonly _targetElement;
private _options;
private _floatingElement;
private readonly callbacks;
private _keyboardNavigationHandler?;
private _refreshOnResizeHandler?;
/**
* Create a new Tour instance
* @param elementOrSelector Optional target element or CSS query to start the Tour on
* @param options Optional Tour options
*/
constructor(elementOrSelector?: string | HTMLElement, options?: Partial<TourOptions>);
/**
* Get a specific callback function
* @param callbackName callback name
*/
callback<K extends keyof typeof this.callbacks>(callbackName: K): (typeof this.callbacks)[K] | undefined;
/**
* Go to a specific step of the tour
* @param step step number
*/
goToStep(step: number): Promise<this>;
/**
* Go to a specific step of the tour with the explicit [data-step] number
* @param stepNumber [data-step] value of the step
*/
goToStepNumber(stepNumber: number): Promise<this>;
/**
* Add a step to the tour options.
* This method should be used in conjunction with the `start()` method.
* @param step step to add
*/
addStep(step: Partial<TourStep>): this;
/**
* Add multiple steps to the tour options.
* This method should be used in conjunction with the `start()` method.
* @param steps steps to add
*/
addSteps(steps: Partial<TourStep>[]): this;
/**
* Set the steps of the tour
* @param steps steps to set
*/
setSteps(steps: TourStep[]): this;
/**
* Get all available steps of the tour
*/
getSteps(): TourStep[];
/**
* Get a specific step of the tour
* @param {number} step step number
*/
getStep(step: number): TourStep;
/**
* Returns the underlying state of the current step
* This is an internal method and should not be used outside of the package.
*/
getCurrentStepSignal(): import("../dom").State<number | undefined>;
/**
* Returns the underlying state of the refreshes
* This is an internal method and should not be used outside of the package.
*/
getRefreshesSignal(): import("../dom").State<number>;
/**
* Get the current step of the tour
*/
getCurrentStep(): number | undefined;
/**
* @deprecated `currentStep()` is deprecated, please use `getCurrentStep()` instead.
*/
currentStep(): number | undefined;
resetCurrentStep(): void;
/**
* Set the current step of the tour and the direction of the tour
* @param step
*/
setCurrentStep(step: number): this;
/**
* Increment the current step of the tour (does not start the tour step, must be called in conjunction with `nextStep`)
*/
incrementCurrentStep(): this;
/**
* Decrement the current step of the tour (does not start the tour step, must be in conjunction with `previousStep`)
*/
decrementCurrentStep(): this;
/**
* Get the direction of the tour (forward or backward)
*/
getDirection(): "backward" | "forward";
/**
* Go to the next step of the tour
*/
nextStep(): Promise<this>;
/**
* Go to the previous step of the tour
*/
previousStep(): Promise<this>;
/**
* Check if the current step is the last step
*/
isEnd(): boolean;
/**
* Check if the current step is the last step of the tour
*/
isLastStep(): boolean;
/**
* Get the target element of the tour
*/
getTargetElement(): HTMLElement;
/**
* Set the options for the tour
* @param partialOptions key/value pair of options
*/
setOptions(partialOptions: Partial<TourOptions>): this;
/**
* Set a specific option for the tour
* @param key option key
* @param value option value
*/
setOption<K extends keyof TourOptions>(key: K, value: TourOptions[K]): this;
/**
* Get a specific option for the tour
* @param key option key
*/
getOption<K extends keyof TourOptions>(key: K): TourOptions[K];
/**
* Clone the current tour instance
*/
clone(): ThisType<this>;
/**
* Returns true if the tour instance is active
*/
isActive(): boolean;
/**
* Returns true if the tour has started
*/
hasStarted(): boolean;
/**
* Set the `dontShowAgain` option for the tour so that the tour does not show twice to the same user
* This is a persistent option that is stored in the browser's cookies
*
* @param dontShowAgain boolean value to set the `dontShowAgain` option
*/
setDontShowAgain(dontShowAgain: boolean): this;
/**
* Enable keyboard navigation for the tour
*/
enableKeyboardNavigation(): this;
/**
* Disable keyboard navigation for the tour
*/
disableKeyboardNavigation(): this;
/**
* Enable refresh on window resize for the tour
*/
enableRefreshOnResize(): void;
/**
* Disable refresh on window resize for the tour
*/
disableRefreshOnResize(): void;
/**
* Append the floating element to the target element.
* Floating element is a helper element that is used when the step does not have a target element.
* For internal use only.
*/
appendFloatingElement(): Element;
/**
* Create the root element for the tour
*/
private createRoot;
/**
* Deletes the root element and recreates it
*/
private recreateRoot;
/**
* Starts the tour and shows the first step
*/
start(): Promise<this>;
/**
* Exit the tour
* @param {boolean} force whether to force exit the tour
*/
exit(force?: boolean): Promise<this>;
/**
* Refresh the tour
* @param {boolean} refreshSteps whether to refresh the tour steps
*/
refresh(refreshSteps?: boolean): this;
/**
* @deprecated onbeforechange is deprecated, please use onBeforeChange instead.
*/
onbeforechange(callback: introBeforeChangeCallback): this;
/**
* Add a callback to be called before the tour changes steps
* @param {Function} callback callback function to be called
*/
onBeforeChange(callback: introBeforeChangeCallback): this;
/**
* @deprecated onchange is deprecated, please use onChange instead.
*/
onchange(callback: introChangeCallback): void;
/**
* Add a callback to be called when the tour changes steps
* @param {Function} callback callback function to be called
*/
onChange(callback: introChangeCallback): this;
/**
* @deprecated onafterchange is deprecated, please use onAfterChange instead.
*/
onafterchange(callback: introAfterChangeCallback): void;
/**
* Add a callback to be called after the tour changes steps
* @param {Function} callback callback function to be called
*/
onAfterChange(callback: introAfterChangeCallback): this;
/**
* @deprecated oncomplete is deprecated, please use onComplete instead.
*/
oncomplete(callback: introCompleteCallback): this;
/**
* Add a callback to be called when the tour is completed
* @param {Function} callback callback function to be called
*/
onComplete(callback: introCompleteCallback): this;
/**
* @deprecated onstart is deprecated, please use onStart instead.
*/
onstart(callback: introStartCallback): this;
/**
* Add a callback to be called when the tour is started
* @param {Function} callback callback function to be called
*/
onStart(callback: introStartCallback): this;
/**
* @deprecated onexit is deprecated, please use onExit instead.
*/
onexit(callback: introExitCallback): this;
/**
* Add a callback to be called when the tour is exited
* @param {Function} callback callback function to be called
*/
onExit(callback: introExitCallback): this;
/**
* @deprecated onskip is deprecated, please use onSkip instead.
*/
onskip(callback: introSkipCallback): this;
/**
* Add a callback to be called when the tour is skipped
* @param {Function} callback callback function to be called
*/
onSkip(callback: introSkipCallback): this;
/**
* @deprecated onbeforeexit is deprecated, please use onBeforeExit instead.
*/
onbeforeexit(callback: introBeforeExitCallback): this;
/**
* Add a callback to be called before the tour is exited
* @param {Function} callback callback function to be called
*/
onBeforeExit(callback: introBeforeExitCallback): this;
}