8.22.0 • Published 11 months ago

@covalent/guided-tour v8.22.0

Weekly downloads
160
License
MIT
Repository
github
Last release
11 months ago

Guided Tour

A wrapper around Shepherd with extra functionality. Make sure to check out the official shepherd docs.

API Summary

Methods

  • registerTour(tourName: string, tour: IGuidedTour | string): Promise
    • Create a tour
  • startTour(tourName: string): Shepherd.Tour
    • Start a certain tour
  • initializeOnQueryParams(queryParam: string = 'tour'): Observable
    • Listen to query params to launch a tour
  • tourEvent$(str: TourEvents): Observable
    • Observable of tour events
// for reference
export type TourStep = Shepherd.Step.StepOptions;
export type TourStepButton = Shepherd.Step.StepOptionsButton;

export enum ITourEvent {
  'click' = 'click',
  'pointerover' = 'pointerover',
  'keyup' = 'keyup',
  'added' = 'added', // added to DOM
  'removed' = 'removed', // removed from DOM
}

export interface ITourEventOn {
  selector?: string; // css selector
  event?: keyof typeof ITourEvent; // click, pointerover, keyup, added, removed
}

export interface ITourEventOnOptions {
  timeBeforeShow?: number; // delay before step is displayed
  interval?: number; // time between searches for element, defaults to 500ms
}

export interface ITourAbortOn extends ITourEventOn {}

export interface ITourOptions extends Shepherd.Tour.TourOptions {
  abortOn?: ITourAbortOn[]; // events to abort on
}

export interface ITourStepAttachToOptions extends ITourEventOnOptions {
  highlight?: boolean;
  retries?: number; // # num of attempts to find element
  skipIfNotFound?: boolean; // if element is not found after n retries, move on to next step
  else?: string; // if element is not found, go to step with this id
  goBackTo?: string; // back button goes back to step with this id
  skipFromStepCount?: boolean; // show/hide the step count, removes step from total count
}

export interface ITourStepAdvanceOn extends ITourEventOn {}

export interface ITourStepAdvanceOnOptions extends ITourEventOnOptions {
  jumpTo?: string; // next button will jump to step with this id
  allowGoBack?: boolean; // allow back within this step
}

export interface ITourStep extends TourStep {
  attachToOptions?: ITourStepAttachToOptions;
  advanceOnOptions?: ITourStepAdvanceOnOptions;
  advanceOn?: ITourStepAdvanceOn[] | ITourStepAdvanceOn | any;
  abortOn?: ITourAbortOn[];
  count?: number;
}

export interface IGuidedTour extends ITourOptions {
  steps: IGuidedTourStep[];
  finishButtonText?: string; // optionally pass in a localized string; default value is 'finish'
  dismissButtonText?: string; // optionally pass in a localized string; default value is 'cancel tour'
}

export interface IGuidedTourStep extends ITourStep {
  routing?: {
    route: string;
    extras?: NavigationExtras;
  };
}

export enum TourEvents {
  complete = 'complete',
  cancel = 'cancel',
  hide = 'hide',
  show = 'show',
  start = 'start',
  active = 'active',
  inactive = 'inactive',
}

export interface IGuidedTourEvent {
  step: any; // current step tour is showing
  previous: any; // previous step of the tour
  tour: any; // tour object
}

Setup

import { CovalentGuidedTourModule } from '@covalent/guided-tour';

Usage

import { CovalentGuidedTourService } from '@covalent/guided-tour';

const basicDemoTour: IGuidedTour = {
  useModalOverlay: true,
  steps: [
    {
      title: 'Fuel',
      text: 'Here are the fuel levels',
      attachTo: {
        element: '#basic-demo #fuel',
        on: 'top',
      },
    },
    {
      title: 'Oxygen',
      text: 'Here are the Oxygen levels.',
      attachTo: {
        element: '#basic-demo #oxygen',
        on: 'top',
      },
    },
    {
      title: 'Global status',
      text: 'Here you can see the global status of the vehicle. That is all there is to it!',
      attachTo: {
        element: '#basic-demo #status',
        on: 'top',
      },
    },
  ],
};
this._guidedTourService.registerTour('basicDemoTour', basicDemoTour);
this._guidedTourService.startTour('basicDemoTour');
this._guidedTourService
  .tourEvent$(TourEvents.show)
  .subscribe((event: IGuidedTourEvent) => {
    /* event object contains current step, previous step and tour objects */
  });
