Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom Event handling methods as solution to circular dependencies #1091

Closed
wants to merge 3 commits into from

Conversation

bozdoz
Copy link
Collaborator

@bozdoz bozdoz commented Nov 28, 2020

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.

@bozdoz bozdoz requested a review from afshinm November 28, 2020 23:52
@github-actions
Copy link

github-actions bot commented Nov 28, 2020

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

Copy link
Contributor

@afshinm afshinm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@@ -34,15 +32,6 @@ export default function exitIntro(targetElement, force) {
forEach(overlayLayers, (overlayLayer) => removeChild(overlayLayer));
}

//remove all helper layers
const helperLayer = targetElement.querySelector(".introjs-helperLayer");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why we don't need this anymore?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removed in another file

@@ -55,15 +44,13 @@ export default function exitIntro(targetElement, force) {

removeShowElement();

//clean listeners
DOMEvent.off(window, "keydown", onKeyDown, this, true);
DOMEvent.off(window, "resize", onResize, this, true);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we handling these somewhere else?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh nvm, just saw the off handler. nice

DOMEvent.off(window, "keydown", onKeyDown, this, true);
DOMEvent.off(window, "resize", onResize, this, true);
// signal to all listeners that introjs has exited
this.fire('exit');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

@bozdoz
Copy link
Collaborator Author

bozdoz commented Nov 29, 2020

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
Copy link
Collaborator Author

bozdoz commented Nov 29, 2020

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
Copy link
Contributor

afshinm commented Nov 29, 2020

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
Copy link
Collaborator Author

bozdoz commented Nov 30, 2020

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.

@bozdoz bozdoz closed this May 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants