From 0b49e54f14aed4390d7f018ee32d3e21603a7713 Mon Sep 17 00:00:00 2001 From: Robert Wagner Date: Sun, 23 Jun 2019 10:23:17 -0400 Subject: [PATCH] Add `disableScroll` option --- docs/welcome/css/welcome.css | 11 +--- docs/welcome/index.html | 56 ++++++++++----------- docs/welcome/js/welcome.js | 1 + package.json | 1 + src/js/step.js | 9 ++++ src/js/tour.js | 26 +++++----- test/cypress/integration/test.acceptance.js | 10 ++-- test/dummy/css/welcome.css | 11 +--- test/dummy/index.html | 55 ++++++++++---------- yarn.lock | 5 ++ 10 files changed, 94 insertions(+), 91 deletions(-) diff --git a/docs/welcome/css/welcome.css b/docs/welcome/css/welcome.css index c02831401..5df431a0a 100644 --- a/docs/welcome/css/welcome.css +++ b/docs/welcome/css/welcome.css @@ -1,7 +1,5 @@ -html, body { height: 100%; - overflow: hidden; } body { @@ -38,15 +36,10 @@ body { } } -.hero-scroll { - height: 100%; - overflow: auto; - -webkit-overflow-scrolling: touch; - width: 100%; -} - .hero-outer { -webkit-box-sizing: border-box; + background-color: #62c462; + background-image: linear-gradient(-45deg, #62c462, #75beaa); box-sizing: border-box; display: table; height: 100%; diff --git a/docs/welcome/index.html b/docs/welcome/index.html index 4ac35e8db..399999471 100644 --- a/docs/welcome/index.html +++ b/docs/welcome/index.html @@ -10,7 +10,7 @@ - + @@ -24,28 +24,29 @@ -
-
-
-
-

Shepherd

+
+
+
+

Shepherd

-

Guide your users through a tour of your app.

-
+

Guide your users through a tour of your app.

+
-
-

Including

+
+

Including

- -
-
-

Example

- 
+      
+
+ +
+

Example

+ + 
           
             const tour = new Shepherd.Tour({
               defaultStepOptions: {
@@ -76,18 +77,17 @@ 
Example

             tour.start();
-
- -
-

- ★ on Github    - View Docs    - -

-
-
- -
+
+ +
+

+ ★ on Github    + View Docs    + +

+
+
+
diff --git a/docs/welcome/js/welcome.js b/docs/welcome/js/welcome.js index 1d45b61ac..b8834062d 100644 --- a/docs/welcome/js/welcome.js +++ b/docs/welcome/js/welcome.js @@ -15,6 +15,7 @@ scrollTo: { behavior: 'smooth', block: 'center' }, showCancelLink: true }, + disableScroll: true, useModalOverlay: true }); diff --git a/package.json b/package.json index 44be91d63..5f7a3684b 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "types": "src/shepherd.d.ts", "module": "dist/js/shepherd.esm.js", "dependencies": { + "body-scroll-lock": "^2.6.1", "element-matches": "^0.1.2", "lodash.defer": "^4.1.0", "lodash.iselement": "^4.1.1", diff --git a/src/js/step.js b/src/js/step.js index 6d8fb2198..309cda8d8 100644 --- a/src/js/step.js +++ b/src/js/step.js @@ -1,4 +1,5 @@ import isElement from 'lodash.iselement'; +import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock/lib/bodyScrollLock.es6.js'; import { isFunction, isString, isUndefined } from './utils/type-check'; import { Evented } from './evented.js'; import { bindAdvance, bindButtonEvents, bindCancelLink, bindMethods } from './utils/bind.js'; @@ -421,11 +422,19 @@ export class Step extends Evented { scrollTo(scrollToOptions) { const { element } = this.parseAttachTo(); + enableBodyScroll(); + if (isFunction(this.options.scrollToHandler)) { this.options.scrollToHandler(element); } else if (isElement(element)) { element.scrollIntoView(scrollToOptions); } + + setTimeout(() => { + if (this.tour.options.disableScroll) { + disableBodyScroll(); + } + }, 50); } /** diff --git a/src/js/tour.js b/src/js/tour.js index b324c04ff..f7d6d65c0 100644 --- a/src/js/tour.js +++ b/src/js/tour.js @@ -4,20 +4,12 @@ import { Modal } from './modal.js'; import { Step } from './step.js'; import { bindMethods } from './utils/bind.js'; import tippy from 'tippy.js'; +import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock/lib/bodyScrollLock.es6.js'; import { defaults as tooltipDefaults } from './utils/tooltip-defaults'; -import { - cleanupSteps, - cleanupStepEventListeners -} from './utils/cleanup'; - -import { - getElementForStep -} from './utils/dom'; - -import { - toggleShepherdModalClass -} from './utils/modal'; +import { cleanupSteps, cleanupStepEventListeners } from './utils/cleanup'; +import { getElementForStep } from './utils/dom'; +import { toggleShepherdModalClass } from './utils/modal'; /** * Creates incremented ID for each newly created tour @@ -42,6 +34,8 @@ export class Tour extends Evented { /** * @param {Object} options The options for the tour * @param {Object} options.defaultStepOptions Default options for Steps ({@link Step#constructor}), created through `addStep` + * @param {boolean} options.disableScroll When set to true, will keep the user from scrolling with the scrollbar, + * mousewheel, arrow keys, etc. You may want to use this to ensure you are driving the scroll position with the tour. * @param {Step[]} options.steps An array of Step instances to initialize the tour with * @param {string} options.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 @@ -161,6 +155,10 @@ export class Tour extends Evented { Shepherd.activeTour = null; this._removeBodyAttrs(); this.trigger('inactive', { tour: this }); + + if (this.options.disableScroll) { + clearAllBodyScrollLocks(); + } } /** @@ -299,6 +297,10 @@ export class Tour extends Evented { start() { this.trigger('start'); + if (this.options.disableScroll) { + disableBodyScroll(); + } + this.currentStep = null; this._setupActiveTour(); this.next(); diff --git a/test/cypress/integration/test.acceptance.js b/test/cypress/integration/test.acceptance.js index 17d997650..79da3cba0 100644 --- a/test/cypress/integration/test.acceptance.js +++ b/test/cypress/integration/test.acceptance.js @@ -186,15 +186,15 @@ describe('Shepherd Acceptance Tests', () => { cy.get('.shepherd-element').should('have.class', 'test-more-defaults'); }); - describe('scrollTo', () => { + describe('scrolling', () => { it('scrollTo:true scrolls', () => { const tour = setupTour(Shepherd, { scrollTo: true }); tour.start(); - cy.get('[data-test-hero-scroll]').should('have.prop', 'scrollTop').and('eq', 0); + cy.document().get('body').should('have.prop', 'scrollTop').and('eq', 0); cy.contains('Next').click(); - cy.get('[data-test-hero-scroll]').should('have.prop', 'scrollTop').and('gt', 0); + cy.document().get('body').should('have.prop', 'scrollTop').and('gt', 0); }); it('scrollTo:false does not scroll', () => { @@ -202,9 +202,9 @@ describe('Shepherd Acceptance Tests', () => { scrollTo: false }); tour.start(); - cy.get('[data-test-hero-scroll]').should('have.prop', 'scrollTop').and('eq', 0); + cy.document().get('body').should('have.prop', 'scrollTop').and('eq', 0); cy.contains('Next').click(); - cy.get('[data-test-hero-scroll]').should('have.prop', 'scrollTop').and('eq', 0); + cy.document().get('body').should('have.prop', 'scrollTop').and('eq', 0); }); }); }); diff --git a/test/dummy/css/welcome.css b/test/dummy/css/welcome.css index a35f297b0..42b0b7ebf 100644 --- a/test/dummy/css/welcome.css +++ b/test/dummy/css/welcome.css @@ -1,7 +1,5 @@ -html, body { height: 100%; - overflow: hidden; } body { @@ -38,15 +36,10 @@ body { } } -.hero-scroll { - height: 100%; - overflow: auto; - -webkit-overflow-scrolling: touch; - width: 100%; -} - .hero-outer { -webkit-box-sizing: border-box; + background-color: #62c462; + background-image: linear-gradient(-45deg, #62c462, #75beaa); box-sizing: border-box; display: table; height: 100%; diff --git a/test/dummy/index.html b/test/dummy/index.html index 428f26f9a..456a61d80 100644 --- a/test/dummy/index.html +++ b/test/dummy/index.html @@ -10,7 +10,7 @@ - + @@ -26,28 +26,28 @@ -
-
-
-
-

Shepherd

+
+
+
+

Shepherd

-

Guide your users through a tour of your app.

-
+

Guide your users through a tour of your app.

+
-
-

Including

+
+

Including

- -
-
-

Example

+ +
+ +
+

Example

- 
+      
           
             const tour = new Shepherd.Tour({
               defaultStepOptions: {
@@ -66,18 +66,17 @@ 
Example

             tour.start();
           
         

-
- -
-

- ★ on Github    - View Docs    - -

-
-
- -
+
+ +
+

+ ★ on Github    + View Docs    + +

+
+
+
diff --git a/yarn.lock b/yarn.lock index 74a0b22f8..d7cf5036e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1640,6 +1640,11 @@ bluebird@3.5.5: resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.5.tgz#a8d0afd73251effbbd5fe384a77d73003c17a71f" integrity sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w== +body-scroll-lock@^2.6.1: + version "2.6.1" + resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-2.6.1.tgz#3782ff37404886faaee366968ceee40c3964d8f2" + integrity sha512-fsDsq10+BJrk/+eGADqxspyZpGiKSh3dK8ByE6KuDK0REmPB99U05p1t9xVTAM9J6j9PJGm6W/W+HsCPnOFj+Q== + boolbase@^1.0.0, boolbase@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"