Merge pull request #129 from camhux/highlight-class-liberalization

Apply `highlightClass` to `currentElement` when `tour.modal == false`
RobbieTheWagner · Mar 15, 2017 · c015235 · c015235
2 parents 9a367b4 + 8437cd4
commit c015235
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 15 deletions.
diff --git a/addon/services/tour.js b/addon/services/tour.js
@@ -350,20 +350,30 @@ export default Service.extend(Evented, {
   },
 
   /**
-   * Increases the z-index of the element, to pop it out above the overlay and highlight it
+   * Modulates the styles of the passed step's target element, based on the step's options and
+   * the tour's `modal` option, to visually emphasize the element
    *
    * @param step The step object that attaches to the element
    * @private
    */
   popoutElement(step) {
-    $('.shepherd-modal').removeClass('shepherd-modal');
     const currentElement = this.getElementForStep(step);
 
     if (currentElement) {
-      $(currentElement).addClass('shepherd-modal');
       if (step.options.highlightClass) {
         $(currentElement).addClass(step.options.highlightClass);
       }
+
+      if (this.get('modal')) {
+        currentElement.style.pointerEvents = 'none';
+
+        if (step.options.copyStyles) {
+          this.createHighlightOverlay(step);
+        } else {
+          $('.shepherd-modal').removeClass('shepherd-modal');
+          $(currentElement).addClass('shepherd-modal');
+        }
+      }
     }
   },
 
@@ -449,18 +459,7 @@ export default Service.extend(Evented, {
       const currentStep = tour.steps[index];
 
       currentStep.on('before-show', () => {
-        if (this.get('modal')) {
-          const currentElement = this.getElementForStep(currentStep);
-
-          if (currentElement) {
-            currentElement.style.pointerEvents = 'none';
-            if (currentStep.options.copyStyles) {
-              this.createHighlightOverlay(currentStep);
-            } else {
-              this.popoutElement(currentStep);
-            }
-          }
-        }
+        this.popoutElement(currentStep);
       });
       currentStep.on('hide', () => {
         // Remove element copy, if it was cloned

diff --git a/tests/acceptance/ember-shepherd-test.js b/tests/acceptance/ember-shepherd-test.js
@@ -182,6 +182,47 @@ test('Highlight applied', function(assert) {
   });
 });
 
+test('Highlight applied when `tour.modal == false`', function(assert) {
+  assert.expect(2);
+
+  const steps = [{
+    id: 'test-highlight',
+    options: {
+      attachTo: '.first-element bottom',
+      builtInButtons: [
+        {
+          classes: 'shepherd-button-secondary cancel-button',
+          text: 'Exit',
+          type: 'cancel'
+        },
+        {
+          classes: 'shepherd-button-primary next-button',
+          text: 'Next',
+          type: 'next'
+        }
+      ],
+      classes: 'shepherd shepherd-open shepherd-theme-arrows shepherd-transparent-text',
+      copyStyles: false,
+      highlightClass: 'highlight',
+      title: 'Welcome to Ember-Shepherd!',
+      text: ['Testing highlight']
+    }
+  }];
+
+  visit('/');
+
+  andThen(function() {
+    tour.set('steps', steps);
+    click('.toggleHelpNonmodal');
+
+    andThen(function() {
+      assert.equal(find('.highlight', 'body').length, 1, 'currentElement highlighted');
+      patchClick('.shepherd-content a:contains(Exit)', 'body');
+      assert.equal(find('.highlight', 'body').length, 0, 'highlightClass removed on cancel');
+    });
+  });
+});
+
 test('Defaults applied', function(assert) {
   assert.expect(1);