Make pointer-event styling aware of the modal's current visiblity. (#…

…254)
RobbieTheWagner · Sep 27, 2018 · 9ec6575 · 9ec6575
1 parent bb92164
commit 9ec6575
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 7 deletions.
diff --git a/addon/services/tour.js b/addon/services/tour.js
@@ -15,6 +15,7 @@ import {
   createModalOverlay,
   positionModalOpening,
   closeModalOpening,
+  classNames as modalClassNames,
 } from '../utils/modal';
 
 
@@ -352,15 +353,20 @@ export default Service.extend(Evented, {
   },
 
   showModal() {
+    document.body.classList.add(modalClassNames.isVisible);
+
     if (this._modalOverlayElem) {
       this._modalOverlayElem.style.display = 'block';
     }
   },
 
   hideModal() {
+    document.body.classList.remove(modalClassNames.isVisible);
+
     if (this._modalOverlayElem) {
       this._modalOverlayElem.style.display = 'none';
     }
+
   },
 
   addStepEventListeners() {
@@ -410,6 +416,7 @@ export default Service.extend(Evented, {
       }
 
       this._modalOverlayElem = null;
+      document.body.classList.remove(modalClassNames.isVisible);
     });
   },
 });
diff --git a/addon/styles/addon.css b/addon/styles/addon.css
@@ -28,11 +28,11 @@
   * Block clicks except for those that would occur
   * on Shepherd elements or on the target element.
   */
-.shepherd-active :not(.shepherd-target) {
+.shepherd-active.shepherd-modal-is-visible :not(.shepherd-target) {
   pointer-events: none;
 }
-.shepherd-active .shepherd-target,
-.shepherd-active .shepherd-cancel-link,
-.shepherd-active .shepherd-button {
+.shepherd-active.shepherd-modal-is-visible .shepherd-target,
+.shepherd-active.shepherd-modal-is-visible .shepherd-cancel-link,
+.shepherd-active.shepherd-modal-is-visible .shepherd-button {
   pointer-events: auto;
 }
diff --git a/addon/utils/modal.js b/addon/utils/modal.js
@@ -6,6 +6,10 @@ const elementIds = {
   modalOverlayMaskOpening: 'shepherdModalMaskOpening',
 };
 
+const classNames = {
+  isVisible: 'shepherd-modal-is-visible'
+};
+
 
 /**
  * <svg id="shepherdModalOverlayContainer" xmlns="http://www.w3.org/2000/svg">
@@ -149,4 +153,5 @@ export {
   closeModalOpening,
   getModalMaskOpening,
   elementIds,
+  classNames,
 }
diff --git a/tests/acceptance/ember-shepherd-test.js b/tests/acceptance/ember-shepherd-test.js
@@ -3,7 +3,11 @@ import { visit, click, find } from '@ember/test-helpers';
 import { later } from '@ember/runloop';
 import { setupApplicationTest } from 'ember-qunit';
 import { builtInButtons } from '../data';
-import { elementIds } from 'ember-shepherd/utils/modal';
+
+import {
+  elementIds as modalElementIds,
+  classNames as modalClassNames,
+} from 'ember-shepherd/utils/modal';
 
 module('Acceptance | Tour functionality tests', function(hooks) {
   let tour;
@@ -76,23 +80,25 @@ module('Acceptance | Tour functionality tests', function(hooks) {
     test('Displaying the modal during tours when modal mode is enabled', async function(assert) {
       await visit('/');
 
-      const modalOverlay = document.querySelector(`#${elementIds.modalOverlay}`);
+      const modalOverlay = document.querySelector(`#${modalElementIds.modalOverlay}`);
 
       assert.ok(modalOverlay, 'modal overlay is present in the DOM');
       assert.equal(getComputedStyle(modalOverlay).display, 'none', 'modal overlay is present but not displayed before the tour starts');
+      assert.notOk(document.body.classList.contains(modalClassNames.isVisible), `Body has no class of "${modalClassNames.isVisible}" when shepherd is not active`);
 
       await click('.toggleHelpModal');
 
       assert.equal(getComputedStyle(modalOverlay).display, 'block', 'modal overlay is present and displayed after the tour starts');
 
       assert.ok(document.body.classList.contains('shepherd-active'), 'Body gets class of shepherd-active, when shepherd becomes active');
+      assert.ok(document.body.classList.contains(modalClassNames.isVisible), `Body gets class of "${modalClassNames.isVisible}" when shepherd becomes active`);
       assert.equal(document.querySelectorAll('.shepherd-enabled').length, 1, 'attachTo element has the shepherd-enabled class');
     });
 
     test('Hiding the modal during tours when modal mode is not enabled', async function(assert) {
       await visit('/');
 
-      const modalOverlay = document.querySelector(`#${elementIds.modalOverlay}`);
+      const modalOverlay = document.querySelector(`#${modalElementIds.modalOverlay}`);
 
       assert.ok(modalOverlay, 'modal overlay is present in the DOM');
       assert.equal(getComputedStyle(modalOverlay).display, 'none', 'modal overlay is present but not displayed before the tour starts');
@@ -102,6 +108,7 @@ module('Acceptance | Tour functionality tests', function(hooks) {
       assert.equal(getComputedStyle(modalOverlay).display, 'none', 'modal overlay is present but not displayed after the tour starts');
 
       assert.ok(document.body.classList.contains('shepherd-active'), 'Body gets class of shepherd-active, when shepherd becomes active');
+      assert.notOk(document.body.classList.contains(modalClassNames.isVisible), `Body has no class of "${modalClassNames.isVisible}" when shepherd is active but not in modal mode`);
       assert.equal(document.querySelectorAll('.shepherd-enabled').length, 1, 'attachTo element has the shepherd-enabled class');
     });