From 2f009508a74547165e43d8613d280e93aed21e4d Mon Sep 17 00:00:00 2001 From: Robert Wagner Date: Tue, 10 Jul 2018 20:30:47 -0400 Subject: [PATCH] Add renderLocation option Closes #191 --- index.md | 2 ++ src/js/shepherd.js | 12 +++++++++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/index.md b/index.md index 29275d37e..14fd79b45 100644 --- a/index.md +++ b/index.md @@ -176,6 +176,8 @@ to disable. Each button in the array is an object of the format: - `advanceOn`: An action on the page which should advance shepherd to the next step. It can be of the form `"selector event"`, or an object with those properties. For example: `".some-element click"`, or `{selector: '.some-element', event: 'click'}`. It doesn't have to be an event inside the tour, it can be any event fired on any element on the page. You can also always manually advance the Tour by calling `myTour.next()`. +- `renderLocation`: An `HTMLElement` or selector string of the element you want the tour step to render in. Most of the time, you will +not need to pass anything, and it will default to `document.body`, but this is needed for `` and might as well support passing anything. - `showCancelLink`: Should a cancel "✕" be shown in the header of the step? - `scrollTo`: Should the element be scrolled to when this step is shown? - `when`: You can define show, hide, etc events inside when. For example: diff --git a/src/js/shepherd.js b/src/js/shepherd.js index a01e28860..65f349ae3 100644 --- a/src/js/shepherd.js +++ b/src/js/shepherd.js @@ -531,7 +531,17 @@ class Step extends Evented { content.appendChild(footer); } - document.body.appendChild(this.el); + const { renderLocation } = this.options; + + if (renderLocation) { + if (renderLocation instanceof HTMLElement) { + renderLocation.appendChild(this.el); + } else if (typeof renderLocation === 'string') { + document.querySelector(renderLocation).appendChild(this.el); + } + } else { + document.body.appendChild(this.el); + } this.setupPopper();