diff --git a/.jshintrc b/.jshintrc new file mode 100644 index 0000000..11b101c --- /dev/null +++ b/.jshintrc @@ -0,0 +1,4 @@ +{ + "browser": true, + "jquery": true +} diff --git a/README.md b/README.md index 71d0a0d..ddacb06 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,99 @@ -# jquery-simple-wizard +# jQuery Simple Wizard A jQuery plugin for creating a simple wizard. + +## Why was this created? +I needed a simple jQuery wizard that simply navigates from one step to another, and the ones I've found were too complex. I didn't need the plugin to generate stuff like headings, previous and next buttons, etc. I wanted to have control over what goes on. So I created my own. + +## How do I use it? +Firstly, build your wizard markup using the following convention: +```html +
+
+ +
+
+
+

Welcome to my wizard

+

Let's begin

+ +
+
+
+ + +
+ + +
+
+
+ + +
+ + +
+
+ + + +
+
+
+``` +Include the plugin files after your jQuery reference, and run the following code: +```javascript +$("#wizard1").simpleWizard(); +``` +where ``#wizard1`` is a reference to the wizard container. + +**Note** + +As far as the HTML markup is concerned, as long as you use the ``wizard-step`` class to mark the steps and ``wizard-step-indicator`` to mark the step indicators, as well as the ``wizard-next``,``wizard-prev`` and ``wizard-finish`` buttons, everything else is up to you. + +## What can I change? +Currently, there are only two items that you can control - the active state CSS class, and the done state CSS class. I'll update this as I make them available. Include them in the plugin initialisation code. + +```javascript +$("#wizard1").simpleWizard({ + cssClassStepDone: "wizard-done", // default value + cssClassStepActive: "wizard-current", // default value +}); +``` + +## What about events? +You can add event handlers to the plugin initialisation code. + +``` javascript +$("#wizard1").simpleWizard({ + onInit: function() { + alert("Let's get started!") + }, + onChange: function() { + alert("More to come.."); + } + onFinish: function() { + alert("End of the line, pal."); + } +}); +``` + +#### onInit +Called when the plugin is done initialising. + +#### onChange +Called on every step change. + +#### onFinish +Called when the wizard reaches the end. + +## What about transition animations? +The plugin will update the CSS class for the step element based on its state, and you can use CSS3 transition for animations. I don't see why we need to use JavaScript animations because I think we should all be using CSS3-capable browsers now. + +## What about validation? +This plugin supports jQuery Validation as well as jQuery Unobtrusive Validation. Simply include the libraries in your code prior to the plugin initialisation code for this to apply. Validation will be executed on every step change, and the plugin will prevent the user from moving forward when there's a validation error. diff --git a/dist/jquery.simplewizard.css b/dist/jquery.simplewizard.css new file mode 100644 index 0000000..fed9566 --- /dev/null +++ b/dist/jquery.simplewizard.css @@ -0,0 +1,28 @@ +.wizard-header li.done a { + color: #777; } + +.wizard-content { + overflow: hidden; + position: relative; + min-height: 300px; } + +.wizard-step { + position: absolute; + width: 100%; + left: 100%; + opacity: 0; + -webkit-transition: left 0.5s ease-in-out, opacity 0.5s ease; + transition: left 0.5s ease-in-out, opacity 0.5s ease; } + .wizard-step.done { + left: -100%; + z-index: -1; + opacity: 0; } + .wizard-step.active { + left: 0; + z-index: 1; + opacity: 1; } + .wizard-step.active + .wizard-step { + left: 100%; + z-index: 0; } + +/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImpxdWVyeS5zaW1wbGV3aXphcmQuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBdUI7RUFDbkIsWUFBWSxFQURVOztBQUkxQjtFQUNJLGlCQUFpQjtFQUNqQixtQkFBbUI7RUFDbkIsa0JBQWtCLEVBSEw7O0FBTWpCO0VBQ0ksbUJBQW1CO0VBQ25CLFlBQVk7RUFDWixXQUFXO0VBQ1gsV0FBVztFQUNYLDZEQUFvRDtFQUFwRCxxREFBb0QsRUFMMUM7RUFPVDtJQUNHLFlBQVk7SUFDWixZQUFZO0lBQ1osV0FBVyxFQUhQO0VBTVA7SUFDRyxRQUFRO0lBQ1IsV0FBVztJQUNYLFdBQVcsRUFITDtFQU1DO0lBQ1AsV0FBVztJQUNYLFdBQVcsRUFGVSIsImZpbGUiOiJqcXVlcnkuc2ltcGxld2l6YXJkLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi53aXphcmQtaGVhZGVyIGxpLmRvbmUgYSB7XG4gICAgY29sb3I6ICM3Nzc7XG59XG5cbi53aXphcmQtY29udGVudCB7XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgbWluLWhlaWdodDogMzAwcHg7XG59XG5cbi53aXphcmQtc3RlcCB7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIGxlZnQ6IDEwMCU7XG4gICAgb3BhY2l0eTogMDtcbiAgICB0cmFuc2l0aW9uOiBsZWZ0IDAuNXMgZWFzZS1pbi1vdXQsIG9wYWNpdHkgMC41cyBlYXNlO1xuXG4gICAgJi5kb25lIHtcbiAgICAgICAgbGVmdDogLTEwMCU7XG4gICAgICAgIHotaW5kZXg6IC0xO1xuICAgICAgICBvcGFjaXR5OiAwO1xuICAgIH1cblxuICAgICYuYWN0aXZlIHtcbiAgICAgICAgbGVmdDogMDtcbiAgICAgICAgei1pbmRleDogMTtcbiAgICAgICAgb3BhY2l0eTogMTtcbiAgICB9XG5cbiAgICAmLmFjdGl2ZSArIC53aXphcmQtc3RlcCB7XG4gICAgICAgIGxlZnQ6IDEwMCU7XG4gICAgICAgIHotaW5kZXg6IDA7XG4gICAgfVxufVxuIl0sInNvdXJjZVJvb3QiOiIvc291cmNlLyJ9 */ diff --git a/dist/jquery.simplewizard.js b/dist/jquery.simplewizard.js new file mode 100644 index 0000000..6bacb0a --- /dev/null +++ b/dist/jquery.simplewizard.js @@ -0,0 +1,216 @@ +/** + * jquery-simple-wizard - A jQuery plugin for creating a simple wizard. + * @version v0.1.0 + * @link https://github.com/dnasir/jquery-simple-wizard + * @license MIT + */ +(function ($) { + "use strict"; + + var pluginName = "simpleWizard"; + + function Plugin(el, options) { + this.$el = $(el); + this.$steps = this.$el.find(".wizard-step"); + this.$indicators = this.$el.find(".wizard-step-indicator"); + this.opts = $.extend({ + cssClassStepDone: "wizard-done", + cssClassStepActive: "wizard-current", + onInit: function () {}, + onChange: function () {}, + onFinish: function () {} + }, options); + this.onChangeTimeout = null; + this.validation = { + formToValidate: ($.validator !== undefined ? this.$el.closest("form") : undefined), + isUnobtrusive: $.validator.unobtrusive !== undefined + }; + this.init(); + } + + Plugin.prototype = { + init: function () { + var self = this; + + self.$el.on("click", ".wizard-next", function (e) { + e.preventDefault(); + self.nextStep(); + }); + + self.$el.on("click", ".wizard-prev", function (e) { + e.preventDefault(); + self.prevStep(); + }); + + self.$el.on("click", ".wizard-goto", function (e) { + e.preventDefault(); + var targetIndex = $(this).val(); + self.gotoStep(targetIndex); + }); + + self.$el.on("click", ".wizard-finish", function (e) { + e.preventDefault(); + self.finish(); + }); + + self.$el.on("wizard_onInit", function (e) { + if (typeof (self.opts.onInit) === "function") { + self.opts.onInit(e); + } + }); + + self.$el.on("wizard_onChange", function (e) { + if (typeof (self.opts.onChange) === "function") { + var current = self.getCurrentStep(); + self.opts.onChange(e, self.$steps.eq(current)); + } + }); + + self.$el.on("wizard_onFinish", function (e) { + if (typeof (self.opts.onFinish) === "function") { + self.opts.onFinish(e); + } + }); + + self.$el.on("click", "a", function (e) { + var $target = $(e.target.hash), + $targetStep = self.$steps.filter($target); + + if ($targetStep.length) { + e.preventDefault(); + self.gotoStep($targetStep.index()); + } + }); + + this.$steps.first().addClass(this.opts.cssClassStepActive); + this.$indicators.first().addClass(this.opts.cssClassStepActive); + + if (this.validation.formToValidate) { + this.validation.formToValidate.validate({ + ignore: ".wizard-ignore" + }); + } + + if (this.validation.formToValidate && this.validation.isUnobtrusive) { + $.data(this.validation.formToValidate[0], "validator").settings.ignore += ",.wizard-ignore"; + } + + this.$el.triggerHandler("wizard_onInit"); + }, + + // onChange event handler buffer - this will prevent multiple event raise + onChangeEventHandler: function () { + var self = this; + + clearTimeout(self.onChangeTimeout); + self.onChangeTimeout = setTimeout(function () { + if (self.$indicators.length) { + self.updateIndicators(); + } + + self.$el.triggerHandler("wizard_onChange"); + }, 100); + }, + + // methods + + getCurrentStep: function () { + return this.$steps.filter("." + this.opts.cssClassStepActive).index(); + }, + + nextStep: function () { + var current = this.getCurrentStep(); + if (!this.isValid(current)) { + return; + } + + if (current >= this.$steps.length) { + return; + } + + this.$steps.filter("." + this.opts.cssClassStepActive) + .addClass(this.opts.cssClassStepDone).removeClass(this.opts.cssClassStepActive) + .next().addClass(this.opts.cssClassStepActive); + + this.onChangeEventHandler(); + }, + + prevStep: function () { + var current = this.getCurrentStep(); + + if (current <= 0) { + return; + } + + this.$steps.filter("." + this.opts.cssClassStepActive) + .removeClass(this.opts.cssClassStepActive) + .prev().addClass(this.opts.cssClassStepActive); + + this.onChangeEventHandler(); + }, + + gotoStep: function (index) { + if (index < 0 || index > this.$steps.length) { + return; + } + + var current = this.getCurrentStep(); + if (index > current) { + while (current < index) { + this.nextStep(); + if (!this.isValid(current)) { + break; + } + current = this.getCurrentStep(); + } + } else if (index < current) { + while (current > index) { + this.prevStep(); + current = this.getCurrentStep(); + } + } + }, + + finish: function () { + this.$el.triggerHandler("wizard_onFinish"); + }, + + updateIndicators: function () { + var current = this.getCurrentStep(); + this.$indicators + .filter(function (index) { + return index < current; + }) + .addClass(this.opts.cssClassStepDone); + this.$indicators.removeClass(this.opts.cssClassStepActive) + .eq(current).addClass(this.opts.cssClassStepActive); + }, + + isValid: function (current) { + if (this.validation.formToValidate === undefined) { + return true; + } + + this.$steps.not(":eq(" + current + ")").find("input, textarea").addClass("wizard-ignore"); + + var result = this.validation.formToValidate.valid(); + + this.$steps.find("input, textarea").removeClass("wizard-ignore"); + + return result; + } + }; + + $.fn[pluginName] = function (options) { + var args = Array.prototype.slice.call(arguments, 1); + + return this.each(function () { + if (!$.data(this, "plugin_" + pluginName)) { + $.data(this, "plugin_" + pluginName, new Plugin(this, options)); + } else if (typeof options === "string" && Plugin.prototype.hasOwnProperty(options)) { + var instance = $.data(this, "plugin_" + pluginName); + Plugin.prototype[options].apply(instance, args); + } + }); + }; +})(jQuery); diff --git a/dist/jquery.simplewizard.min.js b/dist/jquery.simplewizard.min.js new file mode 100644 index 0000000..fb17f2c --- /dev/null +++ b/dist/jquery.simplewizard.min.js @@ -0,0 +1,8 @@ +/** + * jquery-simple-wizard - A jQuery plugin for creating a simple wizard. + * @version v0.1.0 + * @link https://github.com/dnasir/jquery-simple-wizard + * @license MIT + */ +!function(t){"use strict";function i(i,s){this.$el=t(i),this.$steps=this.$el.find(".wizard-step"),this.$indicators=this.$el.find(".wizard-step-indicator"),this.opts=t.extend({cssClassStepDone:"wizard-done",cssClassStepActive:"wizard-current",onInit:function(){},onChange:function(){},onFinish:function(){}},s),this.onChangeTimeout=null,this.validation={formToValidate:void 0!==t.validator?this.$el.closest("form"):void 0,isUnobtrusive:void 0!==t.validator.unobtrusive},this.init()}var s="simpleWizard";i.prototype={init:function(){var i=this;i.$el.on("click",".wizard-next",function(t){t.preventDefault(),i.nextStep()}),i.$el.on("click",".wizard-prev",function(t){t.preventDefault(),i.prevStep()}),i.$el.on("click",".wizard-goto",function(s){s.preventDefault();var e=t(this).val();i.gotoStep(e)}),i.$el.on("click",".wizard-finish",function(t){t.preventDefault(),i.finish()}),i.$el.on("wizard_onInit",function(t){"function"==typeof i.opts.onInit&&i.opts.onInit(t)}),i.$el.on("wizard_onChange",function(t){if("function"==typeof i.opts.onChange){var s=i.getCurrentStep();i.opts.onChange(t,i.$steps.eq(s))}}),i.$el.on("wizard_onFinish",function(t){"function"==typeof i.opts.onFinish&&i.opts.onFinish(t)}),i.$el.on("click","a",function(s){var e=t(s.target.hash),n=i.$steps.filter(e);n.length&&(s.preventDefault(),i.gotoStep(n.index()))}),this.$steps.first().addClass(this.opts.cssClassStepActive),this.$indicators.first().addClass(this.opts.cssClassStepActive),this.validation.formToValidate&&this.validation.formToValidate.validate({ignore:".wizard-ignore"}),this.validation.formToValidate&&this.validation.isUnobtrusive&&(t.data(this.validation.formToValidate[0],"validator").settings.ignore+=",.wizard-ignore"),this.$el.triggerHandler("wizard_onInit")},onChangeEventHandler:function(){var t=this;clearTimeout(t.onChangeTimeout),t.onChangeTimeout=setTimeout(function(){t.$indicators.length&&t.updateIndicators(),t.$el.triggerHandler("wizard_onChange")},100)},getCurrentStep:function(){return this.$steps.filter("."+this.opts.cssClassStepActive).index()},nextStep:function(){var t=this.getCurrentStep();this.isValid(t)&&(t>=this.$steps.length||(this.$steps.filter("."+this.opts.cssClassStepActive).addClass(this.opts.cssClassStepDone).removeClass(this.opts.cssClassStepActive).next().addClass(this.opts.cssClassStepActive),this.onChangeEventHandler()))},prevStep:function(){var t=this.getCurrentStep();0>=t||(this.$steps.filter("."+this.opts.cssClassStepActive).removeClass(this.opts.cssClassStepActive).prev().addClass(this.opts.cssClassStepActive),this.onChangeEventHandler())},gotoStep:function(t){if(!(0>t||t>this.$steps.length)){var i=this.getCurrentStep();if(t>i)for(;t>i&&(this.nextStep(),this.isValid(i));)i=this.getCurrentStep();else if(i>t)for(;i>t;)this.prevStep(),i=this.getCurrentStep()}},finish:function(){this.$el.triggerHandler("wizard_onFinish")},updateIndicators:function(){var t=this.getCurrentStep();this.$indicators.filter(function(i){return t>i}).addClass(this.opts.cssClassStepDone),this.$indicators.removeClass(this.opts.cssClassStepActive).eq(t).addClass(this.opts.cssClassStepActive)},isValid:function(t){if(void 0===this.validation.formToValidate)return!0;this.$steps.not(":eq("+t+")").find("input, textarea").addClass("wizard-ignore");var i=this.validation.formToValidate.valid();return this.$steps.find("input, textarea").removeClass("wizard-ignore"),i}},t.fn[s]=function(e){var n=Array.prototype.slice.call(arguments,1);return this.each(function(){if(t.data(this,"plugin_"+s)){if("string"==typeof e&&i.prototype.hasOwnProperty(e)){var a=t.data(this,"plugin_"+s);i.prototype[e].apply(a,n)}}else t.data(this,"plugin_"+s,new i(this,e))})}}(jQuery); +//# sourceMappingURL=jquery.simplewizard.min.js.map diff --git a/dist/jquery.simplewizard.min.js.map b/dist/jquery.simplewizard.min.js.map new file mode 100644 index 0000000..b13b0c3 --- /dev/null +++ b/dist/jquery.simplewizard.min.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["jquery.simplewizard.js"],"names":["$","Plugin","el","options","this","$el","$steps","find","$indicators","opts","extend","cssClassStepDone","cssClassStepActive","onInit","onChange","onFinish","onChangeTimeout","validation","formToValidate","undefined","validator","closest","isUnobtrusive","unobtrusive","init","pluginName","prototype","self","on","e","preventDefault","nextStep","prevStep","targetIndex","val","gotoStep","finish","current","getCurrentStep","eq","$target","target","hash","$targetStep","filter","length","index","first","addClass","validate","ignore","data","settings","triggerHandler","onChangeEventHandler","clearTimeout","setTimeout","updateIndicators","isValid","removeClass","next","prev","not","result","valid","fn","args","Array","slice","call","arguments","each","hasOwnProperty","instance","apply","jQuery"],"mappings":";;;;;;CAMA,SAAWA,GACP,YAIA,SAASC,GAAOC,EAAIC,GAChBC,KAAKC,IAAML,EAAEE,GACbE,KAAKE,OAASF,KAAKC,IAAIE,KAAK,gBAC5BH,KAAKI,YAAcJ,KAAKC,IAAIE,KAAK,0BACjCH,KAAKK,KAAOT,EAAEU,QACVC,iBAAkB,cAClBC,mBAAoB,iBACpBC,OAAQ,aACRC,SAAU,aACVC,SAAU,cACXZ,GACHC,KAAKY,gBAAkB,KACvBZ,KAAKa,YACDC,eAAiCC,SAAhBnB,EAAEoB,UAA0BhB,KAAKC,IAAIgB,QAAQ,QAAUF,OACxEG,cAA2CH,SAA5BnB,EAAEoB,UAAUG,aAE/BnB,KAAKoB,OAlBT,GAAIC,GAAa,cAqBjBxB,GAAOyB,WACHF,KAAM,WACF,GAAIG,GAAOvB,IAEXuB,GAAKtB,IAAIuB,GAAG,QAAS,eAAgB,SAAUC,GAC3CA,EAAEC,iBACFH,EAAKI,aAGTJ,EAAKtB,IAAIuB,GAAG,QAAS,eAAgB,SAAUC,GAC3CA,EAAEC,iBACFH,EAAKK,aAGTL,EAAKtB,IAAIuB,GAAG,QAAS,eAAgB,SAAUC,GAC3CA,EAAEC,gBACF,IAAIG,GAAcjC,EAAEI,MAAM8B,KAC1BP,GAAKQ,SAASF,KAGlBN,EAAKtB,IAAIuB,GAAG,QAAS,iBAAkB,SAAUC,GAC7CA,EAAEC,iBACFH,EAAKS,WAGTT,EAAKtB,IAAIuB,GAAG,gBAAiB,SAAUC,GACD,kBAAtBF,GAAKlB,KAAW,QACxBkB,EAAKlB,KAAKI,OAAOgB,KAIzBF,EAAKtB,IAAIuB,GAAG,kBAAmB,SAAUC,GACrC,GAAoC,kBAAxBF,GAAKlB,KAAa,SAAkB,CAC5C,GAAI4B,GAAUV,EAAKW,gBACnBX,GAAKlB,KAAKK,SAASe,EAAGF,EAAKrB,OAAOiC,GAAGF,OAI7CV,EAAKtB,IAAIuB,GAAG,kBAAmB,SAAUC,GACD,kBAAxBF,GAAKlB,KAAa,UAC1BkB,EAAKlB,KAAKM,SAASc,KAI3BF,EAAKtB,IAAIuB,GAAG,QAAS,IAAK,SAAUC,GAChC,GAAIW,GAAUxC,EAAE6B,EAAEY,OAAOC,MACrBC,EAAchB,EAAKrB,OAAOsC,OAAOJ,EAEjCG,GAAYE,SACZhB,EAAEC,iBACFH,EAAKQ,SAASQ,EAAYG,YAIlC1C,KAAKE,OAAOyC,QAAQC,SAAS5C,KAAKK,KAAKG,oBACvCR,KAAKI,YAAYuC,QAAQC,SAAS5C,KAAKK,KAAKG,oBAExCR,KAAKa,WAAWC,gBAChBd,KAAKa,WAAWC,eAAe+B,UAC3BC,OAAQ,mBAIZ9C,KAAKa,WAAWC,gBAAkBd,KAAKa,WAAWK,gBAClDtB,EAAEmD,KAAK/C,KAAKa,WAAWC,eAAe,GAAI,aAAakC,SAASF,QAAU,mBAG9E9C,KAAKC,IAAIgD,eAAe,kBAI5BC,qBAAsB,WAClB,GAAI3B,GAAOvB,IAEXmD,cAAa5B,EAAKX,iBAClBW,EAAKX,gBAAkBwC,WAAW,WAC1B7B,EAAKnB,YAAYqC,QACjBlB,EAAK8B,mBAGT9B,EAAKtB,IAAIgD,eAAe,oBACzB,MAKPf,eAAgB,WACZ,MAAOlC,MAAKE,OAAOsC,OAAO,IAAMxC,KAAKK,KAAKG,oBAAoBkC,SAGlEf,SAAU,WACN,GAAIM,GAAUjC,KAAKkC,gBACdlC,MAAKsD,QAAQrB,KAIdA,GAAWjC,KAAKE,OAAOuC,SAI3BzC,KAAKE,OAAOsC,OAAO,IAAMxC,KAAKK,KAAKG,oBAC9BoC,SAAS5C,KAAKK,KAAKE,kBAAkBgD,YAAYvD,KAAKK,KAAKG,oBAC3DgD,OAAOZ,SAAS5C,KAAKK,KAAKG,oBAE/BR,KAAKkD,0BAGTtB,SAAU,WACN,GAAIK,GAAUjC,KAAKkC,gBAEJ,IAAXD,IAIJjC,KAAKE,OAAOsC,OAAO,IAAMxC,KAAKK,KAAKG,oBAC9B+C,YAAYvD,KAAKK,KAAKG,oBACtBiD,OAAOb,SAAS5C,KAAKK,KAAKG,oBAE/BR,KAAKkD,yBAGTnB,SAAU,SAAUW,GAChB,KAAY,EAARA,GAAaA,EAAQ1C,KAAKE,OAAOuC,QAArC,CAIA,GAAIR,GAAUjC,KAAKkC,gBACnB,IAAIQ,EAAQT,EACR,KAAiBS,EAAVT,IACHjC,KAAK2B,WACA3B,KAAKsD,QAAQrB,KAGlBA,EAAUjC,KAAKkC,qBAEhB,IAAYD,EAARS,EACP,KAAOT,EAAUS,GACb1C,KAAK4B,WACLK,EAAUjC,KAAKkC,mBAK3BF,OAAQ,WACJhC,KAAKC,IAAIgD,eAAe,oBAG5BI,iBAAkB,WACd,GAAIpB,GAAUjC,KAAKkC,gBACnBlC,MAAKI,YACAoC,OAAO,SAAUE,GACd,MAAeT,GAARS,IAEVE,SAAS5C,KAAKK,KAAKE,kBACxBP,KAAKI,YAAYmD,YAAYvD,KAAKK,KAAKG,oBAClC2B,GAAGF,GAASW,SAAS5C,KAAKK,KAAKG,qBAGxC8C,QAAS,SAAUrB,GACf,GAAuClB,SAAnCf,KAAKa,WAAWC,eAChB,OAAO,CAGXd,MAAKE,OAAOwD,IAAI,OAASzB,EAAU,KAAK9B,KAAK,mBAAmByC,SAAS,gBAEzE,IAAIe,GAAS3D,KAAKa,WAAWC,eAAe8C,OAI5C,OAFA5D,MAAKE,OAAOC,KAAK,mBAAmBoD,YAAY,iBAEzCI,IAIf/D,EAAEiE,GAAGxC,GAAc,SAAUtB,GACzB,GAAI+D,GAAOC,MAAMzC,UAAU0C,MAAMC,KAAKC,UAAW,EAEjD,OAAOlE,MAAKmE,KAAK,WACb,GAAKvE,EAAEmD,KAAK/C,KAAM,UAAYqB,IAEvB,GAAuB,gBAAZtB,IAAwBF,EAAOyB,UAAU8C,eAAerE,GAAU,CAChF,GAAIsE,GAAWzE,EAAEmD,KAAK/C,KAAM,UAAYqB,EACxCxB,GAAOyB,UAAUvB,GAASuE,MAAMD,EAAUP,QAH1ClE,GAAEmD,KAAK/C,KAAM,UAAYqB,EAAY,GAAIxB,GAAOG,KAAMD,QAOnEwE","file":"jquery.simplewizard.min.js","sourcesContent":["/**\n * jquery-simple-wizard - A jQuery plugin for creating a simple wizard.\n * @version v0.1.0\n * @link https://github.com/dnasir/jquery-simple-wizard\n * @license MIT\n */\n(function ($) {\n \"use strict\";\n\n var pluginName = \"simpleWizard\";\n\n function Plugin(el, options) {\n this.$el = $(el);\n this.$steps = this.$el.find(\".wizard-step\");\n this.$indicators = this.$el.find(\".wizard-step-indicator\");\n this.opts = $.extend({\n cssClassStepDone: \"wizard-done\",\n cssClassStepActive: \"wizard-current\",\n onInit: function () {},\n onChange: function () {},\n onFinish: function () {}\n }, options);\n this.onChangeTimeout = null;\n this.validation = {\n formToValidate: ($.validator !== undefined ? this.$el.closest(\"form\") : undefined),\n isUnobtrusive: $.validator.unobtrusive !== undefined\n };\n this.init();\n }\n\n Plugin.prototype = {\n init: function () {\n var self = this;\n\n self.$el.on(\"click\", \".wizard-next\", function (e) {\n e.preventDefault();\n self.nextStep();\n });\n\n self.$el.on(\"click\", \".wizard-prev\", function (e) {\n e.preventDefault();\n self.prevStep();\n });\n\n self.$el.on(\"click\", \".wizard-goto\", function (e) {\n e.preventDefault();\n var targetIndex = $(this).val();\n self.gotoStep(targetIndex);\n });\n\n self.$el.on(\"click\", \".wizard-finish\", function (e) {\n e.preventDefault();\n self.finish();\n });\n\n self.$el.on(\"wizard_onInit\", function (e) {\n if (typeof (self.opts.onInit) === \"function\") {\n self.opts.onInit(e);\n }\n });\n\n self.$el.on(\"wizard_onChange\", function (e) {\n if (typeof (self.opts.onChange) === \"function\") {\n var current = self.getCurrentStep();\n self.opts.onChange(e, self.$steps.eq(current));\n }\n });\n\n self.$el.on(\"wizard_onFinish\", function (e) {\n if (typeof (self.opts.onFinish) === \"function\") {\n self.opts.onFinish(e);\n }\n });\n\n self.$el.on(\"click\", \"a\", function (e) {\n var $target = $(e.target.hash),\n $targetStep = self.$steps.filter($target);\n\n if ($targetStep.length) {\n e.preventDefault();\n self.gotoStep($targetStep.index());\n }\n });\n\n this.$steps.first().addClass(this.opts.cssClassStepActive);\n this.$indicators.first().addClass(this.opts.cssClassStepActive);\n\n if (this.validation.formToValidate) {\n this.validation.formToValidate.validate({\n ignore: \".wizard-ignore\"\n });\n }\n\n if (this.validation.formToValidate && this.validation.isUnobtrusive) {\n $.data(this.validation.formToValidate[0], \"validator\").settings.ignore += \",.wizard-ignore\";\n }\n\n this.$el.triggerHandler(\"wizard_onInit\");\n },\n\n // onChange event handler buffer - this will prevent multiple event raise\n onChangeEventHandler: function () {\n var self = this;\n\n clearTimeout(self.onChangeTimeout);\n self.onChangeTimeout = setTimeout(function () {\n if (self.$indicators.length) {\n self.updateIndicators();\n }\n\n self.$el.triggerHandler(\"wizard_onChange\");\n }, 100);\n },\n\n // methods\n\n getCurrentStep: function () {\n return this.$steps.filter(\".\" + this.opts.cssClassStepActive).index();\n },\n\n nextStep: function () {\n var current = this.getCurrentStep();\n if (!this.isValid(current)) {\n return;\n }\n\n if (current >= this.$steps.length) {\n return;\n }\n\n this.$steps.filter(\".\" + this.opts.cssClassStepActive)\n .addClass(this.opts.cssClassStepDone).removeClass(this.opts.cssClassStepActive)\n .next().addClass(this.opts.cssClassStepActive);\n\n this.onChangeEventHandler();\n },\n\n prevStep: function () {\n var current = this.getCurrentStep();\n\n if (current <= 0) {\n return;\n }\n\n this.$steps.filter(\".\" + this.opts.cssClassStepActive)\n .removeClass(this.opts.cssClassStepActive)\n .prev().addClass(this.opts.cssClassStepActive);\n\n this.onChangeEventHandler();\n },\n\n gotoStep: function (index) {\n if (index < 0 || index > this.$steps.length) {\n return;\n }\n\n var current = this.getCurrentStep();\n if (index > current) {\n while (current < index) {\n this.nextStep();\n if (!this.isValid(current)) {\n break;\n }\n current = this.getCurrentStep();\n }\n } else if (index < current) {\n while (current > index) {\n this.prevStep();\n current = this.getCurrentStep();\n }\n }\n },\n\n finish: function () {\n this.$el.triggerHandler(\"wizard_onFinish\");\n },\n\n updateIndicators: function () {\n var current = this.getCurrentStep();\n this.$indicators\n .filter(function (index) {\n return index < current;\n })\n .addClass(this.opts.cssClassStepDone);\n this.$indicators.removeClass(this.opts.cssClassStepActive)\n .eq(current).addClass(this.opts.cssClassStepActive);\n },\n\n isValid: function (current) {\n if (this.validation.formToValidate === undefined) {\n return true;\n }\n\n this.$steps.not(\":eq(\" + current + \")\").find(\"input, textarea\").addClass(\"wizard-ignore\");\n\n var result = this.validation.formToValidate.valid();\n\n this.$steps.find(\"input, textarea\").removeClass(\"wizard-ignore\");\n\n return result;\n }\n };\n\n $.fn[pluginName] = function (options) {\n var args = Array.prototype.slice.call(arguments, 1);\n\n return this.each(function () {\n if (!$.data(this, \"plugin_\" + pluginName)) {\n $.data(this, \"plugin_\" + pluginName, new Plugin(this, options));\n } else if (typeof options === \"string\" && Plugin.prototype.hasOwnProperty(options)) {\n var instance = $.data(this, \"plugin_\" + pluginName);\n Plugin.prototype[options].apply(instance, args);\n }\n });\n };\n})(jQuery);\n"],"sourceRoot":"/source/"} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..6934ad6 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,56 @@ +/* global require */ + +var gulp = require("gulp"); +var sass = require("gulp-sass"); +var sourcemaps = require("gulp-sourcemaps"); +var autoprefixer = require("gulp-autoprefixer"); +var uglify = require("gulp-uglify"); +var header = require("gulp-header"); +var rename = require("gulp-rename"); +var outputPath = "dist"; + +gulp.task("build:js", function () { + var pkg = require('./package.json'); + var banner = ['/**', + ' * <%= pkg.name %> - <%= pkg.description %>', + ' * @version v<%= pkg.version %>', + ' * @link <%= pkg.homepage %>', + ' * @license <%= pkg.license %>', + ' */', + ''].join('\n'); + + return gulp.src("src/js/jquery.simplewizard.js") + .pipe(header(banner, { pkg : pkg } )) + .pipe(gulp.dest(outputPath)); +}); + +gulp.task("minify:js", ["build:js"], function () { + return gulp.src(outputPath + "/jquery.simplewizard.js") + .pipe(sourcemaps.init()) + .pipe(uglify({ + preserveComments: "license" + })) + .pipe(rename({suffix: '.min'})) + .pipe(sourcemaps.write("/")) + .pipe(gulp.dest(outputPath)); +}); + +gulp.task("build:sass", function () { + return gulp.src("src/scss/**/*.scss") + .pipe(sourcemaps.init()) + .pipe(sass().on("error", sass.logError)) + .pipe(autoprefixer({ + browsers: ["> 1%", "last 4 version", "ie 9"], + cascade: false + })) + .pipe(sourcemaps.write()) + .pipe(gulp.dest(outputPath)); +}); + +gulp.task("watch", function () { + gulp.watch("scss/**/*.scss", ["build:sass"]); +}); + +gulp.task("publish", ["minify:js", "build:sass"]); + +gulp.task("default", ["build:js", "build:sass"]); diff --git a/index.html b/index.html index 4f2b41a..8063e72 100644 --- a/index.html +++ b/index.html @@ -9,44 +9,7 @@ Wizard demo - + @@ -91,9 +54,9 @@ - - - + + +