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

@@ -49,16 +49,28 @@ <h3>Example</h3>
           <code class="language-javascript">
             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();

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);

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": {

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);
       });
     }
 

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"