Tour ID as part of classes

src/js/hopscotch.js

@@ -1062,6 +1062,7 @@
           numChildren,
           node,
           i,
+          currTour,
           opt;
 
       //Register DOM element for this bubble.
@@ -1086,6 +1087,11 @@
       el.className = 'hopscotch-bubble animated';
       if (!opt.isTourBubble) {
         utils.addClass(el, 'hopscotch-callout no-number');
+      } else {
+        currTour = winHopscotch.getCurrTour();
+        if(currTour){
+          utils.addClass(el, 'tour-' + currTour.id);
+        }
       }
 
       /**
@@ -1319,6 +1325,19 @@
       return bubble;
     },
 
+    /**
+     * Destroy the bubble currently associated with Hopscotch.
+     * This is done when we end the current tour.
+     *
+     * @private
+     */
+    destroyBubble = function() {
+      if(bubble){
+        bubble.destroy();
+        bubble = null;
+      }
+    },
+
     /**
      * Convenience method for getting an option. Returns custom config option
      * or the default config option if no custom value exists.
@@ -1823,16 +1842,23 @@
           skippedSteps = {},
           self = this;
 
-      // Check validity of tour ID. If invalid, throw an error.
-      if(!tour.id || !validIdRegEx.test(tour.id)) {
-        throw new Error('Tour ID is using an invalid format. Use alphanumeric, underscores, and/or hyphens only. First character must be a letter.');
-      }
-
       // loadTour if we are calling startTour directly. (When we call startTour
       // from window onLoad handler, we'll use currTour)
       if (!currTour) {
+
+        // Sanity check! Is there a tour?
+        if(!tour){
+          throw new Error('Tour data is required for startTour.');
+        }
+
+        // Check validity of tour ID. If invalid, throw an error.
+        if(!tour.id || !validIdRegEx.test(tour.id)) {
+          throw new Error('Tour ID is using an invalid format. Use alphanumeric, underscores, and/or hyphens only. First character must be a letter.');
+        }
+
         currTour = tour;
         loadTour.call(this, tour);
+
       }
 
       if (typeof stepNum !== undefinedStr) {
@@ -1985,6 +2011,7 @@
 
       this.removeCallbacks(null, true);
       this.resetDefaultOptions();
+      destroyBubble();
 
       currTour = null;
 

test/js/test.hopscotch.js

@@ -153,6 +153,13 @@ describe('Hopscotch', function() {
         ]
       }, 1);
       expect(hopscotch.getCurrStepNum()).toBe(1);
+      hopscotch.endTour();
+    });
+
+    it('should complain if no tour data is passed in', function(){
+      expect(function(){
+        hopscotch.startTour();
+      }).toThrow(new Error('Tour data is required for startTour.'));
     });
 
     it('should reject tour IDs that include invalid characters', function(){
@@ -1284,6 +1291,21 @@ describe('HopscotchBubble', function() {
       expect(content).toBe('It\'s a shopping list');
       hopscotch.endTour();
     });
+
+    it('Should include tour ID as part of bubble classes', function(){
+      hopscotch.startTour({
+        id: 'hs-test-tour-class',
+        steps: [ {
+          target: 'shopping-list',
+          placement: 'left',
+          title: 'Shopping List',
+          content: 'It\'s a shopping list'
+        } ]
+      });
+      bubble = document.querySelector('.hopscotch-bubble.tour-hs-test-tour-class');
+      expect(bubble).not.toBe(null);
+      hopscotch.endTour();
+    });
   });
 
   describe('Step Number', function() {