is wrapped around all the steps to isolate them from the rest of the widget.
* @return void
*/
_buildSteps: function () {
var $steps = this.element.children("div, fieldset");
this._stepCount = $steps.length;
$steps.addClass("jw-step").each(function (x) {
var $step = $(this);
if (this.tagName.toLowerCase() === "fieldset") {
$step.attr("title", $step.find("legend").text());
}
});
if (this.options.effects.enable || this.options.effects.step.enable) {
$steps.addClass("jw-animated");
}
$steps.hide().wrapAll($("
", {
"class": "jw-content ui-widget-content ui-helper-clearfix",
html: '
'
})).eq(this._stepIndex).show();
},
/**
* @private
* @description Destroys the step wrappers and restores the steps to their original state (used in `destroy()`)
* @return void
*/
_destroySteps: function () {
$(".jw-step").show().unwrap().unwrap(); // Unwrap 2x: .jw-steps-wrap + .jw-content
$(".jw-step").unbind("show").unbind("hide").removeClass("jw-step");
},
/**
* @private
* @description Changes the "active" step.
* @param number|jQuery nextStep Either an index or a jQuery object/element
* @param bool isInit Behavior needs to change if this is called during _init (as opposed to manually through the global setter)
* @return void
*/
_changeStep: function (nextStep, firstStep) {
var wizard = this,
$steps = this.element.find(".jw-step"),
$currentStep = $steps.eq(this._stepIndex);
if (typeof nextStep === "number") {
if (nextStep < 0 || nextStep > ($steps.length - 1)) {
alert("Index " + nextStep + " Out of Range");
return false;
}
nextStep = $steps.eq(nextStep);
} else if (typeof nextStep === "object") {
if (!nextStep.is($steps.selector)) {
alert("Supplied Element is NOT one of the Wizard Steps");
return false;
}
}
if (!firstStep) {
this._disableButtons();
this._stepIndex = $steps.index(nextStep);
this._updateTitle(firstStep);
this._effect($currentStep, "step", "hide", "hide", function () {
wizard._effect(nextStep, "step", "show", "show", function () {
wizard._enableButtons();
wizard._updateNavigation(firstStep);
});
});
} else {
this._stepIndex = $steps.index(nextStep);
this._updateTitle(firstStep);
this._updateNavigation(firstStep);
}
},
/**
* @private
* @description Initializes the menu
* Builds the menu based on the collection of steps
* Assigns a class to the main
to indicate to CSS that there is a menu
* Binds a click event to each of the
that will change the step accordingly when clicked
* @return void
*/
_buildMenu: function () {
var list = [], $menu, $anchors;
this.element.addClass("jw-hasmenu");
this.element.find(".jw-step").each(function (x) {
list.push($("", {
"class": "ui-corner-all " + (x === 0 ? "jw-current ui-state-highlight" : "jw-inactive ui-state-disabled"),
html: $("", {
step: x,
text: $(this).attr("title")
})
})[0]);
});
$menu = $("
", {
"class": "jw-menu-wrap",
html: $("
", {
"class": "jw-menu",
html: $("
", { html: $(list) })
})
});
this.element.find(".jw-content").prepend($menu);
if (this.options.effects.enable || this.options.effects.menu.enable) {
$menu.find("li").addClass("jw-animated");
}
$menu.find("a").click($.proxy(function (event) {
var $target = $(event.target),
nextStep = parseInt($target.attr("step"), 10);
if ($target.parent().hasClass("jw-active")) {
this.changeStep(nextStep, nextStep <= this._stepIndex ? "previous" : "next");
}
}, this));
},
/**
* @private
* @description Removes the 'jw-hasmenu' class and pulls the menu out of the DOM entirely
* @return void
*/
_destroyMenu: function () {
this.element.removeClass("jw-hasmenu").find(".jw-menu-wrap").remove();
},
/**
* @private
* @description Updates the menu at the end of each call to _changeStep()
* Each
is looped over, along with the parent
* Status (jw-current, jw-active, jw-inactive) set depending on progress through wizard
* @see this._changeStep()
* @return void
*/
_updateMenu: function (firstStep) {
var wizard = this,
currentStep = this._stepIndex,
$menu = this.element.find(".jw-menu");
if (!firstStep) {
this._effect($menu.find("li:eq(" + currentStep + ")"), "menu", "change");
}
$menu.find("a").each(function (x) {
var $a = $(this),
$li = $a.parent(),
iStep = parseInt($a.attr("step"), 10),
sClass = "";
if (iStep < currentStep) {
sClass += "jw-active ui-state-default";
} else if (iStep === currentStep) {
sClass += "jw-current ui-state-highlight";
} else if (iStep > currentStep) {
sClass += "jw-inactive ui-state-disabled";
$a.removeAttr("href");
}
$li.removeClass("jw-active jw-current jw-inactive ui-state-default ui-state-highlight ui-state-disabled").addClass(sClass);
});
},
/**
* @private
* @description Initializes the step counter.
* A new is created and used as the main element
* @return void
*/
_buildCounter: function () {
var $counter = $("", { "class": "jw-counter ui-widget-content ui-corner-all jw-" + this.options.counter.orientText });
if (this.options.counter.location === "header") {
this.element.find(".jw-header").prepend($counter);
} else if (this.options.counter.location === "footer") {
this.element.find(".jw-footer").prepend($counter);
}
if (!this.options.counter.startCount) {
this._stepCount--;
}
if (!this.options.counter.finishCount) {
this._stepCount--;
}
if (this.options.effects.enable || this.options.effects.counter.enable) {
$counter.addClass("jw-animated");
}
if (this.options.counter.progressbar) {
$counter
.html(' ')
.find(".jw-counter-progressbar").progressbar();
}
},
/**
* @private
* @description This is run at the end of every call to this._changeStep()
* @return void
* @see this._changeStep()
*/
_updateCounter: function (firstStep) {
var $counter = this.element.find(".jw-counter"),
counterOptions = this.options.counter,
counterText = "",
actualIndex = this._stepIndex,
actualCount = this._stepCount,
percentage = 0;
if (!counterOptions.startCount) {
actualIndex--;
actualCount--;
}
if (!firstStep) {
this._effect($counter, "counter", "change");
}
percentage = Math.round((actualIndex / actualCount) * 100);
if (counterOptions.type === "percentage") {
counterText = ((percentage <= 100) ? percentage : 100) + "%";
} else if (counterOptions.type === "count") {
if (actualIndex < 0) {
counterText = 0;
} else if (actualIndex > actualCount) {
counterText = actualCount;
} else {
counterText = actualIndex;
}
counterText += " of " + actualCount;
} else {
counterText = "N/A";
}
if (counterOptions.appendText) {
counterText += " " + counterOptions.appendText;
}
if (counterOptions.progressbar) {
this.element.find(".jw-counter-progressbar").progressbar("option", "value", percentage);
this.element.find(".jw-counter-text").text(counterText);
} else {
$counter.text(counterText);
}
if ((counterOptions.startHide && this._stepIndex === 0) || (counterOptions.finishHide && this._stepIndex === (this._actualCount - 1))) {
$counter.hide();
} else {
$counter.show();
}
},
/**
* @private
* @description Removes the counter DOM elements, resets _stepCount
* @return void
*/
_destroyCounter: function () {
this.element.find(".jw-counter").remove();
},
/**
* @private
* @description This generates the