Merge pull request #1879 from aiperon/GH1877--wizard-should-not-fire-…

…stepclick-on-content-elements

Wizard should not fire stepclicked on content elements

js/wizard.js

@@ -32,7 +32,7 @@
 	// WIZARD CONSTRUCTOR AND PROTOTYPE
 
 	var Wizard = function (element, options) {
-		var kids;
+		var kids, steps;
 
 		this.$element = $(element);
 		this.options = $.extend({}, $.fn.wizard.defaults, options);
@@ -42,13 +42,16 @@
 		this.$prevBtn = this.$element.find('button.btn-prev');
 		this.$nextBtn = this.$element.find('button.btn-next');
 
+		steps = this.$element.children('.steps-container');
 		// maintains backwards compatibility with < 3.8, will be removed in the future
-		if (this.$element.children('.steps-container').length === 0) {
+		if (steps.length === 0) {
+			steps = this.$element;
 			this.$element.addClass('no-steps-container');
 			if (window && window.console && window.console.warn) {
 				window.console.warn('please update your wizard markup to include ".steps-container" as seen in http://getfuelux.com/javascript.html#wizard-usage-markup');
 			}
 		}
+		steps = steps.find('.steps');
 
 		kids = this.$nextBtn.children().detach();
 		this.nextText = $.trim(this.$nextBtn.text());
@@ -57,7 +60,7 @@
 		// handle events
 		this.$prevBtn.on('click.fu.wizard', $.proxy(this.previous, this));
 		this.$nextBtn.on('click.fu.wizard', $.proxy(this.next, this));
-		this.$element.on('click.fu.wizard', 'li.complete', $.proxy(this.stepclicked, this));
+		steps.on('click.fu.wizard', 'li.complete', $.proxy(this.stepclicked, this));
 
 		this.selectedItem(this.options.selectedItem);
 

test/markup/wizard-markup.html

@@ -30,6 +30,7 @@ <h4>Choose Recipients</h4>
 				<p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard. </p>
 				<p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut jícama green bean celtuce collard greens avocado quandong fennel gumbo black-eyed pea. Grape silver beet watercress potato tigernut corn groundnut. Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. Gumbo kakadu plum komatsuna black-eyed pea green bean zucchini gourd winter purslane silver beet rock melon radish asparagus spinach. </p>
 				<p>Beetroot water spinach okra water chestnut ricebean pea catsear courgette summer purslane. Water spinach arugula pea tatsoi aubergine spring onion bush tomato kale radicchio turnip chicory salsify pea sprouts fava bean. Dandelion zucchini burdock yarrow chickpea dandelion sorrel courgette turnip greens. </p>
+				<ul><li class="complete">1</li><li class="complete">2</li></ul>
 			</div>
 			<div class="step-pane sample-pane bg-danger alert" data-step="3">
 				<h4>Design Template</h4>

test/wizard-test.js

@@ -10,7 +10,7 @@ define(function (require) {
 	require('fuelux/wizard');
 
 	function testWizardStepStates($wizard, activeStep) {
-		var $steps = $wizard.find('li');
+		var $steps = $wizard.find('.steps-container .steps li');
 
 		for (var i = 0; i < $steps.length; i++) {
 			if (i === (activeStep - 1)) {
@@ -131,6 +131,28 @@ define(function (require) {
 		equal(index, 2, 'step not changed');
 	});
 
+	test("should not suppress stepclick event for content", function () {
+		var $wizard = $(html).find('#MyWizard').wizard();
+		var eventFired = false;
+
+		$wizard.on('stepclicked.fu.wizard', function (evt, data) {
+			eventFired = true;
+			return evt.preventDefault();// prevent action
+		});
+
+		// move to second step
+		$wizard.wizard('next');
+
+		// click content element
+		$wizard.find('.step-content li.complete:first').click();
+
+		var index = $wizard.wizard('selectedItem').step;
+
+		equal(eventFired, false, 'stepclick event not fired');
+		equal(index, 2, 'step not changed');
+
+	});
+
 
 	test("should fire finished event", function () {
 		var $wizard = $(html).find('#MyWizard').wizard();