\n Shepherd is a JavaScript library for guiding users through your app.\n It uses Tippy.js,\n another open source library, to render dialogs for each tour "step".\n
\n \n\n Among many things, Tippy makes sure your steps never end up off screen or cropped by an overflow.\n (Try resizing your browser to see what we mean.)\n
\n\n It also offers a robust API for styling animations of steps\n as they enter and exit the view.\n
', + attachTo: { + element: '.hero-welcome', + on: 'bottom' + }, + buttons: [ + { + action() { + return this.cancel(); + }, + secondary: true, + text: 'Exit' + }, + { + action() { + return this.next(); + }, + text: 'Next' + } + ], + id: 'welcome' + } + ], styleVariables: { shepherdThemePrimary: '#00213b', shepherdThemeSecondary: '#e5e5e5' }, useModalOverlay: true }); - shepherd.addStep({ - text: '\n\n Shepherd is a JavaScript library for guiding users through your app.\n It uses Tippy.js,\n another open source library, to render dialogs for each tour "step".\n
\n \n\n Among many things, Tippy makes sure your steps never end up off screen or cropped by an overflow.\n (Try resizing your browser to see what we mean.)\n
\n\n It also offers a robust API for styling animations of steps\n as they enter and exit the view.\n
', - attachTo: { - element: '.hero-welcome', - on: 'bottom' - }, - buttons: [ - { - action: shepherd.cancel, - secondary: true, - text: 'Exit' + + // These steps should be added via `addSteps` + const steps = [ + { + title: 'Including', + text: 'Including Shepherd is easy! Just include shepherd.js. The styles are bundled with the JS.', + attachTo: { + element: '.hero-including', + on: 'bottom' }, - { - action: shepherd.next, - text: 'Next' - } - ], - id: 'welcome' - }); - shepherd.addStep({ - title: 'Including', - text: 'Including Shepherd is easy! Just include shepherd.js. The styles are bundled with the JS.', - attachTo: { - element: '.hero-including', - on: 'bottom' + buttons: [ + { + action() { + return this.back(); + }, + secondary: true, + text: 'Back' + }, + { + action() { + return this.next(); + }, + text: 'Next' + } + ], + id: 'including' }, - buttons: [ - { - action: shepherd.back, - secondary: true, - text: 'Back' + { + title: 'Creating a Shepherd Tour', + text: 'Creating a Shepherd tour is easy. too! ' + 'Just create a \`Tour\` instance, and add as many steps as you want.', + attachTo: { + element: '.hero-example', + on: 'right' }, - { - action: shepherd.next, - text: 'Next' - } - ], - id: 'including' - }); - shepherd.addStep({ - title: 'Creating a Shepherd Tour', - text: 'Creating a Shepherd tour is easy. too! ' + 'Just create a \`Tour\` instance, and add as many steps as you want.', - attachTo: { - element: '.hero-example', - on: 'right' - }, - buttons: [ - { - action: shepherd.back, - secondary: true, - text: 'Back' - }, - { - action: shepherd.next, - text: 'Next' - } - ], - id: 'creating' - }); - shepherd.addStep({ - title: 'Attaching to Elements', - text: 'Your tour steps can target and attach to elements in DOM (like this step).', - attachTo: { - element: '.hero-example', - on: 'left' + buttons: [ + { + action() { + return this.back(); + }, + secondary: true, + text: 'Back' + }, + { + action() { + return this.next(); + }, + text: 'Next' + } + ], + id: 'creating' }, - buttons: [ - { - action: shepherd.back, - secondary: true, - text: 'Back' + { + title: 'Attaching to Elements', + text: 'Your tour steps can target and attach to elements in DOM (like this step).', + attachTo: { + element: '.hero-example', + on: 'left' }, - { - action: shepherd.next, - text: 'Next' - } - ], - id: 'attaching' - }); + buttons: [ + { + action() { + return this.back(); + }, + secondary: true, + text: 'Back' + }, + { + action() { + return this.next(); + }, + text: 'Next' + } + ], + id: 'attaching' + } + ]; + + shepherd.addSteps(steps); + + // This should add steps after the ones added with `addSteps` shepherd.addStep({ title: 'Centered Shepherd Element', text: 'But attachment is totally optional!\n Without a target, a tour step will create an element that\'s centered within the view. Check out the documentation to learn more.', buttons: [ { - action: shepherd.back, + action() { + return this.back(); + }, secondary: true, text: 'Back' }, { - action: shepherd.next, + action() { + return this.next(); + }, text: 'Next' } ], id: 'centered-example' }); + shepherd.addStep({ title: 'Learn more', text: 'Star Shepherd on Github so you remember it for your next project', @@ -133,12 +165,16 @@ }, buttons: [ { - action: shepherd.back, + action() { + return this.back(); + }, secondary: true, text: 'Back' }, { - action: shepherd.next, + action() { + return this.next(); + }, text: 'Done' } ], diff --git a/docs-src/tutorials/02-usage.md b/docs-src/tutorials/02-usage.md index 9f3bda783..cc44f97bb 100644 --- a/docs-src/tutorials/02-usage.md +++ b/docs-src/tutorials/02-usage.md @@ -108,7 +108,7 @@ const myTour = new Shepherd.Tour(options); - `confirmCancelMessage`: The message to display in the confirm dialog - `defaultStepOptions`: Default options for Steps created through `addStep` - `modalContainer` An optional container element for the modal. If not set, the modal will be appended to `document.body`. -- `steps`: An array of Step instances to initialize the tour with. +- `steps`: An array of step options objects or Step instances to initialize the tour with. - `tourName`: An optional "name" for the tour. This will be appended to the the tour's dynamically generated `id` property -- which is also set on the `body` element as the `data-shepherd-active-tour` attribute whenever the tour becomes active. - `useModalOverlay`: Whether or not steps should be placed above a darkened modal overlay. If true, the overlay will create an opening around the target element so that it can remain interactive. @@ -182,6 +182,13 @@ the step will execute. For example: - `classes`: Extra classes to apply to the `` - `secondary`: A boolean, that when true, adds a `shepherd-button-secondary` class to the button - `action`: A function executed when the button is clicked on + It is automatically bound to the `tour` the step is associated with, so things like `this.next` will + work inside the action. You can use action to skip steps or navigate to specific steps, with something like: + ```javascript + action() { + return this.show('some_step_name'); + } + ``` - `events`: A hash of events to bind onto the button, for example `{'mouseover': function(){}}`. Adding a click event to `events` when you already have an `action` specified is not supported. You can use `events` to skip steps or navigate to specific steps, with something like: diff --git a/src/js/components/shepherd-content/shepherd-footer/index.jsx b/src/js/components/shepherd-content/shepherd-footer/index.jsx index 6b881a825..a8a83cb87 100644 --- a/src/js/components/shepherd-content/shepherd-footer/index.jsx +++ b/src/js/components/shepherd-content/shepherd-footer/index.jsx @@ -9,14 +9,19 @@ export default class ShepherdFooter extends Component { const { buttons } = step.options; return ; } - _addButtons(buttons, classPrefix, styles) { + _addButtons(buttons, classPrefix, step, styles) { if (buttons) { return buttons.map((config) => { - return