vendor/assets/javascripts/jquery.form.wizard.js in hat-trick-0.1.2 vs vendor/assets/javascripts/jquery.form.wizard.js in hat-trick-0.1.3
- old
+ new
@@ -4,11 +4,11 @@
*
* Copyright (c) 2011 Jan Sundman (jan.sundman[at]aland.net)
*
* http://www.thecodemine.org
*
- * Licensed under the MIT licens:
+ * Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
*/
@@ -21,13 +21,16 @@
var formOptionsSuccess = this.options.formOptions.success;
var formOptionsComplete = this.options.formOptions.complete;
var formOptionsBeforeSend = this.options.formOptions.beforeSend;
var formOptionsBeforeSubmit = this.options.formOptions.beforeSubmit;
var formOptionsBeforeSerialize = this.options.formOptions.beforeSerialize;
- this.options.formOptions = $.extend(this.options.formOptions,{
- success : function(responseText, textStatus, xhr){
- if(formOptionsSuccess){
+ var $firstStep;
+ var stateData = {};
+
+ this.options.formOptions = $.extend(this.options.formOptions, {
+ success : function(responseText, textStatus, xhr) {
+ if (formOptionsSuccess) {
formOptionsSuccess(responseText, textStatus, xhr);
}
if(wizard.options.formOptions && wizard.options.formOptions.resetForm || !wizard.options.formOptions){
wizard._reset();
}
@@ -65,56 +68,59 @@
});
this.steps = this.element.find(".step").hide();
this.firstStep = this.options.firstStep || this.steps.eq(0).attr("id");
- this.activatedSteps = [];
+
+ $firstStep = this._stepElement(this.firstStep);
+ stateData["step"] = this.firstStep;
+ History.replaceState(stateData, $firstStep.data("page-title"), location.pathname);
+
this.isLastStep = false;
this.previousStep = undefined;
this.currentStep = this.firstStep;
this._updateButtons();
- if(this.options.validationEnabled && jQuery().validate == undefined){
+ if (this.options.validationEnabled && jQuery().validate === undefined) {
this.options.validationEnabled = false;
- if( (window['console'] !== undefined) ){
+ if ( (window['console'] !== undefined) ) {
console.log("%s", "validationEnabled option set, but the validation plugin is not included");
}
- }else if(this.options.validationEnabled){
+ } else if(this.options.validationEnabled) {
this.element.validate(this.options.validationOptions);
}
- if(this.options.formPluginEnabled && jQuery().ajaxSubmit == undefined){
+ if (this.options.formPluginEnabled && jQuery().ajaxSubmit === undefined) {
this.options.formPluginEnabled = false;
- if( (window['console'] !== undefined) ){
+ if ( (window['console'] !== undefined) ) {
console.log("%s", "formPluginEnabled option set but the form plugin is not included");
}
}
- if(this.options.disableInputFields == true){
+ if (this.options.disableInputFields === true) {
$(this.steps).find(":input:not('.wizard-ignore')").attr("disabled","disabled");
}
- if(this.options.historyEnabled){
- History.Adapter.bind(window, 'statechange', function() {
- var state;
- var step;
- state = History.getState();
- step = state.data.step;
- if(step !== wizard.currentStep){
- if(wizard.options.validationEnabled && step === wizard._navigate(wizard.currentStep)){
- if(!wizard.element.valid()){
- wizard._updateHistory(wizard.currentStep);
- wizard.element.validate().focusInvalid();
+ History.Adapter.bind(window, 'statechange', function() {
+ var state;
+ var step;
+ state = History.getState();
+ step = state.data.step;
+ if (step !== wizard.currentStep) {
+ if (wizard.options.validationEnabled && step === wizard._navigate(wizard.currentStep)) {
+ if (!wizard.element.valid()) {
+ wizard._show(wizard.currentStep);
+ wizard.element.validate().focusInvalid();
- return false;
- }
+ return false;
}
- if(step !== wizard.currentStep)
- wizard._show(step);
}
- });
- }
+ if (step !== wizard.currentStep) {
+ wizard._show(step);
+ }
+ }
+ });
this.element.addClass("ui-formwizard");
this.element.find(":input").addClass("ui-wizard-content");
this.steps.addClass("ui-formwizard-content");
this.backButton.addClass("ui-formwizard-button ui-wizard-content");
@@ -129,33 +135,29 @@
}
this._show(undefined);
return $(this);
},
- _updateButtons : function(){
+ _stepElement : function(stepId) {
+ return $(this.steps.filter("#" + stepId)[0]);
+ },
+
+ _updateButtons : function() {
var wizard = this;
this.nextButton = this.element.find(this.options.next);
this.nextButton.each(function() {
var events = $(this).data("events");
if (typeof events === "undefined" ||
typeof events['click'] === "undefined" ||
events['click'].length === 0) {
$(this).click(function() {
- var nextClickCallbackData = {
- "currentStep": wizard.currentStep,
- "button": $(this).attr("id")
- };
- $(wizard.element).trigger('next_click', nextClickCallbackData);
- return wizard._next();
+ return wizard._next(this);
});
}
});
- this.nextButtonInitinalValue = this.nextButton.val();
- this.nextButton.val(this.options.textNext);
-
this.backButton = this.element.find(this.options.back);
this.backButton.each(function() {
var events = $(this).data('events');
if (typeof events === "undefined" ||
typeof events['click'] === "undefined" ||
@@ -169,32 +171,52 @@
wizard._back();
return false;
});
}
});
-
- this.backButtonInitinalValue = this.backButton.val();
- this.backButton.val(this.options.textBack);
},
- _next : function(){
- if(this.options.validationEnabled){
- if(!this.element.valid()){
+ _next : function(button) {
+ var nextClickCallbackData = {
+ "currentStep": this.currentStep,
+ "button": $(button).attr("id")
+ };
+ $(this.element).trigger('next_click', nextClickCallbackData);
+
+ if (this.options.validationEnabled) {
+ if (!this.element.valid()) {
this.element.validate().focusInvalid();
return false;
}
}
- if(this.options.remoteAjax != undefined){
+ if (this.options.remoteAjax !== undefined) {
var options = this.options.remoteAjax[this.currentStep];
var wizard = this;
- if(options !== undefined){
+ if (options !== undefined) {
var success = options.success;
var beforeSend = options.beforeSend;
var complete = options.complete;
- options = $.extend({},options,{
+ options = $.extend({}, options, {
+ beforeSerialize : function(form, options) {
+ var $button;
+ var buttonName;
+ var buttonValue;
+ var buttonData = {};
+
+ // serialize the button that was clicked into the ajax submission
+ $button = $(button);
+ buttonName = $button.attr("name");
+ buttonValue = $button.val();
+ if (buttonName !== undefined && buttonName !== "" && buttonValue !== undefined && buttonValue !== "") {
+ buttonData[buttonName] = buttonValue;
+ options.data = $.extend({}, options.data, buttonData);
+ }
+ return true;
+ },
+
beforeSend : function(xhr){
wizard._disableNavigation();
if(beforeSend !== undefined)
beforeSend(xhr);
$(wizard.element).trigger('before_remote_ajax', {
@@ -224,76 +246,87 @@
}
return this._continueToNextStep();
},
- _back : function(){
- if(this.activatedSteps.length > 0){
- if(this.options.historyEnabled){
- this._updateHistory(this.activatedSteps[this.activatedSteps.length - 2]);
- }else{
- this._show(this.activatedSteps[this.activatedSteps.length - 2], true);
- }
- }
+ _back : function() {
+ History.back();
return false;
},
_continueToNextStep : function(){
- if(this.isLastStep){
- for(var i = 0; i < this.activatedSteps.length; i++){
- this.steps.filter("#" + this.activatedSteps[i]).find(":input").not(".wizard-ignore").removeAttr("disabled");
- }
- if(!this.options.formPluginEnabled){
- return true;
- }else{
- this._disableNavigation();
- this.element.ajaxSubmit(this.options.formOptions);
- return false;
- }
- }
-
var step = this._navigate(this.currentStep);
- if(step == this.currentStep){
+ if (step == this.currentStep) {
return false;
}
- if(this.options.historyEnabled){
- this._updateHistory(step);
- }else{
- this._show(step, true);
- }
+ this._updateHistory(step);
return false;
},
+ _pageTitleForStep : function(step) {
+ var $step = this._stepElement(step);
+ var title = $step.data("page-title");
+ return title;
+ },
+
_updateHistory : function(step) {
- var state = {};
- var title = $("title").text();
- state["step"] = step;
- History.pushState(state, title, step);
+ var stateData = {};
+ var newUrlPath = this._urlPathForStep(step);
+ var title = this._pageTitleForStep(step);
+
+ stateData["step"] = step;
+ History.pushState(stateData, title, newUrlPath);
},
- _disableNavigation : function(){
+ _urlPathForStep : function(step) {
+ var currentState = History.getState();
+ var currentStep = this.currentStep;
+ var urlPathComponents;
+ var newUrlPathComponents = [];
+ var newUrl;
+ var i;
+ var lastIndex;
+
+ urlPathComponents = currentState.url.split("/").filter(function(c) {
+ return (c !== "");
+ });
+ urlPathComponents.shift(); // drop first element; the "http(s):"
+ urlPathComponents.shift(); // next element is host:port section; drop it
+ lastIndex = urlPathComponents.length - 1;
+
+ for (i=0; i<lastIndex; i++) {
+ newUrlPathComponents.push(urlPathComponents[i]);
+ }
+
+ // remove any query params from the end of the URL
+ lastPathComponent = urlPathComponents[lastIndex].split("?")[0];
+
+ if (lastPathComponent !== currentStep) {
+ newUrlPathComponents.push(lastPathComponent);
+ }
+
+ newUrlPathComponents.push(step);
+ newUrl = "/" + newUrlPathComponents.join("/");
+
+ return newUrl;
+ },
+
+ _redirect : function(step) {
+ var stepUrlPath = this._urlPathForStep(step);
+ location.pathname = stepUrlPath;
+ },
+
+ _disableNavigation : function() {
this.nextButton.attr("disabled","disabled");
this.backButton.attr("disabled","disabled");
if(!this.options.disableUIStyles){
this.nextButton.removeClass("ui-state-active").addClass("ui-state-disabled");
this.backButton.removeClass("ui-state-active").addClass("ui-state-disabled");
}
},
- _setNavButtonValues : function(){
- if(this.isLastStep){
- this.nextButton.val(this.options.textSubmit);
- }else{
- this.nextButton.val(this.options.textNext);
- }
- },
-
_enableNavigation : function(){
- if(this.nextButton.val() === ""){
- this._setNavButtonValues();
- }
-
if($.trim(this.currentStep) !== this.steps.eq(0).attr("id")){
this.backButton.removeAttr("disabled");
if(!this.options.disableUIStyles){
this.backButton.removeClass("ui-state-disabled").addClass("ui-state-active");
}
@@ -312,12 +345,13 @@
old.find(":input").not(".wizard-ignore").attr("disabled","disabled");
current.find(":input").not(".wizard-ignore").removeAttr("disabled");
var wizard = this;
old.animate(wizard.options.outAnimation, wizard.options.outDuration, wizard.options.easing, function(){
current.animate(wizard.options.inAnimation, wizard.options.inDuration, wizard.options.easing, function(){
- if(wizard.options.focusFirstInput)
- current.find(":input:first").focus();
+ if (wizard.options.focusFirstInput) {
+ current.filter("fieldset:not(.no-focus)").find(":input:not(input[type=hidden]):first").focus();
+ }
wizard._enableNavigation();
stepShownCallback.apply(wizard);
});
return;
@@ -329,32 +363,32 @@
if($("#" + step).hasClass(this.options.submitStepClass) || this.steps.filter(":last").attr("id") == step){
this.isLastStep = true;
}
},
- _getLink : function(step){
- var link = undefined;
+ _getLink : function(step) {
+ var link;
var links = this.steps.filter("#" + step).find(this.options.linkClass);
- if(links != undefined){
- if(links.filter(":radio,:checkbox").size() > 0){
+ if (links !== undefined) {
+ if (links.filter(":radio,:checkbox").size() > 0) {
link = links.filter(this.options.linkClass + ":checked").val();
- }else{
+ } else {
link = $(links).val();
}
}
return link;
},
- _navigate : function(step){
+ _navigate : function(step) {
var link = this._getLink(step);
- if(link != undefined){
- if((link != "" && link != null && link != undefined) && this.steps.filter("#" + link).attr("id") != undefined){
+ if (link !== undefined) {
+ if ((link !== "" && link !== null && link !== undefined) && this.steps.filter("#" + link).attr("id") !== undefined) {
return link;
}
return this.currentStep;
- }else if(link == undefined && !this.isLastStep){
+ } else if (link === undefined && !this.isLastStep) {
var step1 = this.steps.filter("#" + step).next().attr("id");
return step1;
}
},
@@ -366,84 +400,65 @@
return pathComponents[i];
}
}
},
- _show : function(step){
- var backwards = false;
- var triggerStepShown = step !== undefined;
+ _show : function(step) {
var fragment;
- if(step == undefined || step == ""){
+ if (step === undefined || step === "") {
step = this._stepFromPath() || this.firstStep;
- this.activatedSteps.pop();
- this.activatedSteps.push(step);
- }else{
- if($.inArray(step, this.activatedSteps) > -1){
- backwards = true;
- this.activatedSteps.pop();
- }else {
- this.activatedSteps.push(step);
- }
}
- if(this.currentStep !== step || step === this.firstStep){
+ if (this.currentStep !== step || step === this.firstStep) {
this.previousStep = this.currentStep;
this._checkIflastStep(step);
this.currentStep = step;
- var stepShownCallback = function(){if(triggerStepShown)$(this.element).trigger('step_shown', $.extend({"isBackNavigation" : backwards},this._state()));};
+ var stepShownCallback = function() {
+ $(this.element).trigger('step_shown', this._state());
+ };
this._animate(this.previousStep, step, stepShownCallback);
- };
+ }
-
},
_reset : function(){
- this.element.resetForm()
+ this.element.resetForm();
$("label,:input,textarea",this).removeClass("error");
- for(var i = 0; i < this.activatedSteps.length; i++){
- this.steps.filter("#" + this.activatedSteps[i]).hide().find(":input").attr("disabled","disabled");
- }
- this.activatedSteps = new Array();
this.previousStep = undefined;
this.isLastStep = false;
- if(this.options.historyEnabled){
- this._updateHistory(this.firstStep);
- }else{
- this._show(this.firstStep);
- }
-
+ this._updateHistory(this.firstStep);
},
- _state : function(state){
+ _state : function(state) {
var currentState = { "settings" : this.options,
- "activatedSteps" : this.activatedSteps,
"isLastStep" : this.isLastStep,
"isFirstStep" : this.currentStep === this.firstStep,
"previousStep" : this.previousStep,
"currentStep" : this.currentStep,
"backButton" : this.backButton,
"nextButton" : this.nextButton,
"steps" : this.steps,
"firstStep" : this.firstStep
- }
+ };
- if(state !== undefined)
+ if (state !== undefined) {
return currentState[state];
+ }
return currentState;
},
/*Methods*/
- show : function(step){
- if(this.options.historyEnabled){
- this._updateHistory(step);
- }else{
- this._show(step);
- }
+ show : function(step) {
+ this._updateHistory(step);
},
+ redirect : function(step) {
+ this._redirect(step);
+ },
+
state : function(state){
return this._state(state);
},
reset : function(){
@@ -462,11 +477,10 @@
this.element.find("*").removeAttr("disabled").show();
this.nextButton.unbind("click").val(this.nextButtonInitinalValue).removeClass("ui-state-disabled").addClass("ui-state-active");
this.backButton.unbind("click").val(this.backButtonInitinalValue).removeClass("ui-state-disabled").addClass("ui-state-active");
this.backButtonInitinalValue = undefined;
this.nextButtonInitinalValue = undefined;
- this.activatedSteps = undefined;
this.previousStep = undefined;
this.currentStep = undefined;
this.isLastStep = undefined;
this.options = undefined;
this.nextButton = undefined;
@@ -487,18 +501,21 @@
this.steps.addClass("ui-helper-reset ui-corner-all");
this.steps.find(":input").addClass("ui-helper-reset ui-state-default");
}
},
+ update_buttons : function() {
+ this._updateButtons();
+ },
+
options: {
- historyEnabled : false,
validationEnabled : false,
validationOptions : undefined,
formPluginEnabled : false,
linkClass : ".link",
submitStepClass : "submit_step",
- back : ":reset",
- next : ":submit",
+ back : "input:reset",
+ next : "input:submit",
textSubmit : 'Submit',
textNext : 'Next',
textBack : 'Back',
remoteAjax : undefined,
inAnimation : {opacity: 'show'},