<div id="basic-demo">
  <button mat-raised-button color="accent" (click)="startTour()">
    Start tour
  </button>
  <meter
    id="fuel"
    min="0"
    max="100"
    low="33"
    high="66"
    optimum="50"
    value="50"
  ></meter>
  <progress id="oxygen" max="100" value="70">70%</progress>
  <marquee id="status">All systems are running smoothly</marquee>
</div>

Running unit tests

Run nx test angular-guided-tour to execute the unit tests.

8.22.0

11 months ago

8.21.2

11 months ago

8.21.1

12 months ago

8.21.0

12 months ago

8.20.2

1 year ago

8.20.3

1 year ago

8.20.4

1 year ago

8.20.5

12 months ago

8.20.6

12 months ago

8.20.7

12 months ago

8.20.8

12 months ago

8.19.1

1 year ago

8.19.0

1 year ago

8.12.2

1 year ago

8.12.3

1 year ago

8.13.0

1 year ago

8.14.0

1 year ago

8.14.2

1 year ago

8.14.1

1 year ago

8.14.4

1 year ago

8.14.3

1 year ago

8.15.0-beta.13

1 year ago

8.15.0-beta.12

1 year ago

8.15.0-beta.11

1 year ago

8.15.0-beta.10

1 year ago

8.15.0

1 year ago

8.15.0-beta.17

1 year ago

8.15.0-beta.16

1 year ago

8.15.0-beta.15

1 year ago

8.15.0-beta.14

1 year ago

4.17.3

1 year ago

4.17.4

1 year ago

4.17.0

1 year ago

4.17.1

1 year ago

8.16.0

1 year ago

8.16.1

1 year ago

8.17.1

1 year ago

8.17.0

1 year ago

8.20.0

1 year ago

8.20.1

1 year ago

8.15.0-beta.4

1 year ago

8.15.0-beta.3

1 year ago

8.15.0-beta.2

1 year ago

8.15.0-beta.1

1 year ago

8.15.0-beta.8

1 year ago

8.15.0-beta.7

1 year ago

8.15.0-beta.6

1 year ago

8.15.0-beta.5

1 year ago

8.15.0-beta.9

1 year ago

8.18.0

1 year ago

8.18.1

1 year ago

8.12.1

1 year ago

8.11.0

1 year ago

8.12.0

1 year ago

8.10.0

1 year ago

8.10.1

1 year ago

8.9.2

1 year ago

8.9.1

1 year ago

8.9.0

1 year ago

8.8.1

1 year ago

8.8.0

1 year ago

8.8.0-beta.1

1 year ago

8.7.0

1 year ago

8.6.1

1 year ago

8.7.0-beta.9

1 year ago

8.7.0-beta.8

1 year ago

8.7.0-beta.7

1 year ago

8.7.0-beta.6

1 year ago

8.7.0-beta.5

1 year ago

8.7.0-beta.4

1 year ago

8.6.0

1 year ago

8.7.0-beta.3

1 year ago

8.7.0-beta.2

1 year ago

8.7.0-beta.1

1 year ago

8.6.0-beta.1

1 year ago

8.5.4

1 year ago

8.5.5

1 year ago

8.5.3

2 years ago

8.5.2

2 years ago

8.5.1

2 years ago

8.4.0

2 years ago

8.5.0

2 years ago

8.3.1

2 years ago

8.4.0-beta.3

2 years ago

8.4.0-beta.2

2 years ago

8.4.0-beta.1

2 years ago

8.3.0

2 years ago

8.3.0-beta.3

2 years ago

8.3.0-beta.2

2 years ago

8.2.1

2 years ago

8.3.0-beta.1

2 years ago

8.2.0-beta.1

2 years ago

8.1.0

2 years ago

8.2.0

2 years ago

8.1.0-beta.9

2 years ago

8.1.0-beta.8

2 years ago

8.1.0-beta.7

2 years ago

8.1.0-beta.6

2 years ago

8.1.0-beta.5

2 years ago

8.1.0-beta.4

2 years ago

8.1.0-beta.3

2 years ago

8.1.0-beta.2

2 years ago

8.1.0-beta.1

2 years ago

7.5.0-beta.4

