457 lines
14 KiB
JavaScript
457 lines
14 KiB
JavaScript
/*
|
|
* jQuery wizard plug-in 3.0.5
|
|
*
|
|
*
|
|
* Copyright (c) 2011 Jan Sundman (jan.sundman[at]aland.net)
|
|
*
|
|
* http://www.thecodemine.org
|
|
*
|
|
* Licensed under the MIT licens:
|
|
* http://www.opensource.org/licenses/mit-license.php
|
|
*
|
|
*/
|
|
|
|
|
|
(function($){
|
|
$.widget("ui.formwizard", {
|
|
|
|
_init: function() {
|
|
|
|
var wizard = this;
|
|
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){
|
|
formOptionsSuccess(responseText, textStatus, xhr);
|
|
}
|
|
if(wizard.options.formOptions && wizard.options.formOptions.resetForm || !wizard.options.formOptions){
|
|
wizard._reset();
|
|
}
|
|
},
|
|
complete : function(xhr, textStatus){
|
|
if(formOptionsComplete){
|
|
formOptionsComplete(xhr, textStatus);
|
|
}
|
|
wizard._enableNavigation();
|
|
},
|
|
beforeSubmit : function(arr, theForm, options) {
|
|
if(formOptionsBeforeSubmit){
|
|
var shouldSubmit = formOptionsBeforeSubmit(arr, theForm, options);
|
|
if(!shouldSubmit)
|
|
wizard._enableNavigation();
|
|
return shouldSubmit;
|
|
}
|
|
},
|
|
beforeSend : function(xhr) {
|
|
if(formOptionsBeforeSend){
|
|
var shouldSubmit = formOptionsBeforeSend(xhr);
|
|
if(!shouldSubmit)
|
|
wizard._enableNavigation();
|
|
return shouldSubmit;
|
|
}
|
|
},
|
|
beforeSerialize: function(form, options) {
|
|
if(formOptionsBeforeSerialize){
|
|
var shouldSubmit = formOptionsBeforeSerialize(form, options);
|
|
if(!shouldSubmit)
|
|
wizard._enableNavigation();
|
|
return shouldSubmit;
|
|
}
|
|
}
|
|
});
|
|
|
|
this.steps = this.element.find(".step").hide();
|
|
|
|
this.firstStep = this.steps.eq(0).attr("id");
|
|
this.activatedSteps = new Array();
|
|
this.isLastStep = false;
|
|
this.previousStep = undefined;
|
|
this.currentStep = this.steps.eq(0).attr("id");
|
|
this.nextButton = this.element.find(this.options.next)
|
|
.click(function() {
|
|
return wizard._next();
|
|
});
|
|
|
|
this.nextButtonInitinalValue = this.nextButton.val();
|
|
this.nextButton.val(this.options.textNext);
|
|
|
|
this.backButton = this.element.find(this.options.back)
|
|
.click(function() {
|
|
wizard._back();return false;
|
|
});
|
|
|
|
this.backButtonInitinalValue = this.backButton.val();
|
|
this.backButton.val(this.options.textBack);
|
|
|
|
if(this.options.validationEnabled && jQuery().validate == undefined){
|
|
this.options.validationEnabled = false;
|
|
if( (window['console'] !== undefined) ){
|
|
console.log("%s", "validationEnabled option set, but the validation plugin is not included");
|
|
}
|
|
}else if(this.options.validationEnabled){
|
|
this.element.validate(this.options.validationOptions);
|
|
}
|
|
if(this.options.formPluginEnabled && jQuery().ajaxSubmit == undefined){
|
|
this.options.formPluginEnabled = false;
|
|
if( (window['console'] !== undefined) ){
|
|
console.log("%s", "formPluginEnabled option set but the form plugin is not included");
|
|
}
|
|
}
|
|
|
|
if(this.options.disableInputFields == true){
|
|
$(this.steps).find(":input:not('.wizard-ignore')").attr("disabled","disabled");
|
|
}
|
|
|
|
if(this.options.historyEnabled){
|
|
$(window).bind('hashchange', undefined, function(event){
|
|
var hashStep = event.getState( "_" + $(wizard.element).attr( 'id' )) || wizard.firstStep;
|
|
if(hashStep !== wizard.currentStep){
|
|
if(wizard.options.validationEnabled && hashStep === wizard._navigate(wizard.currentStep)){
|
|
if(!wizard.element.valid()){
|
|
wizard._updateHistory(wizard.currentStep);
|
|
wizard.element.validate().focusInvalid();
|
|
|
|
return false;
|
|
}
|
|
}
|
|
if(hashStep !== wizard.currentStep)
|
|
wizard._show(hashStep);
|
|
}
|
|
});
|
|
}
|
|
|
|
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");
|
|
this.nextButton.addClass("ui-formwizard-button ui-wizard-content");
|
|
|
|
if(!this.options.disableUIStyles){
|
|
this.element.addClass("ui-helper-reset ui-widget ui-widget-content ui-helper-reset ui-corner-all");
|
|
this.element.find(":input").addClass("ui-helper-reset ui-state-default");
|
|
this.steps.addClass("ui-helper-reset ui-corner-all");
|
|
this.backButton.addClass("ui-helper-reset ui-state-default");
|
|
this.nextButton.addClass("ui-helper-reset ui-state-default");
|
|
}
|
|
this._show(undefined);
|
|
return $(this);
|
|
},
|
|
|
|
_next : function(){
|
|
if(this.options.validationEnabled){
|
|
if(!this.element.valid()){
|
|
this.element.validate().focusInvalid();
|
|
return false;
|
|
}
|
|
}
|
|
|
|
if(this.options.remoteAjax != undefined){
|
|
var options = this.options.remoteAjax[this.currentStep];
|
|
var wizard = this;
|
|
if(options !== undefined){
|
|
var success = options.success;
|
|
var beforeSend = options.beforeSend;
|
|
var complete = options.complete;
|
|
|
|
options = $.extend({},options,{
|
|
success: function(data, statusText){
|
|
if((success !== undefined && success(data, statusText)) || (success == undefined)){
|
|
wizard._continueToNextStep();
|
|
}
|
|
},
|
|
beforeSend : function(xhr){
|
|
wizard._disableNavigation();
|
|
if(beforeSend !== undefined)
|
|
beforeSend(xhr);
|
|
$(wizard.element).trigger('before_remote_ajax', {"currentStep" : wizard.currentStep});
|
|
},
|
|
complete : function(xhr, statusText){
|
|
if(complete !== undefined)
|
|
complete(xhr, statusText);
|
|
$(wizard.element).trigger('after_remote_ajax', {"currentStep" : wizard.currentStep});
|
|
wizard._enableNavigation();
|
|
}
|
|
})
|
|
this.element.ajaxSubmit(options);
|
|
return false;
|
|
}
|
|
}
|
|
|
|
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);
|
|
}
|
|
}
|
|
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){
|
|
return false;
|
|
}
|
|
if(this.options.historyEnabled){
|
|
this._updateHistory(step);
|
|
}else{
|
|
this._show(step, true);
|
|
}
|
|
return false;
|
|
},
|
|
|
|
_updateHistory : function(step){
|
|
var state = {};
|
|
state["_" + $(this.element).attr('id')] = step;
|
|
$.bbq.pushState(state);
|
|
},
|
|
|
|
_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");
|
|
}
|
|
},
|
|
|
|
_enableNavigation : function(){
|
|
if(this.isLastStep){
|
|
this.nextButton.val(this.options.textSubmit);
|
|
}else{
|
|
this.nextButton.val(this.options.textNext);
|
|
}
|
|
|
|
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");
|
|
}
|
|
}
|
|
|
|
this.nextButton.removeAttr("disabled");
|
|
if(!this.options.disableUIStyles){
|
|
this.nextButton.removeClass("ui-state-disabled").addClass("ui-state-active");
|
|
}
|
|
},
|
|
|
|
_animate : function(oldStep, newStep, stepShownCallback){
|
|
this._disableNavigation();
|
|
var old = this.steps.filter("#" + oldStep);
|
|
var current = this.steps.filter("#" + newStep);
|
|
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();
|
|
wizard._enableNavigation();
|
|
|
|
stepShownCallback.apply(wizard);
|
|
});
|
|
return;
|
|
});
|
|
},
|
|
|
|
_checkIflastStep : function(step){
|
|
this.isLastStep = false;
|
|
if($("#" + step).hasClass(this.options.submitStepClass) || this.steps.filter(":last").attr("id") == step){
|
|
this.isLastStep = true;
|
|
}
|
|
},
|
|
|
|
_getLink : function(step){
|
|
var link = undefined;
|
|
var links = this.steps.filter("#" + step).find(this.options.linkClass);
|
|
|
|
if(links != undefined){
|
|
if(links.filter(":radio,:checkbox").size() > 0){
|
|
link = links.filter(this.options.linkClass + ":checked").val();
|
|
}else{
|
|
link = $(links).val();
|
|
}
|
|
}
|
|
return link;
|
|
},
|
|
|
|
_navigate : function(step){
|
|
var link = this._getLink(step);
|
|
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){
|
|
var step1 = this.steps.filter("#" + step).next().attr("id");
|
|
return step1;
|
|
}
|
|
},
|
|
|
|
_show : function(step){
|
|
var backwards = false;
|
|
var triggerStepShown = step !== undefined;
|
|
if(step == undefined || step == ""){
|
|
this.activatedSteps.pop();
|
|
step = this.firstStep;
|
|
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){
|
|
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()));};
|
|
this._animate(this.previousStep, step, stepShownCallback);
|
|
};
|
|
|
|
|
|
},
|
|
|
|
_reset : function(){
|
|
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);
|
|
}
|
|
|
|
},
|
|
|
|
_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)
|
|
return currentState[state];
|
|
|
|
return currentState;
|
|
},
|
|
|
|
/*Methods*/
|
|
|
|
show : function(step){
|
|
if(this.options.historyEnabled){
|
|
this._updateHistory(step);
|
|
}else{
|
|
this._show(step);
|
|
}
|
|
},
|
|
|
|
state : function(state){
|
|
return this._state(state);
|
|
},
|
|
|
|
reset : function(){
|
|
this._reset();
|
|
},
|
|
|
|
next : function(){
|
|
this._next();
|
|
},
|
|
|
|
back : function(){
|
|
this._back();
|
|
},
|
|
|
|
destroy: function() {
|
|
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;
|
|
this.backButton = undefined;
|
|
this.formwizard = undefined;
|
|
this.element = undefined;
|
|
this.steps = undefined;
|
|
this.firstStep = undefined;
|
|
},
|
|
|
|
update_steps : function(){
|
|
this.steps = this.element.find(".step").addClass("ui-formwizard-content");
|
|
this.steps.not("#" + this.currentStep).hide().find(":input").addClass("ui-wizard-content").attr("disabled","disabled");
|
|
this._checkIflastStep(this.currentStep);
|
|
this._enableNavigation();
|
|
if(!this.options.disableUIStyles){
|
|
this.steps.addClass("ui-helper-reset ui-corner-all");
|
|
this.steps.find(":input").addClass("ui-helper-reset ui-state-default");
|
|
}
|
|
},
|
|
|
|
options: {
|
|
historyEnabled : false,
|
|
validationEnabled : false,
|
|
validationOptions : undefined,
|
|
formPluginEnabled : false,
|
|
linkClass : ".link",
|
|
submitStepClass : "submit_step",
|
|
back : ":reset",
|
|
next : ":submit",
|
|
textSubmit : 'Submit',
|
|
textNext : 'Next',
|
|
textBack : 'Back',
|
|
remoteAjax : undefined,
|
|
inAnimation : {opacity: 'show'},
|
|
outAnimation: {opacity: 'hide'},
|
|
inDuration : 400,
|
|
outDuration: 400,
|
|
easing: 'swing',
|
|
focusFirstInput : false,
|
|
disableInputFields : true,
|
|
formOptions : { reset: true, success: function(data) { if( (window['console'] !== undefined) ){console.log("%s", "form submit successful");}},
|
|
disableUIStyles : false
|
|
}
|
|
}
|
|
});
|
|
})(jQuery);
|