Skip to content

Instantly share code, notes, and snippets.

@noisymask
Last active April 26, 2017 09:49
Show Gist options
  • Save noisymask/5102aaced31bac15867f to your computer and use it in GitHub Desktop.
Save noisymask/5102aaced31bac15867f to your computer and use it in GitHub Desktop.
Turn a form into a step-by-step process
;(function ($, window, document, undefined) {
"use strict";
var pluginName = "formWizard",
defaults = {
sections: 'fieldset',
navNext: '#form-next',
navPrev: '#form-previous',
progressBar: '.progress-bar',
beforeChange: function(instance){
return true;
},
afterChange: function(instance){
return true;
}
};
function FormWizard (element, options) {
this.$element = $(element);
this.settings = $.extend({}, defaults, options );
this._defaults = defaults;
this._name = pluginName;
this.init();
}
$.extend(FormWizard.prototype, {
init: function () {
var _this = this;
this.$window = $(window);
this.$steps = this.$element.find(this.settings.sections);
this.$container = $('<div/>').addClass('wizard').prependTo(this.$element).append(this.$steps);
this.$progressBar = $(this.settings.progressBar);
this.currentStep = 0;
this.$window.on('resize', function(){
_this.containerSize();
}).trigger('resize');
this.$steps.each(function(i){
$(this).data('step', i).hide();
});
this.initNavigation();
this.changeStep(this.currentStep);
this.log(this);
},
containerSize: function(){
var maxHeight = 0;
this.$steps.each(function(i){
maxHeight = Math.max(maxHeight, parseInt($(this).css('height'), 10));
});
this.$container.css('height', maxHeight);
},
changeStep: function(i) {
if ($.isFunction(this.settings.beforeChange)) {
if (!this.settings.beforeChange({ currentStep: this.currentStep, nextStep: i })) {
return false;
}
}
this.currentStep = i;
this.$steps.hide();
this.$steps.eq(this.currentStep).fadeIn();
this.updateNavigation();
this.updateProgressBar();
if ($.isFunction(this.settings.afterChange)) {
if (!this.settings.afterChange({ currentStep: this.currentStep, nextStep: i })) {
return false;
}
}
},
updateNavigation: function(){
if (this.currentStep==0) {
this.$navPrev.attr('disabled', 'disabled');
this.$navNext.data('step', this.currentStep + 1);
} else if (this.currentStep == this.$steps.length - 1) {
this.$navPrev.data('step', this.currentStep - 1);
this.$navNext.attr('disabled', 'disabled');
} else {
this.$navPrev.removeAttr('disabled');
this.$navNext.removeAttr('disabled');
this.$navPrev.data('step', this.currentStep - 1);
this.$navNext.data('step', this.currentStep + 1);
}
},
initNavigation: function() {
var _this = this;
this.$navPrev = $(this.settings.navPrev)
.on('click', function(evt){
evt.preventDefault();
_this.changeStep($(this).data('step'));
});
this.$navNext = $(this.settings.navNext)
.on('click', function(evt){
evt.preventDefault();
_this.changeStep($(this).data('step'));
});
},
updateProgressBar: function() {
var percent = (100 / (this.$steps.length - 1)) * this.currentStep;
this.$progressBar
.css('width', percent + '%')
.html((this.currentStep + 1) + ' of ' + (this.$steps.length));
},
log: function(x){
if (window.console) {
console.log(x);
}
}
});
$.fn[pluginName] = function(options) {
return this.each(function() {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName, new FormWizard(this, options));
}
});
};
})(jQuery, window, document);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment