github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/public/root/js/jquery.wizard.js (about) 1 /* 2 * jQuery wizard plug-in 3.0.5 3 * 4 * 5 * Copyright (c) 2011 Jan Sundman (jan.sundman[at]aland.net) 6 * 7 * http://www.thecodemine.org 8 * 9 * Licensed under the MIT licens: 10 * http://www.opensource.org/licenses/mit-license.php 11 * 12 */ 13 14 15 (function($){ 16 $.widget("ui.formwizard", { 17 18 _init: function() { 19 20 var wizard = this; 21 var formOptionsSuccess = this.options.formOptions.success; 22 var formOptionsComplete = this.options.formOptions.complete; 23 var formOptionsBeforeSend = this.options.formOptions.beforeSend; 24 var formOptionsBeforeSubmit = this.options.formOptions.beforeSubmit; 25 var formOptionsBeforeSerialize = this.options.formOptions.beforeSerialize; 26 this.options.formOptions = $.extend(this.options.formOptions,{ 27 success : function(responseText, textStatus, xhr){ 28 if(formOptionsSuccess){ 29 formOptionsSuccess(responseText, textStatus, xhr); 30 } 31 if(wizard.options.formOptions && wizard.options.formOptions.resetForm || !wizard.options.formOptions){ 32 wizard._reset(); 33 } 34 }, 35 complete : function(xhr, textStatus){ 36 if(formOptionsComplete){ 37 formOptionsComplete(xhr, textStatus); 38 } 39 wizard._enableNavigation(); 40 }, 41 beforeSubmit : function(arr, theForm, options) { 42 if(formOptionsBeforeSubmit){ 43 var shouldSubmit = formOptionsBeforeSubmit(arr, theForm, options); 44 if(!shouldSubmit) 45 wizard._enableNavigation(); 46 return shouldSubmit; 47 } 48 }, 49 beforeSend : function(xhr) { 50 if(formOptionsBeforeSend){ 51 var shouldSubmit = formOptionsBeforeSend(xhr); 52 if(!shouldSubmit) 53 wizard._enableNavigation(); 54 return shouldSubmit; 55 } 56 }, 57 beforeSerialize: function(form, options) { 58 if(formOptionsBeforeSerialize){ 59 var shouldSubmit = formOptionsBeforeSerialize(form, options); 60 if(!shouldSubmit) 61 wizard._enableNavigation(); 62 return shouldSubmit; 63 } 64 } 65 }); 66 67 this.steps = this.element.find(".step").hide(); 68 69 this.firstStep = this.steps.eq(0).attr("id"); 70 this.activatedSteps = new Array(); 71 this.isLastStep = false; 72 this.previousStep = undefined; 73 this.currentStep = this.steps.eq(0).attr("id"); 74 this.nextButton = this.element.find(this.options.next) 75 .click(function() { 76 return wizard._next(); 77 }); 78 79 this.nextButtonInitinalValue = this.nextButton.val(); 80 this.nextButton.val(this.options.textNext); 81 82 this.backButton = this.element.find(this.options.back) 83 .click(function() { 84 wizard._back();return false; 85 }); 86 87 this.backButtonInitinalValue = this.backButton.val(); 88 this.backButton.val(this.options.textBack); 89 90 if(this.options.validationEnabled && jQuery().validate == undefined){ 91 this.options.validationEnabled = false; 92 if( (window['console'] !== undefined) ){ 93 console.log("%s", "validationEnabled option set, but the validation plugin is not included"); 94 } 95 }else if(this.options.validationEnabled){ 96 this.element.validate(this.options.validationOptions); 97 } 98 if(this.options.formPluginEnabled && jQuery().ajaxSubmit == undefined){ 99 this.options.formPluginEnabled = false; 100 if( (window['console'] !== undefined) ){ 101 console.log("%s", "formPluginEnabled option set but the form plugin is not included"); 102 } 103 } 104 105 if(this.options.disableInputFields == true){ 106 $(this.steps).find(":input:not('.wizard-ignore')").attr("disabled","disabled"); 107 } 108 109 if(this.options.historyEnabled){ 110 $(window).bind('hashchange', undefined, function(event){ 111 var hashStep = event.getState( "_" + $(wizard.element).attr( 'id' )) || wizard.firstStep; 112 if(hashStep !== wizard.currentStep){ 113 if(wizard.options.validationEnabled && hashStep === wizard._navigate(wizard.currentStep)){ 114 if(!wizard.element.valid()){ 115 wizard._updateHistory(wizard.currentStep); 116 wizard.element.validate().focusInvalid(); 117 118 return false; 119 } 120 } 121 if(hashStep !== wizard.currentStep) 122 wizard._show(hashStep); 123 } 124 }); 125 } 126 127 this.element.addClass("ui-formwizard"); 128 this.element.find(":input").addClass("ui-wizard-content"); 129 this.steps.addClass("ui-formwizard-content"); 130 this.backButton.addClass("ui-formwizard-button ui-wizard-content"); 131 this.nextButton.addClass("ui-formwizard-button ui-wizard-content"); 132 133 if(!this.options.disableUIStyles){ 134 this.element.addClass("ui-helper-reset ui-widget ui-widget-content ui-helper-reset ui-corner-all"); 135 this.element.find(":input").addClass("ui-helper-reset ui-state-default"); 136 this.steps.addClass("ui-helper-reset ui-corner-all"); 137 this.backButton.addClass("ui-helper-reset ui-state-default"); 138 this.nextButton.addClass("ui-helper-reset ui-state-default"); 139 } 140 this._show(undefined); 141 return $(this); 142 }, 143 144 _next : function(){ 145 if(this.options.validationEnabled){ 146 if(!this.element.valid()){ 147 this.element.validate().focusInvalid(); 148 return false; 149 } 150 } 151 152 if(this.options.remoteAjax != undefined){ 153 var options = this.options.remoteAjax[this.currentStep]; 154 var wizard = this; 155 if(options !== undefined){ 156 var success = options.success; 157 var beforeSend = options.beforeSend; 158 var complete = options.complete; 159 160 options = $.extend({},options,{ 161 success: function(data, statusText){ 162 if((success !== undefined && success(data, statusText)) || (success == undefined)){ 163 wizard._continueToNextStep(); 164 } 165 }, 166 beforeSend : function(xhr){ 167 wizard._disableNavigation(); 168 if(beforeSend !== undefined) 169 beforeSend(xhr); 170 $(wizard.element).trigger('before_remote_ajax', {"currentStep" : wizard.currentStep}); 171 }, 172 complete : function(xhr, statusText){ 173 if(complete !== undefined) 174 complete(xhr, statusText); 175 $(wizard.element).trigger('after_remote_ajax', {"currentStep" : wizard.currentStep}); 176 wizard._enableNavigation(); 177 } 178 }) 179 this.element.ajaxSubmit(options); 180 return false; 181 } 182 } 183 184 return this._continueToNextStep(); 185 }, 186 187 _back : function(){ 188 if(this.activatedSteps.length > 0){ 189 if(this.options.historyEnabled){ 190 this._updateHistory(this.activatedSteps[this.activatedSteps.length - 2]); 191 }else{ 192 this._show(this.activatedSteps[this.activatedSteps.length - 2], true); 193 } 194 } 195 return false; 196 }, 197 198 _continueToNextStep : function(){ 199 if(this.isLastStep){ 200 for(var i = 0; i < this.activatedSteps.length; i++){ 201 this.steps.filter("#" + this.activatedSteps[i]).find(":input").not(".wizard-ignore").removeAttr("disabled"); 202 } 203 if(!this.options.formPluginEnabled){ 204 return true; 205 }else{ 206 this._disableNavigation(); 207 this.element.ajaxSubmit(this.options.formOptions); 208 return false; 209 } 210 } 211 212 var step = this._navigate(this.currentStep); 213 if(step == this.currentStep){ 214 return false; 215 } 216 if(this.options.historyEnabled){ 217 this._updateHistory(step); 218 }else{ 219 this._show(step, true); 220 } 221 return false; 222 }, 223 224 _updateHistory : function(step){ 225 var state = {}; 226 state["_" + $(this.element).attr('id')] = step; 227 $.bbq.pushState(state); 228 }, 229 230 _disableNavigation : function(){ 231 this.nextButton.attr("disabled","disabled"); 232 this.backButton.attr("disabled","disabled"); 233 if(!this.options.disableUIStyles){ 234 this.nextButton.removeClass("ui-state-active").addClass("ui-state-disabled"); 235 this.backButton.removeClass("ui-state-active").addClass("ui-state-disabled"); 236 } 237 }, 238 239 _enableNavigation : function(){ 240 if(this.isLastStep){ 241 this.nextButton.val(this.options.textSubmit); 242 }else{ 243 this.nextButton.val(this.options.textNext); 244 } 245 246 if($.trim(this.currentStep) !== this.steps.eq(0).attr("id")){ 247 this.backButton.removeAttr("disabled"); 248 if(!this.options.disableUIStyles){ 249 this.backButton.removeClass("ui-state-disabled").addClass("ui-state-active"); 250 } 251 } 252 253 this.nextButton.removeAttr("disabled"); 254 if(!this.options.disableUIStyles){ 255 this.nextButton.removeClass("ui-state-disabled").addClass("ui-state-active"); 256 } 257 }, 258 259 _animate : function(oldStep, newStep, stepShownCallback){ 260 this._disableNavigation(); 261 var old = this.steps.filter("#" + oldStep); 262 var current = this.steps.filter("#" + newStep); 263 old.find(":input").not(".wizard-ignore").attr("disabled","disabled"); 264 current.find(":input").not(".wizard-ignore").removeAttr("disabled"); 265 var wizard = this; 266 old.animate(wizard.options.outAnimation, wizard.options.outDuration, wizard.options.easing, function(){ 267 current.animate(wizard.options.inAnimation, wizard.options.inDuration, wizard.options.easing, function(){ 268 if(wizard.options.focusFirstInput) 269 current.find(":input:first").focus(); 270 wizard._enableNavigation(); 271 272 stepShownCallback.apply(wizard); 273 }); 274 return; 275 }); 276 }, 277 278 _checkIflastStep : function(step){ 279 this.isLastStep = false; 280 if($("#" + step).hasClass(this.options.submitStepClass) || this.steps.filter(":last").attr("id") == step){ 281 this.isLastStep = true; 282 } 283 }, 284 285 _getLink : function(step){ 286 var link = undefined; 287 var links = this.steps.filter("#" + step).find(this.options.linkClass); 288 289 if(links != undefined){ 290 if(links.filter(":radio,:checkbox").size() > 0){ 291 link = links.filter(this.options.linkClass + ":checked").val(); 292 }else{ 293 link = $(links).val(); 294 } 295 } 296 return link; 297 }, 298 299 _navigate : function(step){ 300 var link = this._getLink(step); 301 if(link != undefined){ 302 if((link != "" && link != null && link != undefined) && this.steps.filter("#" + link).attr("id") != undefined){ 303 return link; 304 } 305 return this.currentStep; 306 }else if(link == undefined && !this.isLastStep){ 307 var step1 = this.steps.filter("#" + step).next().attr("id"); 308 return step1; 309 } 310 }, 311 312 _show : function(step){ 313 var backwards = false; 314 var triggerStepShown = step !== undefined; 315 if(step == undefined || step == ""){ 316 this.activatedSteps.pop(); 317 step = this.firstStep; 318 this.activatedSteps.push(step); 319 }else{ 320 if($.inArray(step, this.activatedSteps) > -1){ 321 backwards = true; 322 this.activatedSteps.pop(); 323 }else { 324 this.activatedSteps.push(step); 325 } 326 } 327 328 if(this.currentStep !== step || step === this.firstStep){ 329 this.previousStep = this.currentStep; 330 this._checkIflastStep(step); 331 this.currentStep = step; 332 var stepShownCallback = function(){if(triggerStepShown)$(this.element).trigger('step_shown', $.extend({"isBackNavigation" : backwards},this._state()));}; 333 this._animate(this.previousStep, step, stepShownCallback); 334 }; 335 336 337 }, 338 339 _reset : function(){ 340 this.element.resetForm() 341 $("label,:input,textarea",this).removeClass("error"); 342 for(var i = 0; i < this.activatedSteps.length; i++){ 343 this.steps.filter("#" + this.activatedSteps[i]).hide().find(":input").attr("disabled","disabled"); 344 } 345 this.activatedSteps = new Array(); 346 this.previousStep = undefined; 347 this.isLastStep = false; 348 if(this.options.historyEnabled){ 349 this._updateHistory(this.firstStep); 350 }else{ 351 this._show(this.firstStep); 352 } 353 354 }, 355 356 _state : function(state){ 357 var currentState = { "settings" : this.options, 358 "activatedSteps" : this.activatedSteps, 359 "isLastStep" : this.isLastStep, 360 "isFirstStep" : this.currentStep === this.firstStep, 361 "previousStep" : this.previousStep, 362 "currentStep" : this.currentStep, 363 "backButton" : this.backButton, 364 "nextButton" : this.nextButton, 365 "steps" : this.steps, 366 "firstStep" : this.firstStep 367 } 368 369 if(state !== undefined) 370 return currentState[state]; 371 372 return currentState; 373 }, 374 375 /*Methods*/ 376 377 show : function(step){ 378 if(this.options.historyEnabled){ 379 this._updateHistory(step); 380 }else{ 381 this._show(step); 382 } 383 }, 384 385 state : function(state){ 386 return this._state(state); 387 }, 388 389 reset : function(){ 390 this._reset(); 391 }, 392 393 next : function(){ 394 this._next(); 395 }, 396 397 back : function(){ 398 this._back(); 399 }, 400 401 destroy: function() { 402 this.element.find("*").removeAttr("disabled").show(); 403 this.nextButton.unbind("click").val(this.nextButtonInitinalValue).removeClass("ui-state-disabled").addClass("ui-state-active"); 404 this.backButton.unbind("click").val(this.backButtonInitinalValue).removeClass("ui-state-disabled").addClass("ui-state-active"); 405 this.backButtonInitinalValue = undefined; 406 this.nextButtonInitinalValue = undefined; 407 this.activatedSteps = undefined; 408 this.previousStep = undefined; 409 this.currentStep = undefined; 410 this.isLastStep = undefined; 411 this.options = undefined; 412 this.nextButton = undefined; 413 this.backButton = undefined; 414 this.formwizard = undefined; 415 this.element = undefined; 416 this.steps = undefined; 417 this.firstStep = undefined; 418 }, 419 420 update_steps : function(){ 421 this.steps = this.element.find(".step").addClass("ui-formwizard-content"); 422 this.steps.not("#" + this.currentStep).hide().find(":input").addClass("ui-wizard-content").attr("disabled","disabled"); 423 this._checkIflastStep(this.currentStep); 424 this._enableNavigation(); 425 if(!this.options.disableUIStyles){ 426 this.steps.addClass("ui-helper-reset ui-corner-all"); 427 this.steps.find(":input").addClass("ui-helper-reset ui-state-default"); 428 } 429 }, 430 431 options: { 432 historyEnabled : false, 433 validationEnabled : false, 434 validationOptions : undefined, 435 formPluginEnabled : false, 436 linkClass : ".link", 437 submitStepClass : "submit_step", 438 back : ":reset", 439 next : ":submit", 440 textSubmit : 'Submit', 441 textNext : 'Next', 442 textBack : 'Back', 443 remoteAjax : undefined, 444 inAnimation : {opacity: 'show'}, 445 outAnimation: {opacity: 'hide'}, 446 inDuration : 400, 447 outDuration: 400, 448 easing: 'swing', 449 focusFirstInput : false, 450 disableInputFields : true, 451 formOptions : { reset: true, success: function(data) { if( (window['console'] !== undefined) ){console.log("%s", "form submit successful");}}, 452 disableUIStyles : false 453 } 454 } 455 }); 456 })(jQuery);