Tour Module

Logo Tour library allows you to use selectors to step your user through workflows and introduce them to your application.

Click here for demo

Installation

All public npm packages of Logo Software is at https://www.npmjs.com/~logofe. To install Tour Module:

$ npm set registry https://registry.npmjs.org/
$ npm install @logo-software/tour -s

Just import it to your project of @NgModule import section.

@NgModule({
  imports: [CommonModule, LogoTourModule],
  providers: [ LogoTourService ],
})
export class AppModule {
}

Tour Component

Tour component allows developers to change the options of the walkthrough steps.

<logo-tour></logo-tour>

Tour Service

Tour Service allows you to control Tour module actions on the fly.

• Programatically call next step of the tour

nextStep()

• Programatically call previous step of the tour

backStep()

• Close the tour method with skip callback

skipTour()

• Close the tour without callback

resetTour()

• Start the tour with the tour content

startTour(content: LogoTourContent)

Tour Interfaces

Interfaces lets you to pass correct parameters to the library

• Interface for each tour step item

export interface TourStep {
  /** Selector for element that will be highlighted */
  selector?: string;
  /** Tour title text */
  title?: string;
  /** Tour step text */
  content: string;
  /** Where the tour step will appear next to the selected element */
  orientation?: Orientation | OrientationConfiguration[];
  /** Action that happens when the step is opened */
  action?: () => void;
  /** Action that happens when the step is closed */
  closeAction?: () => void;
  /** Skips this step, this is so you do not have create multiple tour configurations based on user settings/configuration */
  skipStep?: boolean;
  /** Adds some padding for things like sticky headers when scrolling to an element */
  scrollAdjustment?: number;
  /** Adds default padding around tour highlighting. Does not need to be true for highlightPadding to work */
  useHighlightPadding?: boolean;
  /** Adds padding around tour highlighting in pixels, this overwrites the default for this step. Is not dependent on useHighlightPadding being true */
  highlightPadding?: number;
}

• The interface of the tour contents

export interface LogoTourContent {
  /** Identifier for tour */
  tourId: string;
  /** Use orb to start tour */
  useOrb?: boolean;
  /** Steps fo the tour */
  steps: TourStep[];
  /** Function will be called when tour is skipped */
  skipCallback?: (stepSkippedOn: number) => void;
  /** Function will be called when tour is closed */
  closeCallback?: (stepClosedOn: number) => void;
  /** Function will be called when tour is closed for not shown again */
  dontShowCallback?: (stepRejectedOn: number) => void;
  /** Function will be called when tour is completed */
  completeCallback?: () => void;
  /** Minimum size of screen in pixels before the tour is run, if the tour is resized below this value the user will be told to resize */
  minimumScreenSize?: number;
  /** Dialog shown if the window width is smaller than the defined minimum screen size. */
  resizeDialog?: {
    /** Resize dialog title text */
    title?: string;
    /** Resize dialog text */
    content: string;
  }
  /**
   * Prevents the tour from advancing by clicking the backdrop.
   * This should only be set if you are completely sure your tour is displaying correctly on all screen sizes otherwise a user can get stuck.
   */
  preventBackdropFromAdvancing?: boolean;
}

• Interface for Position configuration

export interface OrientationConfiguration {
  /** Where the tour step will appear next to the selected element */
  orientationDirection: Orientation;
  /** When this orientation configuration starts in pixels */
  maximumSize?: number;
}

• Class items of positioning

export class Orientation {
  public static readonly Bottom = 'bottom';
  public static readonly BottomLeft = 'bottom-left';
  public static readonly BottomRight = 'bottom-right';
  public static readonly Center = 'center';
  public static readonly Left = 'left';
  public static readonly Right = 'right';
  public static readonly Top = 'top';
  public static readonly TopLeft = 'top-left';
  public static readonly TopRight = 'top-right';
}

• Enum of the progress indicator position

export enum ProgressIndicatorLocation {
  InsideNextButton = 'inside-next-button',
  TopOfTourBlock = 'top-of-tour-block',
  None = 'none',
}

For API details, please visit http://design.logo.com.tr/#/docs/components/components-overview