step-form-wizard.min.js 9.62 KB
/* http://ajoke.cz/wizard/ */
/* Copyright ajoke.cz */
(function(e){function n(n,r){var i=this;i.config=e.extend({},t,r);i.element=n;i.steps=n.find("fieldset");if(!i.config.showLegend){i.element.addClass("sf-hide-legend")}i.btnFinishTmp=i.config.finishBtn;i.btnPrevTmp=i.config.prevBtn;i.btnNextTmp=i.config.nextBtn;i.viewPort;i.navWrap;i.stepOffset=i.config.stepOffset;if(i.config.startStep>=i.steps.length){i.config.startStep=i.steps.length-1}i.stepActive=i.config.startStep;i.init();n.trigger("sf-loaded");return i}var t={duration:500,timingFunction:"swing",linkNav:true,showNav:true,showNavNumbers:true,showButtons:true,showLegend:true,nextBtn:e('<a class="next-btn sf-right sf-btn" href="#">NEXT</a>'),prevBtn:e('<a class="prev-btn sf-left sf-btn" href="#">PREV</a>'),finishBtn:e('<input class="finish-btn sf-right sf-btn" type="submit" value="FINISH"/>'),onNext:function(e,t){},onPrev:function(e,t){},onFinish:function(e,t){},onSlideChanged:function(e,t,n){},startStep:0,stepOffset:10,height:"first",theme:"sea",markPrevSteps:false};n.prototype.init=function(){this.element.append(e("<div>").addClass("sf-viewport"));this.viewPort=e(".sf-viewport",this.element);this.element.wrap(e("<div>").addClass("sf-wizard").attr("id",this.element.attr("id")+"-box"));this.wizard=this.element.parent();this.wizard.parent().addClass("sf-"+this.config.theme);if(!this.config.showNavNumbers){this.wizard.addClass("sf-nonumbers")}e(this.viewPort).append(e("<div>").addClass("sf-fieldwrap clearfix"));this.fieldWrap=e(".sf-fieldwrap",this.element);this.element.append(e("<div>").addClass("sf-controls clearfix"));this.controls=e(".sf-controls",this.element);if(!this.config.showButtons){this.controls.addClass("sf-hide-buttons")}var t=this;if(this.config.showNav!==false){this.initNav()}this.steps.each(function(n){var r=e("<div>").addClass("sf-step sf-step-"+n);if(n==t.config.startStep){r.addClass("sf-step-active")}else{r.addClass("sf-step-no-active")}e(this).wrap(r).parent().appendTo(t.fieldWrap);e(this).append(e("<div>").addClass("sf-"+n));if(n==t.config.startStep){t.initBtnFinish(t.config.startStep);t.initBtnNext(t.config.startStep);t.initBtnPrev(t.config.startStep);if(t.config.startStep==0){t.element.find(".sf-btn-prev").hide()}if(t.config.startStep!=t.steps.length-1){t.element.find(".sf-btn-finish").hide()}else{t.element.find(".sf-btn-next").hide()}}});this.setProportion();e(window).resize(function(){t.careNav(t.stepActive,t.stepActive);t.setProportion()});t.element.on("click",".next-btn",function(n,r){var i=false;if(t.config.onNext(t.stepActive,t.wizard)!==false){i=t.goTo(e(".sf-controls .next-btn",t.element).data("step"))}if(r!==undefined){r.ret=i}n.preventDefault()});t.element.on("click",".prev-btn",function(n,r){var i=false;if(t.config.onPrev(t.stepActive,t.wizard)!==false){i=t.goTo(e(".sf-controls .prev-btn",t.element).data("step"))}if(r!==undefined){r.ret=i}n.preventDefault()});t.element.on("click",".finish-btn",function(e,n){var r=false;var i=jQuery.Event("sf-finish");t.element.trigger(i,[t.stepActive,t.stepActive,t.wizard]);if(t.config.onFinish(t.stepActive,t.wizard)===false||i.isDefaultPrevented()){e.preventDefault()}else{r=true}if(n!==undefined){n.ret=r}});t.element.on("keydown",":input",function(e){var n=e.keyCode||e.which;if(n==13){t.next();e.preventDefault()}})};n.prototype.initNav=function(){var t=this;var n=e("<div>").addClass("sf-nav-wrap clearfix");var r=e("<ul>").addClass("sf-nav clearfix");n.append(r);if(t.config.showNav=="bottom"){this.element.after(n)}else{this.element.before(n)}this.navWrap=e(".sf-nav-wrap",t.wizard);this.steps.each(function(n){var r=e("<li>").addClass("sf-nav-step sf-nav-step-"+n).data("step",n);if(t.config.markPrevSteps&&n<t.config.startStep){r.addClass("sf-nav-prev-step")}if(t.config.showNavNumbers){r.addClass("sf-li-number")}else{r.addClass("sf-li-nonumber")}e("<span>").addClass("sf-nav-subtext").html(e(this).find("legend").first().html()).appendTo(r);var i=e("<div>").addClass("sf-nav-number").appendTo(r);e("<span>").addClass("sf-nav-number-inner").html(n+1).appendTo(i);i=e("<div>").appendTo(r);if(n==t.config.startStep){r.addClass("sf-active")}if(t.config.linkNav==true){r.addClass("sf-nav-link")}if(t.config.showNav=="left"){e(".sf-nav-wrap",t.wizard).addClass("sf-nav-left");t.element.addClass("sf-nav-on-left")}if(t.config.showNav=="right"){e(".sf-nav-wrap",t.wizard).addClass("sf-nav-right");t.element.addClass("sf-nav-on-right")}if(t.config.showNav=="top"||t.config.showNav===true){e(".sf-nav-wrap",t.wizard).addClass("sf-nav-top");t.element.addClass("sf-nav-on-top")}if(t.config.showNav=="bottom"){e(".sf-nav-wrap",t.wizard).addClass("sf-nav-bottom");t.element.addClass("sf-nav-on-bottom")}t.wizard.find(".sf-nav").append(r)});e(".sf-nav-step.sf-nav-link",t.wizard).on("click",function(n){var r=e(this).data("step");var i=t.stepActive-r;var s=t.stepActive;if(i<0){for(var o=t.stepActive;o<r;o++){if(t.config.onNext(o)!==false){s=o+1}else{break}}}else{for(var o=t.stepActive;o>r;o--){if(t.config.onPrev(o)!==false){s=o-1}else{break}}}t.goTo(s);n.preventDefault()});this.careNav(this.stepActive,this.stepActive)};n.prototype.setProportion=function(){this.stepWidth=this.viewPort.width();var t=this.stepWidth*this.steps.length;var n=0;if(this.config.height=="auto"&&this.steps.length){this.viewPort.height("auto");var r=e(this.steps[this.stepActive]).outerHeight(true);this.viewPort.height(r)}if(this.config.height=="first"&&this.steps.length){e(this.steps[0]).height("auto");n=e(this.steps[0]).height()}if(!isNaN(parseInt(this.config.height))&&this.steps.length){n=this.config.height}if(this.config.height=="tallest"&&this.steps.length){this.steps.each(function(t){e(this).height("auto");if(e(this).height()>n){n=e(this).height()}})}var i=this;this.steps.each(function(t){var r=e(this).parent();r.css({width:i.stepWidth+"px","float":"left","margin-right":i.stepOffset+"px"});if(n){e(this).height(n)}});this.fieldWrap.width(t+this.stepOffset*this.steps.length+"px");this.fieldWrap.css({"margin-left":"-"+(this.stepActive*this.stepWidth+this.stepOffset*this.stepActive)+"px"})};n.prototype.goTo=function(t){var n=this;var r=this.stepActive;var i=r-t;var s=jQuery.Event("sf-step-before");n.element.trigger(s,[r,t,n.wizard]);if(s.isDefaultPrevented()){return false}if(n.config.markPrevSteps){e(".sf-nav-step",n.navWrap).each(function(n){e(this).removeClass("sf-nav-prev-step");if(n<t){e(this).addClass("sf-nav-prev-step")}})}this.careNav(t,r);n.element.find(".sf-step").removeClass("sf-step-no-active").addClass("sf-step-active");var o="+=";if(i<0){o="-="}i=Math.abs(i);var u=i*this.stepWidth+this.stepOffset*i;this.fieldWrap.animate({"margin-left":o+u},this.config.duration*i,this.config.timingFunction,function(){n.element.find(".sf-step").removeClass("sf-step-active").addClass("sf-step-no-active");n.element.find(".sf-step-"+t).removeClass("sf-step-no-active").addClass("sf-step-active");n.element.trigger("sf-step-after",[r,t,n.wizard]);n.config.onSlideChanged(r,t,this.wizard)});this.stepActive=t;e(".sf-nav-step",this.wizard).removeClass("sf-active");e(".sf-nav-step-"+t,this.wizard).addClass("sf-active");if(this.config.height=="auto"&&this.steps.length){var a=e(this.steps[this.stepActive]).outerHeight(true);this.viewPort.animate({height:a+"px"},this.config.duration,this.config.timingFunction)}if(t+1<this.steps.length){this.btnNext.data("step",t+1).fadeIn(100)}else{this.btnNext.fadeOut(0)}if(t+1>=this.steps.length){this.btnFinish.data("step",t-1).fadeIn(100)}else{this.btnFinish.fadeOut(0)}if(t==0){this.btnPrev.fadeOut(100)}else{this.btnPrev.data("step",t-1).fadeIn(100)}return true};n.prototype.careNav=function(t,n){var r=this;if(r.config.showNav!==false){var i=r.navWrap.width();var s=new Array;if(r.navWrap.hasClass("sf-nav-top")||r.navWrap.hasClass("sf-nav-bottom")){var o=0;var u=0;e(".sf-nav-step",r.navWrap).each(function(n){s[n]=e(this).outerWidth(true);u+=s[n];if(n<t){o+=s[n]}});if(n-t>=0){o=o-s[t-1]}if(u>i){var a=u-i;var f=t-1;var l=0;if(n-t<0){f=t+1;l=-50}if(o>a){o=a;l=0}var c=e(".sf-nav-step-"+f,this.wizard);if(c.length){e(".sf-nav",r.navWrap).animate({left:"-"+(o+l)+"px"},this.config.duration)}else{if(f<0){e(".sf-nav",r.navWrap).animate({left:0+"px"},this.config.duration)}else{e(".sf-nav",r.navWrap).animate({left:"-"+o+"px"},this.config.duration)}}}}else{var h=0;e(".sf-nav-step",r.navWrap).each(function(t){r.navWrap.css("width","9999px");var n=e(this).css("float","left").outerWidth(true);r.navWrap.css("width","");e(this).css("float","");if(h<n){h=n}});h+=2;var p=r.element.closest(".sf-wizard").width()-h;r.element.css({width:p+"px","float":""});if(r.navWrap.hasClass("sf-nav-left")){r.element.css({"margin-left":h+"px"})}r.navWrap.css("width",h+"px")}}};n.prototype.refresh=function(){this.careNav(this.stepActive,this.stepActive);this.setProportion()};n.prototype.initBtnNext=function(t){this.btnNext=this.btnNextTmp.clone(true).addClass("sf-btn-next").data("step",t+1);this.btnNext.appendTo(e(this.controls))};n.prototype.initBtnPrev=function(t){this.btnPrev=this.btnPrevTmp.clone(true).addClass("sf-btn-prev").data("step",t-1);this.btnPrev.appendTo(e(this.controls))};n.prototype.initBtnFinish=function(t){e(".sf-step-"+t).append(" ");this.btnFinish=this.btnFinishTmp.clone(true).addClass("sf-btn-finish").data("step",t-1);this.btnFinish.appendTo(e(this.controls))};n.prototype.next=function(){var t={ret:false};if(this.stepActive<this.steps.length-1){e(".sf-controls .next-btn",this.element).trigger("click",[t])}else{e(".sf-controls .finish-btn",this.element).trigger("click",[t])}return t.ret};n.prototype.prev=function(){var t={ret:false};e(".sf-controls .prev-btn",this.element).trigger("click",[t]);return t.ret};n.prototype.finish=function(){var t={ret:false};e(".sf-controls .finish-btn",this.element).trigger("click",[t]);return t.ret};e.fn.stepFormWizard=function(e){var t=new n(this.first(),e);return t}})(jQuery)