Intro.js: [Feature Request] Callbacks on step enter/leave.

[jaesung2061]

Description

I need to open up a sidebar when a step is reached. How can I register a callback on a programmatic

Example (recommended)

introJs().start({
    steps: [
        {intro: 'hello'},
        {
            intro: 'this is a sidebar',
            element: '.sidebar',
            onEnter() {
                openSidebar()
            },
            onExit() {
                closeSidebar()
            },
        },
    ],
})

Also, onBeforeEnter and onBeforeExit would be nice.

If this is already possible, sorry.

[chrismbarr]

I like your idea a lot more, but to make this work for now there's a onchange event that can be hooked into, like this

var intro = introJs();
intro.start({
  steps: [
    {intro: 'hello'},
    {
      intro: 'this is a sidebar',
      element: '#sidebar'
  }]
});

intro.onchange(function(element) {
  if(element.id === 'sidebar') {
    openSidebar();
  } else {
    closeSidebar();
  }
});

It's far from perfect, and very disconnected and hacky, but it's workable.

[jaesung2061]

How can I get the attention of the project owners? It doesn't seem like they're paying attention to the issues. I guess I have to make a pull request?

[chrismbarr]

I'm not sure, it seems like this project is not very active any more. Right now I see over 200 open issues and over 70 pending pull requests.

[bozdoz]

I look over the issues and PRs from time to time, in my inbox, but I haven't had time to sort out a release. Also I need to prioritize certain issues/PRs. I believe Afshin is even busier than I am.

[chrismbarr]

Good to know! Sorry, I didn't mean to sound condescending. I was just worried that no one might be actively viewing any of the issues/PR's. I know you and all the other maintainers are probably busy with all sorts of things, so I'm glad to know that this wonderful project is not abandoned

[hajimurtaza]

I like your idea a lot more, but to make this work for now there's a onchange event that can be hooked into, like this

var intro = introJs();
intro.start({
  steps: [
    {intro: 'hello'},
    {
      intro: 'this is a sidebar',
      element: '#sidebar'
  }]
});

intro.onchange(function(element) {
  if(element.id === 'sidebar') {
    openSidebar();
  } else {
    closeSidebar();
  }
});

It's far from perfect, and very disconnected and hacky, but it's workable.

For future reference

https://stackoverflow.com/questions/39179247/intro-js-not-able-to-fire-function-between-two-stepsplease-check-my-code/42324402#42324402

[schutze]

It would be good if this project received attention to vet and address the hundreds of open issues. I have tried a bunch of tour plugins and this is about the only one that almost supports all of my needs. Like @jaesung2061, I need proper callback hooks to activate datepickers and menu items for some steps.

The existing onchange is very kludgy especially when both next and previous buttons are needed. Most other tour plugins, like Bootstrap Tour, provide lots of callbacks for each step. Intro.js should add or move the onchange, onbeforechange and onafterchange callbacks to the steps option. You should be able to short circuit the event stack to skip a step based on some logic.

[silverhawk184]

Have you tried something like this? (not tested)

var intro = introJs();
intro.start({
    steps: [
        {intro: 'hello'},
        {
            intro: 'this is a sidebar',
            element: '.sidebar',
            onEnter: function() {
                openSidebar()
            },
            onExit: function() {
                closeSidebar()
            },
        },
    ]
});

intro.onchange(function() {
    var prevStepIndex = this._currentStep + ((this._direction=='backward')? 1 : -1);
    if(typeof this._introItems[prevStepIndex] !== 'undefined' && typeof this._introItems[prevStepIndex].onExit === 'function')
        this._introItems[prevStepIndex].onExit();

    if(typeof this._introItems[this._currentStep] !== 'undefined' && typeof this._introItems[this._currentStep].onEnter === 'function')
        this._introItems[this._currentStep].onEnter();
});

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.