Added support to open Shepherd inside <dialog> elements with the correct offset.

[MarkusBordihn]

Fixed #157 with Popper.js implementation.

[RobbieTheWagner]

I'm not super familiar with dialog elements, but wouldn't it be possible someone could have one open, but still want to append to the body instead?

[MarkusBordihn]

Normally open dialog elements having the main focus and getting closed after an specific action is performed like window.confirm() or window.promt().
Example: https://codepen.io/Garbee/pen/EPoaMj

[RobbieTheWagner]

Right, but it is possible you would have an open dialog and still want to not attach your steps to it. I think a better solution to this problem might be to allow passing a context and default to document.body when one is not passed. What do you think?

[MarkusBordihn]

I see the general scenarios:

1. Main window has steps, Dialog has steps.
2. Main window has no steps, Dialog has steps.
3. Main window has steps, Dialog has no steps.

All three scenarios are covered in this case:

1. Steps are attached to body. Dialog gets open. Dialog steps are attached to the Dialog.
2. Dialog gets open. Dialog steps are attached to the Dialog.
3. Steps are attached to body.

Edge Case:
The dialog gets open before the main window adding the steps.
This should theoretical never happen, because such dialog normally only shown on user interaction or after the main content is rendered.

Did I miss anything?

[RobbieTheWagner]

@MarkusBordihn perhaps I was not being clear, but I have opened a PR, in which you can pass renderLocation, as either a string for the selector, or an HTMLElement which allows you to determine the container the step renders in.

That way, we can support rendering in any element, not just handle dialogs, and this gives greater flexibility. Please check it out and let me know if it will work for you #192.

[MarkusBordihn]

@rwwagner90
Thanks for the info. I justed tested #192 with our current implementation and it seems that Propper is not considering the offset correctly for dialog elements.
This means if you provide renderLocation you should provide an options to correct the offset as well.

[RobbieTheWagner]

@MarkusBordihn the same would also be true of this PR, right? Or did I mess something up?

[MarkusBordihn]

@rwwagner90
Yes, it would be the same with this PR. But if your PR includes the options to adjust the offset or something like I could use this for testing and providing an auto correction if there is any interest.

[RobbieTheWagner]

@MarkusBordihn popper.js supports offsets already. Perhaps try changing styles or offsets via popperOptions on the step? https://popper.js.org/popper-documentation.html#modifiers..offset

[MarkusBordihn]

@rwwagner90 I just tested the latest version and it works well with native dialogs if you define the defaultStepOptions together with tippyOptions for e.g.:

let tour = new Shepherd.Tour({
    'defaultStepOptions': {
      'showCancelLink': true,
      'tippyOptions': {
        'appendTo': document.getElementById('id_of_the_dialog_element')
      },
    },
  });

Thanks a lot for improving Shepherd and keep it up to date. ;)

[RobbieTheWagner]

You're welcome @MarkusBordihn! Glad it is working well for you 😃