Custom Event handling methods as solution to circular dependencies

[bozdoz]

Add events to deal with circular dependencies; added some type annotations and definitions; cleaned up some methods.

Also, events could make for a nicer/more flexible API, going forward.

Think of this line:

  // signal to all listeners that introjs has exited
  this.fire('exit');

  // check if any callback is defined
  if (this._introExitCallback !== undefined) {
    this._introExitCallback.call(this);
  }

Devs can add all the introJs.on('exit') handlers they want.

[github-actions[bot]]

Size Change: +3.09 kB (11%) ⚠️

Total Size: 27.3 kB

Filename	Size	Change
dist/intro.js	18.9 kB	+2.14 kB (11%)	⚠️
dist/minified/intro.min.js	8.41 kB	+957 B (11%)	⚠️

_{compressed-size-action}

[bozdoz]

I really like this idea but I believe we should still support the introjs(...).oncomplete(fn => ...) notion as well (in addition to introjs(...).of('complete', fn => ...). I don't really want to introduce a massive backward incompatibility. But I can definitely see that this approach can simplify the codebase.

I'll take a look at oncomplete. Did I remove any of that functionality?

[bozdoz]

Just noticing that exitIntro is always called after the oncomplete:

      if (
        this._introItems.length - 1 === this._currentStep &&
        typeof this._introCompleteCallback === "function"
      ) {
        this._introCompleteCallback.call(this);
      }

      exitIntro.call(this, this._targetElement);

maybe we can just put that at the top of exitIntro instead

[afshinm]

I'll take a look at oncomplete. Did I remove any of that functionality?

Sorry no, I sort of assumed the long term plan is to replace the new event handle (intro.on(...)) with the callbacks (intro.on...())?

maybe we can just put that at the top of exitIntro instead

That makes sense @bozdoz.

[bozdoz]

Just noticing that exitIntro is always called after the oncomplete:

      if (
        this._introItems.length - 1 === this._currentStep &&
        typeof this._introCompleteCallback === "function"
      ) {
        this._introCompleteCallback.call(this);
      }

      exitIntro.call(this, this._targetElement);

maybe we can just put that at the top of exitIntro instead

I was wrong about this. It's called if skip button is pressed on the last tip, and if nextStep is called when there is no nextStep. Seems fair to keep it.