From 658ac285df80d20462f689a01063c31a37a14f43 Mon Sep 17 00:00:00 2001 From: Robert Wagner Date: Wed, 12 Jun 2019 19:24:49 -0400 Subject: [PATCH] Add scrollIntoView options and polyfill (#402) This should enable users to pass options like `scrollTo: { behavior: 'smooth', block: 'center' },` which will change the scrolling behavior to center the object and to scroll smoothly. These options come from https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView The `behavior` option is not supported in Safari or IE, so we added a polyfill for them. Closes #398 Closes #401 --- docs/welcome/index.html | 24 ++++++++++++++++++------ docs/welcome/js/welcome.js | 19 ++++++++++++------- package.json | 1 + src/js/step.js | 18 +++++++++++++----- yarn.lock | 5 +++++ 5 files changed, 49 insertions(+), 18 deletions(-) diff --git a/docs/welcome/index.html b/docs/welcome/index.html index 7e9890995..4ac35e8db 100644 --- a/docs/welcome/index.html +++ b/docs/welcome/index.html @@ -49,16 +49,28 @@

Example

const tour = new Shepherd.Tour({ defaultStepOptions: { - classes: 'shadow-md bg-purple-dark', - scrollTo: true + classes: 'class-1 class-2', + scrollTo: { behavior: 'smooth', block: 'center' }, + showCancelLink: true } }); - tour.addStep('example', { - title: 'Example Shepherd', - text: 'Creating a Shepherd is easy too! Just create ...', + tour.addStep('creating', { + 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: '.hero-example bottom', - advanceOn: '.docs-link click' + buttons: [ + { + action: shepherd.back, + classes: 'shepherd-button-secondary', + text: 'Back' + }, + { + action: shepherd.next, + text: 'Next' + } + ] }); tour.start(); diff --git a/docs/welcome/js/welcome.js b/docs/welcome/js/welcome.js index f98a52bf1..1d45b61ac 100644 --- a/docs/welcome/js/welcome.js +++ b/docs/welcome/js/welcome.js @@ -8,10 +8,11 @@ }, 400); } - function setupShepherd () { + function setupShepherd() { const shepherd = new Shepherd.Tour({ defaultStepOptions: { - scrollTo: true, + classes: 'class-1 class-2', + scrollTo: { behavior: 'smooth', block: 'center' }, showCancelLink: true }, useModalOverlay: true @@ -71,7 +72,8 @@ action: shepherd.back, classes: 'shepherd-button-secondary', text: 'Back' - }, { + }, + { action: shepherd.next, text: 'Next' } @@ -86,7 +88,8 @@ action: shepherd.back, classes: 'shepherd-button-secondary', text: 'Back' - }, { + }, + { action: shepherd.next, text: 'Next' } @@ -102,7 +105,8 @@ action: shepherd.back, classes: 'shepherd-button-secondary', text: 'Back' - }, { + }, + { action: shepherd.next, text: 'Next' } @@ -117,7 +121,8 @@ action: shepherd.back, classes: 'shepherd-button-secondary', text: 'Back' - }, { + }, + { action: shepherd.next, text: 'Done' } @@ -128,7 +133,7 @@ } function ready() { - if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){ + if (document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading') { init(); } else { document.addEventListener('DOMContentLoaded', init); diff --git a/package.json b/package.json index d8a28ca23..376f4d205 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,7 @@ "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" }, "devDependencies": { diff --git a/src/js/step.js b/src/js/step.js index ab760b51a..3fc86e498 100644 --- a/src/js/step.js +++ b/src/js/step.js @@ -1,10 +1,14 @@ import isElement from 'lodash.iselement'; import { isFunction, isString, isUndefined } from './utils/type-check'; import { Evented } from './evented.js'; -import 'element-matches'; import { bindAdvance, bindButtonEvents, bindCancelLink, bindMethods } from './utils/bind.js'; import { createFromHTML, setupTooltip, parseAttachTo } from './utils/general.js'; +// Polyfills +import 'element-matches'; +import smoothscroll from 'smoothscroll-polyfill'; +smoothscroll.polyfill(); + /** * Creates incremented ID for each newly created step * @@ -84,7 +88,8 @@ export class Step extends Evented { * @param {string} options.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. * @param {Object} options.tippyOptions Extra [options to pass to tippy.js]{@link https://atomiks.github.io/tippyjs/#all-options} - * @param {boolean} options.scrollTo Should the element be scrolled to when this step is shown? + * @param {boolean|Object} options.scrollTo Should the element be scrolled to when this step is shown? If true, uses the default `scrollIntoView`, + * if an object, passes that object as the params to `scrollIntoView` i.e. `{behavior: 'smooth', block: 'center'}` * @param {function} options.scrollToHandler A function that lets you override the default scrollTo behavior and * define a custom action to do the scrolling, and possibly other logic. * @param {boolean} options.showCancelLink Should a cancel “✕” be shown in the header of the step? @@ -338,14 +343,17 @@ export class Step extends Evented { /** * If a custom scrollToHandler is defined, call that, otherwise do the generic * scrollIntoView call. + * + * @param {boolean|Object} scrollToOptions If true, uses the default `scrollIntoView`, + * if an object, passes that object as the params to `scrollIntoView` i.e. `{ behavior: 'smooth', block: 'center' }` */ - scrollTo() { + scrollTo(scrollToOptions) { const { element } = this.parseAttachTo(); if (isFunction(this.options.scrollToHandler)) { this.options.scrollToHandler(element); } else if (isElement(element)) { - element.scrollIntoView(); + element.scrollIntoView(scrollToOptions); } } @@ -400,7 +408,7 @@ export class Step extends Evented { if (this.options.scrollTo) { setTimeout(() => { - this.scrollTo(); + this.scrollTo(this.options.scrollTo); }); } diff --git a/yarn.lock b/yarn.lock index 8307ac318..4c501aeb7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8460,6 +8460,11 @@ slice-ansi@^2.1.0: astral-regex "^1.0.0" is-fullwidth-code-point "^2.0.0" +smoothscroll-polyfill@^0.4.4: + version "0.4.4" + resolved "https://registry.yarnpkg.com/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz#3a259131dc6930e6ca80003e1cb03b603b69abf8" + integrity sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg== + snake-case@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-2.1.0.tgz#41bdb1b73f30ec66a04d4e2cad1b76387d4d6d9f"