Step delay/event #241

Closed
alexcasalboni opened this Issue Apr 10, 2014 · 11 comments

Projects

None yet

6 participants

@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 sorich87 added the feature label Apr 18, 2014
@sorich87
Owner

Great idea! Feel free to submit a pull request.

@s7anley
Contributor
s7anley commented Apr 19, 2014

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
Owner

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 sorich87 was assigned by LostCrew Apr 27, 2014
@LostCrew LostCrew added this to the 1.0.0 milestone Apr 27, 2014
@sorich87 sorich87 assigned s7anley and unassigned sorich87 May 12, 2014
@sorich87
Owner

@s7anley still working on this?

@s7anley
Contributor
s7anley commented May 12, 2014

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

@aarnwri
aarnwri commented Jun 4, 2014

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 LostCrew assigned LostCrew and unassigned s7anley Jul 6, 2014
@LostCrew
Collaborator
LostCrew commented Jul 6, 2014

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

@LostCrew LostCrew closed this Jul 6, 2014
@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
Collaborator
LostCrew commented Jul 8, 2014

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment