diff --git a/README.md b/README.md index 9bd94bf4a..4d380192b 100644 --- a/README.md +++ b/README.md @@ -61,7 +61,10 @@ tour.addStep('example', { title: 'Example Shepherd', text: 'Creating a Shepherd is easy too! Just create ...', attachTo: '.hero-example bottom', - advanceOn: '.docs-link click' + advanceOn: { + selector: '.docs-link', + event: 'click' + } }); tour.start(); diff --git a/index.md b/index.md index 6a06f1b58..76a4ca2bf 100644 --- a/index.md +++ b/index.md @@ -213,9 +213,9 @@ the step will execute. For example: } } ``` -- `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()`. +- `advanceOn`: An action on the page which should advance shepherd to the next step. It should be an object with a string `selector` and an `event` name. +For example: `{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()`. - `highlightClass`: An extra class to apply to the `attachTo` element when it is highlighted (that is, when its step is active). You can then target that selector in your CSS. - `showCancelLink`: Should a cancel "✕" be shown in the header of the step? - `showOn`: A function that, when it returns true, will show the step. If it returns false, the step will be skipped. diff --git a/package.json b/package.json index 0e72dfb64..088f02cca 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,6 @@ "lodash.defer": "^4.1.0", "lodash.iselement": "^4.1.1", "lodash.isobjectlike": "^4.0.0", - "lodash.zipobject": "^4.1.3", "smoothscroll-polyfill": "^0.4.4", "tippy.js": "^4.3.4" }, diff --git a/src/js/step.js b/src/js/step.js index 0ed2187f0..cbd2b1984 100644 --- a/src/js/step.js +++ b/src/js/step.js @@ -54,15 +54,8 @@ export class Step extends Evented { * in the middle of the screen, without an arrow pointing to the target. * @param {HTMLElement|string} options.attachTo.element * @param {string} options.attachTo.on - * @param {Object|string} options.advanceOn An action on the page which should advance shepherd to the next step. - * It can be of the form `"selector event"`: - * ```js - * const new Step(tour, { - * advanceOn: '.some .selector-path click', - * ...moreOptions - * })' - * ``` - * ...or an object with those properties: + * @param {Object} options.advanceOn An action on the page which should advance shepherd to the next step. + * It should be an object with a string `selector` and an `event` name * ```js * const new Step(tour, { * advanceOn: { selector: '.some .selector-path', event: 'click' }, diff --git a/src/js/utils/bind.js b/src/js/utils/bind.js index 3dfaced69..545563980 100644 --- a/src/js/utils/bind.js +++ b/src/js/utils/bind.js @@ -1,8 +1,9 @@ -import { parseShorthand } from './general.js'; import { isString, isUndefined } from './type-check'; /** * Sets up the handler to determine if we should advance the tour + * @param selector + * @return {Function} * @private */ function _setupAdvanceOnHandler(selector) { @@ -23,19 +24,33 @@ function _setupAdvanceOnHandler(selector) { */ export function bindAdvance() { // An empty selector matches the step element - const { event, selector } = parseShorthand(this.options.advanceOn, ['selector', 'event']); - const handler = _setupAdvanceOnHandler.call(this, selector); + const { event, selector } = this.options.advanceOn || {}; + if (event) { + const handler = _setupAdvanceOnHandler.call(this, selector); - // TODO: this should also bind/unbind on show/hide - const el = document.querySelector(selector); - if (!isUndefined(selector) && el) { - el.addEventListener(event, handler); + // TODO: this should also bind/unbind on show/hide + let el; + try { + el = document.querySelector(selector); + } catch(e) { + // TODO + } + if (!isUndefined(selector) && !el) { + return console.error(`No element was found for the selector supplied to advanceOn: ${selector}`); + } else if (el) { + el.addEventListener(event, handler); + this.on('destroy', () => { + return el.removeEventListener(event, handler); + }); + } else { + document.body.addEventListener(event, handler, true); + this.on('destroy', () => { + return document.body.removeEventListener(event, handler, true); + }); + } } else { - document.body.addEventListener(event, handler, true); + return console.error('advanceOn was defined, but no event name was passed.'); } - this.on('destroy', () => { - return document.body.removeEventListener(event, handler, true); - }); } /** diff --git a/src/js/utils/general.js b/src/js/utils/general.js index baec670f2..9661c3635 100644 --- a/src/js/utils/general.js +++ b/src/js/utils/general.js @@ -1,6 +1,5 @@ import isObjectLike from 'lodash.isobjectlike'; import { isString, isUndefined } from './type-check'; -import zipObject from 'lodash.zipobject'; import tippy from 'tippy.js'; import { missingTippy } from './error-messages'; @@ -100,7 +99,7 @@ export function drop(arr, n = 1) { */ export function _parseAttachToOpts(opts) { if (isObjectLike(opts)) { - if (opts.hasOwnProperty('element') && opts.hasOwnProperty('on')) { + if (Object.prototype.hasOwnProperty.call(opts, 'element') && Object.prototype.hasOwnProperty.call(opts, 'on')) { return opts; } return null; @@ -119,22 +118,6 @@ export function _parseAttachToOpts(opts) { }; } -/** - * @param obj - * @param {Array} props - * @return {*} - */ -export function parseShorthand(obj, props) { - if (obj === null || isUndefined(obj)) { - return obj; - } else if (isObjectLike(obj)) { - return obj; - } - - const values = obj.split(' '); - return zipObject(props, values); -} - /** * Determines options for the tooltip and initializes * `this.tooltip` as a Tippy.js instance. diff --git a/test/dummy/index.html b/test/dummy/index.html index 456a61d80..81b81e03b 100644 --- a/test/dummy/index.html +++ b/test/dummy/index.html @@ -60,7 +60,7 @@