diff --git a/demo/scripts/demo.js b/demo/scripts/demo.js index fbe35143a3d0aceed4bd366adee351da6e392f3b..99026c7c84c1ed78855bfb8cb885b868c64115a3 100644 --- a/demo/scripts/demo.js +++ b/demo/scripts/demo.js @@ -1,5 +1,5 @@ /* eslint-disable */ -document.addEventListener("DOMContentLoaded", function () { +document.addEventListener('DOMContentLoaded', function () { const tourSteps = [ { @@ -8,7 +8,7 @@ document.addEventListener("DOMContentLoaded", function () { title: 'Before we start', description: 'This is just one use-case, make sure to check out the rest of the docs below.', nextBtnText: 'Okay, Start!' - } + }, }, { element: '#logo_emoji', popover: { @@ -102,7 +102,7 @@ document.addEventListener("DOMContentLoaded", function () { animate: false, opacity: 0.8, padding: 5, - showButtons: true, + showButtons: true }); boringTourDriver.defineSteps(tourSteps); @@ -145,7 +145,7 @@ document.addEventListener("DOMContentLoaded", function () { ///////////////////////////////////////////// // Form focus examples ///////////////////////////////////////////// - const focusDriver = new Driver({padding: 0}); + const focusDriver = new Driver({ padding: 0 }); const inputIds = ['creation-input', 'creation-input-2', 'creation-input-3', 'creation-input-4']; inputIds.forEach(inputId => { // Highlight the section on focus @@ -375,7 +375,7 @@ document.addEventListener("DOMContentLoaded", function () { featureIntroductionDriver.start(); }); - const newURL = location.href.split("?")[0]; + const newURL = location.href.split('?')[0]; if (newURL !== location.href) { window.location = newURL; window.location.href = newURL; diff --git a/src/index.js b/src/index.js index 9fa675d0168c06fa4365b67459acfa6e1d627d11..eff9a9a7ba1634fa58e1c93b9bf83efecba7ceb9 100644 --- a/src/index.js +++ b/src/index.js @@ -45,6 +45,10 @@ export default class Driver { }, onReset: () => { // When overlay is about to be cleared }, + onNext: () => { // When next button is clicked + }, + onPrevious: () => { // When previous button is clicked + }, ...options, }; @@ -166,12 +170,21 @@ export default class Driver { * @public */ movePrevious() { - this.currentStep -= 1; - if (this.steps[this.currentStep]) { - this.overlay.highlight(this.steps[this.currentStep]); - } else { + const currentStep = this.steps[this.currentStep]; + const previousStep = this.steps[this.currentStep - 1]; + + if (!previousStep) { this.reset(); + return; } + + // If there is an event binding on the current step + if (currentStep.options.onPrevious) { + currentStep.options.onPrevious(); + } + + this.overlay.highlight(previousStep); + this.currentStep -= 1; } /** @@ -180,12 +193,21 @@ export default class Driver { * @public */ moveNext() { - this.currentStep += 1; - if (this.steps[this.currentStep]) { - this.overlay.highlight(this.steps[this.currentStep]); - } else { + const currentStep = this.steps[this.currentStep]; + const nextStep = this.steps[this.currentStep + 1]; + + if (!nextStep) { this.reset(); + return; + } + + // If there is an event binding on the current step + if (currentStep.options.onNext) { + currentStep.options.onNext(); } + + this.overlay.highlight(nextStep); + this.currentStep += 1; } /** @@ -285,12 +307,10 @@ export default class Driver { if (isStepDefinition) { querySelector = currentStep.element; - elementOptions = { - ...this.options, - ...currentStep, - }; + elementOptions = { ...this.options, ...currentStep }; } + // If the given element is a query selector or a DOM element? const domElement = isDomElement(querySelector) ? querySelector : this.document.querySelector(querySelector); if (!domElement) { console.warn(`Element to highlight ${querySelector} not found`);