Step delay/event

[alexcasalboni]

Would you mind adding a customizable delay option for each step?

This may be required in case some rendering (or toggling) operation needs to be performed for the next-step element to be available (i.e. both in the DOM and visible).

A more complicated alternative could include a custom event binding (on the step element) in order to trigger the relative step.

[sorich87]

Great idea! Feel free to submit a pull request.

[s7anley]

I really wanted to make PR for this feature, but I don't use CoffeeScript and it's impossible for me to figure out how to properly write it.

setTimeout($.proxy(function() {
    this._callOnPromiseDone(promise, showStepHelper);
    return promise;
}, this), step.delay);

Can you help me with this @sorich87?

[sorich87]

Should it be:

setTimeout($.proxy(function() {
    this._callOnPromiseDone(promise, showStepHelper);
}, this), step.delay);

return promise;

so in CoffeeScript:

setTimeout =>
  @_callOnPromiseDone promise, showStepHelper
, step.delay

promise

Feel free to add me on Skype for more real-time communication. 😃

[sorich87]

@s7anley still working on this?

[s7anley]

Yes, just didn't have time to finish it. I will try this week.

[aarnwri]

Was this feature added? I couldn't find it... Also thought I would mention (since workarounds for issue #233 didn't work for me) how I got around it...

var hidden = "<div style=\"display: hidden\"></div>";

tour.addStep({
  title: "delay",
  element: previous_step_el,
  template: hidden,
  duration: timeNeeded
});

[LostCrew]

@alexcasalboni implemented in develop, coming out in v1.0.0.
check af2f716.

[alexcasalboni]

Awesome! :) @LostCrew
As i mentioned in the initial proposal it could be even more flexible, having showStepHelper triggered by a step-customizable event.
Alternatively, another useful (boolean) option would be lazyElement: true|false, so that I can bind the step to a not-yet-existing element and the tour will wait for it to appear in the DOM (not skipping the step!).
What do you think?

[LostCrew]

@alexcasalboni good point on the first one.
about the second one, why not set orphan: true, not specify any element and manually call showStep(stepIndex) on element loaded?
overall, it feels to me a very specific case that bootstrap-tour shouldn't support natively, but i might be wrong.

[alexcasalboni]

@LostCrew sure, I'm using the workaround you proposed but it's not perfect if you really need a backdrop on a not-yet-visible element, and it always forces me to be aware of the stepIndex (which may vary whenever I update the tour structure, breaking my code).

I understand it's not a common case for static pages, but it'd be very useful for a very interactive web application tours (wherever you've ajax or a complex UI).

[Simao1080749]

@sorich87 Hi, sorry if I'm talking about a non-issue, but I think the delay option is not implemented correctly.
Using my app as example, I have several elements that needs to be displayed before the step highlights them, so I puted a delay in each step. The problem is, since the backdrop is attached to the element, navigating between those elements will remove and add the backdrop, looking like the steps are being flashed in the page. I think we should have an option to keep the backdrop opacity globally to prevent the issues I mentioned above.
If I am doing something wrong and this option already exists, please tell me so I could add it to my app.

I hope I had expressed myself clearly. Thanks in advance for any feedback.