Intro.js: Add Steps after start

[ghost]

Hi everyone. Great library. I love it. I have question regarding a situation I'm facing. Is it possible to add intro steps after I have called introJs().start() so I can append them to the existing queue? For example let's say that I have a Menu Component and a Main Component. The Menu Component has been rendered to the screen and the intro has started, but the Main Component has not yet been rendered. It may also have other sub components that might render after a server response. So the Main Component might need to add it's own intro steps and also after a little while, it's subcomponents might need to add their own steps to the already started queue.

Can you please advice.

Thank you,

Andreas.

[pg1671]

I would also like to be able to do this. addStep when called prior to start() seems to replace all existing steps that have been defined as data attributes .. and when calling addStep after start() it does not add the step.

I also tried calling refresh() after adding the new step.

[afshinm]

I think the easiest fix for now is exiting and starting a new tour after adding the new steps. something like: https://jsfiddle.net/8dyxtyof/2/

But the correct solution is to be able to refresh the content of helper layer (buttons, bullets, etc).

[pg1671]

Hi .. thanks will see if this works. The main use case for me is to have a tour defined on elements using the data attributes and then be able to add a final closing step that is not attached to any element in javascript (appears centered in the screen) .. calling addStep seems to clear all the steps defined on the elements via data attributes.

[afshinm]

I will work on refactoring that method into a separate method so that we
can refresh the content manually.

On Sun, Oct 8, 2017 at 8:53 PM, Paul [e-mail] wrote:

Hi .. thanks will see if this works. The main use case for me is to have a
tour defined on elements using the data attributes and then be able to add
a final closing step that is not attached to any element in javascript
(appears centered in the screen) .. calling addStep seems to clear all the
steps defined on the elements via data attributes.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/usablica/intro.js/issues/717#issuecomment-335033288,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AATL1vzFCA8Sk3-hZlWhE-vliwOarLT6ks5sqSgtgaJpZM4N0LAQ
.

[Goddak]

Hi @afshinm

Did you ever get around to completing this?

[TahaMaqbool]

This trick here helped me to jump to a dynamic step after the start.

[Fakerhardcore]

I wrote a little workaround for this problem, maybe it helps someone:

introJs.onbeforechange(function(targetElement) {
      introJs._options.steps.forEach(function (step, key) {
        if(step.element){
          introJs._introItems[key].element = document.querySelector(step.element);
          introJs._introItems[key].position = step.position ? step.position : 'bottom';
        }
      });
    });