Attach tour on lazy loading elements like modals

[ehausen]

The tour seems to check if the if the element for a tour step exist on the page.

What if the application happens to load some partials by javascript, for example a modal that does not exist on page right away. So how to implement a tour for modal content?

[jabbett]

Hi, @ehausen! I can think of a couple workarounds for you.

1. When the tour gets loaded into the page, it attempts to run. If the first step is meant to attach to an element, the tour code will check if that element is present first. So you could build a tour such that its first step isn't attached to an element, and maybe that provides enough time for your javascript-loaded partial to appear before a subsequent step tries to attach itself.
2. Abraham creates a global JavaScript variable called "tour". In your partial, you could include a little JavaScript snippet that runs tour.start(); and that will try to start the tour again. Only trouble is that you may end up with multiple visible tours.

The surest solution will be when Abraham supports manually-triggered tours, though I can't say when that might be available.

[ehausen]

But what I want to trigger the tour only when user opens the modal the first time ever?

[jabbett]

Hi, @ehausen. Abraham now supports manually-triggered tours:

https://github.com/actmd/abraham#automatic-vs-manual-tours

...so you can define your tour as trigger: manual and then write your own logic for when to make it appear.

While I don't officially recommend it, I don't think there's anything stopping you from using the AbrahamHistory model directly to track this tour's status.

See AbrahamHelper.abraham_tour for how we fetch tours for the current controller/action.

Here's how we save a tour completion via AJAX in _abraham.html.erb:

fetch("/abraham_histories/", {
  method: "POST",
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    authenticity_token: '<%= form_authenticity_token %>',
    controller_name: '<%= controller_path %>',
    action_name: '<%= action_name %>',
    tour_name: '<%= tour_name %>'
  })
});

Good luck! :)