Remove body-scroll-lock, shepherd.js 3.0.0 (#325)

RobbieTheWagner · Jun 23, 2019 · 74824ab · 74824ab
1 parent 25fe9d9
commit 74824ab
Show file tree

Hide file tree

Showing 6 changed files with 254 additions and 262 deletions.
diff --git a/addon/services/tour.js b/addon/services/tour.js
@@ -1,16 +1,13 @@
 /* eslint-disable ember/avoid-leaking-state-in-ember-objects */
-import { get, set } from '@ember/object';
+import { get, getProperties, set } from '@ember/object';
 import { isEmpty, isPresent } from '@ember/utils';
 import Service from '@ember/service';
 import Evented from '@ember/object/evented';
 import { getOwner } from '@ember/application';
-import { bind, later } from '@ember/runloop';
+import { bind } from '@ember/runloop';
 import { normalizeAttachTo } from '../utils/attachTo';
 import { makeButton } from '../utils/buttons';
-import {
-  elementIsHidden
-} from '../utils/dom';
-import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
+import { elementIsHidden } from '../utils/dom';
 
 /**
  * Interaction with `ember-shepherd` is done entirely through the Tour service, which you can access from any object using the `Ember.inject` syntax:
@@ -66,7 +63,7 @@ export default Service.extend(Evented, {
    * ```js
    * this.get('tour').set('defaultStepOptions', {
    *   classes: 'custom-class-name-1 custom-class-name-2',
-   *   scrollTo: false,
+   *   scrollTo: true,
    *   showCancelLink: true
    * });
    * ```
@@ -156,10 +153,6 @@ export default Service.extend(Evented, {
   requiredElements: [],
   steps: [],
 
-  willDestroy() {
-    this._cleanup();
-  },
-
   /**
    * Take a set of steps, create a tour object based on the current configuration and load the shepherd.js dependency.
    * This method returns a promise which resolves when the shepherd.js dependency has been loaded and shepherd is ready to use.
@@ -244,7 +237,7 @@ export default Service.extend(Evented, {
         return;
       }
 
-      steps.forEach((step, index) => {
+      steps.forEach((step) => {
         const { id, options } = step;
 
         if (options.buttons) {
@@ -253,26 +246,6 @@ export default Service.extend(Evented, {
 
         options.attachTo = normalizeAttachTo(options.attachTo);
         tour.addStep(id, options);
-
-        // Step up events for the current step
-        const currentStep = tour.steps[index];
-
-        if (!currentStep.options.scrollToHandler) {
-          currentStep.options.scrollToHandler = (elem) => {
-            // Allow scrolling so scrollTo works.
-            enableBodyScroll();
-
-            if (typeof elem !== 'undefined') {
-              elem.scrollIntoView();
-            }
-
-            later(() => {
-              if (get(this, 'disableScroll')) {
-                disableBodyScroll();
-              }
-            }, 50);
-          };
-        }
       });
     });
   },
@@ -349,7 +322,7 @@ export default Service.extend(Evented, {
   start() {
     const tourObject = get(this, 'tourObject');
     if (tourObject == undefined) {
-      throw new Error("the Promise from addSteps must be in a resolved state before the tour can be started");
+      throw new Error('the Promise from addSteps must be in a resolved state before the tour can be started');
     }
     set(this, 'isActive', true);
     tourObject.start();
@@ -362,10 +335,6 @@ export default Service.extend(Evented, {
    * @private
    */
   _onTourStart() {
-    if (get(this, 'disableScroll')) {
-      disableBodyScroll();
-    }
-
     this.trigger('start');
   },
 
@@ -380,34 +349,18 @@ export default Service.extend(Evented, {
     if (!this.isDestroyed) {
       set(this, 'isActive', false);
     }
-    this._cleanup();
     this.trigger(completeOrCancel);
   },
 
-  /**
-   * Cleanup disableScroll
-   *
-   * @method _cleanup
-   * @private
-   */
-  _cleanup() {
-    if (get(this, 'disableScroll')) {
-      clearAllBodyScrollLocks();
-    }
-  },
-
   /**
    * Initializes the tour, creates a new Shepherd.Tour. sets options, and binds events
    *
    * @method _initialize
    * @private
    */
   _initialize() {
-    const confirmCancel = get(this, 'confirmCancel');
-    const confirmCancelMessage = get(this, 'confirmCancelMessage');
-    const defaultStepOptions = get(this, 'defaultStepOptions');
-    const tourName = get(this, 'tourName');
-    const useModalOverlay = get(this, 'modal');
+    const { confirmCancel, confirmCancelMessage, defaultStepOptions, disableScroll, modal, tourName } =
+      getProperties(this, 'confirmCancel', 'confirmCancelMessage', 'defaultStepOptions', 'disableScroll', 'modal', 'tourName');
 
     // Ensure `tippyOptions` exists on `defaultStepOptions`
     defaultStepOptions.tippyOptions = defaultStepOptions.tippyOptions || {};
@@ -423,21 +376,22 @@ export default Service.extend(Evented, {
 
 
     return import('shepherd.js').then(module => {
-      const Shepherd = module.default
+      const Shepherd = module.default;
       const tourObject = new Shepherd.Tour({
         confirmCancel,
         confirmCancelMessage,
         defaultStepOptions,
+        disableScroll,
         tourName,
-        useModalOverlay
+        useModalOverlay: modal
       });
 
       tourObject.on('start', bind(this, '_onTourStart'));
       tourObject.on('complete', bind(this, '_onTourFinish', 'complete'));
       tourObject.on('cancel', bind(this, '_onTourFinish', 'cancel'));
 
       set(this, 'tourObject', tourObject);
-    })
+    });
   },
 
   /**

diff --git a/package.json b/package.json
@@ -57,18 +57,17 @@
     "test:all": "ember try:each"
   },
   "dependencies": {
-    "body-scroll-lock": "^2.6.1",
-    "ember-auto-import": "^1.4.0",
+    "ember-auto-import": "^1.4.1",
     "ember-cli-babel": "^7.7.3",
-    "shepherd.js": "^2.9.1"
+    "shepherd.js": "^3.0.0"
   },
   "devDependencies": {
     "@ember/optional-features": "^0.7.0",
-    "babel-eslint": "^10.0.1",
+    "babel-eslint": "^10.0.2",
     "broccoli-asset-rev": "^3.0.0",
     "codeclimate-test-reporter": "^0.5.1",
     "ember-cli": "~3.10.1",
-    "ember-cli-addon-docs": "^0.6.12",
+    "ember-cli-addon-docs": "^0.6.13",
     "ember-cli-addon-docs-yuidoc": "^0.2.1",
     "ember-cli-code-coverage": "^1.0.0-beta.8",
     "ember-cli-dependency-checker": "^3.2.0",
@@ -94,8 +93,9 @@
     "ember-resolver": "^5.0.1",
     "ember-source": "~3.10.0",
     "ember-source-channel-url": "^2.0.1",
+    "ember-svg-jar": "^1.2.2",
     "ember-try": "^1.2.1",
-    "eslint-plugin-ember": "^6.5.1",
+    "eslint-plugin-ember": "^6.7.0",
     "eslint-plugin-node": "^9.0.1",
     "loader.js": "^4.7.0",
     "qunit-dom": "^0.8.4",

diff --git a/tests/dummy/app/styles/app.scss b/tests/dummy/app/styles/app.scss
@@ -175,3 +175,11 @@ $shepherd-theme-secondary: $whiteish;
     }
   }
 }
+
+:root {
+  --brand-primary: #EF898B;
+}
+
+.hero {
+  padding: 0 2rem;
+}
diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs
@@ -1,6 +1,39 @@
-{{docs-hero
-  logo="ember"
-  slimHeading="shepherd"
-  strongHeading="Helpers"
-  byline="An Ember addon for the site tour library Shepherd"
-}}
+<section
+  class="hero docs-flex docs-flex-wrap docs-justify-center"
+>
+  <div class="section-content docs-mt-8 docs-mb-8 docs-w-full docs-max-w-4xl">
+    <div class="docs-flex docs-flex-wrap docs-items-center docs-flex-col-reverse docs-justify-between lg:docs-flex-row">
+      <div class="docs-w-full lg:docs-pr-12 lg:docs-w-1/2">
+        <div class="docs-max-w-md">
+          <div class="docs-max-w-sm docs-mx-auto">
+            <h1>
+              <span class="docs-max-w-sm">
+                {{svg-jar "ember" class="docs-h-full docs-w-auto docs-max-w-full docs-fill-current" height="auto" width="125px"}}
+              </span>
+
+              Shepherd
+            </h1>
+
+            <p class="docs-mt-4 xl:docs-mt-6 docs-mb-2 docs-leading-small docs-mx-auto docs-tracking-tight
+      docs-text-large-1 md:docs-text-large-2 xl:docs-text-large-3">
+              An Ember addon for the site tour library Shepherd
+            </p>
+
+            {{#link-to
+              "docs"
+              class="docs-no-underline docs-bg-white docs-text-brand docs-text-xs docs-px-3 docs-py-2
+        docs-rounded docs-mt-4 docs-shadow-md hover:docs-shadow-lg
+        docs-transition hover:docs-nudge-t docs-font-bold docs-inline-block docs-uppercase"
+            }}
+              Read the docs →
+            {{/link-to}}
+          </div>
+        </div>
+      </div>
+
+      <div class="docs-w-full docs-text-center lg:docs-pr-12 lg:docs-w-1/2 lg:docs-p-12">
+        {{svg-jar "ember-consulting"}}
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/tests/dummy/public/img/ember-consulting.svg b/tests/dummy/public/img/ember-consulting.svg
-Original file line number
+Diff line change
@@ Expand Up / @@ -175,3 +175,11 @@ $shepherd-theme-secondary: $whiteish; @@
         }
       }
     }
+    :root {
+      --brand-primary: #EF898B;
+    }
+    .hero {
+      padding: 0 2rem;
+    }