kamranahmedse / driver.js

A light-weight, no-dependency, vanilla JavaScript engine to drive user's focus across the page
https://driverjs.com
MIT License
22.43k stars 1.01k forks source link

Request to Add Promise Support for Asynchronous Operations in driver.js #513

Open stealthAngel opened 1 month ago

stealthAngel commented 1 month ago

Is it possible to add awaitable tours

sample:

this.driverInstance = driver({});

let isTour = true;
await this.driverInstance.drive();
let isTour = false;

I want this because I need to manage some states during the tour, like activating buttons etc.

stealthAngel commented 1 month ago

After trying to find a workaround i have the following solution although it would be nice to just have a method called driveAsync(){

export class DriverService {
  private driverInstance: Driver;
  private tourPromise: Promise<void> | null = null;
  private resolveTourPromise: (() => void) | null = null;

  constructor() {}

  create(steps: DriveStep[]): void {
    this.driverInstance = driver({
      popoverClass: 'driverjs-theme',
      progressText: 'Step {{current}} of{{total}}',
      prevBtnText: '← Previous',
      nextBtnText: 'Next →',
      doneBtnText: 'Finish',
      showProgress: true,
      steps: steps,
      onDestroyed: () => {
        if (this.resolveTourPromise) {
          this.resolveTourPromise();
        }
      },
    });
  }

  public async startTourAsync(): Promise<void> {
    if (!this.driverInstance) {
      throw new Error(
        'Driver instance not initialized. Call create() with steps first.'
      );
    }

    // Create a new promise for this tour
    this.tourPromise = new Promise<void>((resolve) => {
      this.resolveTourPromise = resolve;
    });

    // Start the tour
    this.driverInstance.drive();

    // Wait for the tour to complete
    return this.tourPromise;
  }
}
// usage
    this.driverService.create(driveSteps); //define your steps here
    await this.driverService.startTourAsync();