diff --git a/src/js/hopscotch.js b/src/js/hopscotch.js index 37f38147..719e6e7a 100644 --- a/src/js/hopscotch.js +++ b/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; diff --git a/test/js/test.hopscotch.js b/test/js/test.hopscotch.js index 84bdff08..1fc8a140 100644 --- a/test/js/test.hopscotch.js +++ b/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() {