2 years ago

7.5.0-beta.5

2 years ago

8.0.0

2 years ago

7.4.7

2 years ago

7.4.6

2 years ago

7.4.5

2 years ago

7.4.4

2 years ago

7.4.3

2 years ago

7.5.0-beta.3

2 years ago

6.1.2

2 years ago

6.1.3

2 years ago

7.3.1

2 years ago

7.3.0

2 years ago

7.4.2

2 years ago

7.4.1

2 years ago

7.5.0-beta.2

2 years ago

7.5.0-beta.1

2 years ago

6.2.1

2 years ago

6.2.0

2 years ago

6.2.3

2 years ago

6.2.2

2 years ago

7.4.0-beta.1

2 years ago

7.4.0-beta.2

2 years ago

7.0.0

2 years ago

7.4.0

2 years ago

4.16.3

2 years ago

4.16.0

2 years ago

4.16.1

2 years ago

4.16.2

2 years ago

6.3.0

2 years ago

7.1.0-beta.2

2 years ago

7.1.0-beta.1

2 years ago

7.1.0-beta.3

2 years ago

7.1.1

2 years ago

7.1.0

2 years ago

6.4.0

2 years ago

6.3.0-beta.1

2 years ago

6.3.0-beta.2

2 years ago

6.3.0-beta.3

2 years ago

6.3.0-beta.4

2 years ago

7.2.0

2 years ago

6.1.0

2 years ago

6.1.1

2 years ago

6.0.0-beta.1

2 years ago

6.0.0-beta.2

2 years ago

6.0.1

2 years ago

6.0.0

2 years ago

6.0.3

2 years ago

6.0.2

2 years ago

6.0.5

2 years ago

6.0.4

2 years ago

5.1.0-beta.1

2 years ago

5.0.2

2 years ago

5.0.0-beta.1

3 years ago

5.0.1

2 years ago

5.0.0

2 years ago

4.16.0-beta.2

3 years ago

4.16.0-beta.1

3 years ago

4.12.3

3 years ago

4.12.0

3 years ago

4.10.2

3 years ago

4.12.1

3 years ago

4.14.0

3 years ago

4.12.2

3 years ago

4.15.0

3 years ago

4.11.0

3 years ago

4.13.0

3 years ago

4.7.1

3 years ago

4.6.1

3 years ago

4.6.0

3 years ago

4.8.0

3 years ago

4.6.2

3 years ago

4.5.0

3 years ago

4.7.0

3 years ago

4.4.0

3 years ago

3.2.2

3 years ago

3.2.1

3 years ago

3.2.0

3 years ago

3.2.4

3 years ago

3.2.3

3 years ago

4.2.1

3 years ago

4.3.0

3 years ago

4.1.9

3 years ago

4.1.10

3 years ago

4.1.11

3 years ago

4.1.11-develop.1

3 years ago

4.1.12

3 years ago

4.1.13

3 years ago

4.1.14

3 years ago

4.1.15

3 years ago

4.2.0

3 years ago

4.1.8

3 years ago

4.1.7

3 years ago

4.1.4

3 years ago

4.1.3

3 years ago

4.1.6

3 years ago

4.1.5

3 years ago

4.1.2

3 years ago

4.1.1

3 years ago

4.1.1-develop.1

3 years ago

4.1.0-develop.5

3 years ago

4.1.0-develop.6

3 years ago

4.1.0-develop.7

3 years ago

4.1.0-develop.8

3 years ago

4.1.0-develop.9

3 years ago

4.1.0-develop.2

3 years ago

4.1.0-develop.4

3 years ago

4.1.0-develop.11

3 years ago

4.1.0-develop.10

3 years ago

4.1.0

3 years ago

4.1.1-next.1

3 years ago

4.0.0-beta.4

3 years ago

4.0.0-beta.2

4 years ago

4.1.1-beta.3

4 years ago

0.0.1

4 years ago

3.1.2

4 years ago

4.0.0-beta.1

4 years ago

4.0.0

4 years ago

3.1.2-beta.7

4 years ago

4.0.0-alpha.0

4 years ago

3.1.2-beta.6

4 years ago

3.1.2-beta.4

4 years ago

3.1.1

4 years ago

3.1.1-beta.1

5 years ago

3.1.0

5 years ago

3.1.0-beta.2

5 years ago