From cc9d8ab4104c1a78680ac736a8cbba198da13a20 Mon Sep 17 00:00:00 2001 From: Dzulqarnain Nasir Date: Mon, 5 Oct 2015 22:05:20 +0300 Subject: [PATCH 1/7] Added event handler for wizard header links --- jquery.simplewizard.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/jquery.simplewizard.js b/jquery.simplewizard.js index c47e025..e0b596f 100644 --- a/jquery.simplewizard.js +++ b/jquery.simplewizard.js @@ -68,6 +68,16 @@ } }); + 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); From 352d019138a3942e729249c9870feb2864261089 Mon Sep 17 00:00:00 2001 From: Dzulqarnain Nasir Date: Mon, 5 Oct 2015 23:06:32 +0300 Subject: [PATCH 2/7] Added some automation stuff. Added JSHint rules. --- .jshintrc | 4 + dist/jquery.simplewizard.css | 28 +++ dist/jquery.simplewizard.js | 216 ++++++++++++++++++ dist/jquery.simplewizard.min.js | 8 + dist/jquery.simplewizard.min.js.map | 1 + gulpfile.js | 56 +++++ index.html | 45 +--- package.json | 7 + .../js/jquery.simplewizard.js | 2 - src/scss/jquery.simplewizard.scss | 34 +++ 10 files changed, 358 insertions(+), 43 deletions(-) create mode 100644 .jshintrc create mode 100644 dist/jquery.simplewizard.css create mode 100644 dist/jquery.simplewizard.js create mode 100644 dist/jquery.simplewizard.min.js create mode 100644 dist/jquery.simplewizard.min.js.map create mode 100644 gulpfile.js rename jquery.simplewizard.js => src/js/jquery.simplewizard.js (99%) create mode 100644 src/scss/jquery.simplewizard.scss 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/dist/jquery.simplewizard.css b/dist/jquery.simplewizard.css new file mode 100644 index 0000000..0fa3d30 --- /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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImpxdWVyeS5zaW1wbGV3aXphcmQuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBdUI7RUFDbkIsWUFBWSxFQURVOztBQUkxQjtFQUNJLGlCQUFpQjtFQUNqQixtQkFBbUI7RUFDbkIsa0JBQWtCLEVBSEw7O0FBTWpCO0VBQ0ksbUJBQW1CO0VBQ25CLFlBQVk7RUFDWixXQUFXO0VBQ1gsV0FBVztFQUNYLDZEQUFvRDtFQUFwRCxxREFBb0QsRUFMMUM7RUFPVDtJQUNHLFlBQVk7SUFDWixZQUFZO0lBQ1osV0FBVyxFQUhQO0VBTVA7SUFDRyxRQUFRO0lBQ1IsV0FBVztJQUNYLFdBQVcsRUFITDtFQU1DO0lBQ1AsV0FBVztJQUNYLFdBQVcsRUFGVSIsImZpbGUiOiJqcXVlcnkuc2ltcGxld2l6YXJkLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi53aXphcmQtaGVhZGVyIGxpLmRvbmUgYSB7XHJcbiAgICBjb2xvcjogIzc3NztcclxufVxyXG5cclxuLndpemFyZC1jb250ZW50IHtcclxuICAgIG92ZXJmbG93OiBoaWRkZW47XHJcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XHJcbiAgICBtaW4taGVpZ2h0OiAzMDBweDtcclxufVxyXG5cclxuLndpemFyZC1zdGVwIHtcclxuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcclxuICAgIHdpZHRoOiAxMDAlO1xyXG4gICAgbGVmdDogMTAwJTtcclxuICAgIG9wYWNpdHk6IDA7XHJcbiAgICB0cmFuc2l0aW9uOiBsZWZ0IDAuNXMgZWFzZS1pbi1vdXQsIG9wYWNpdHkgMC41cyBlYXNlO1xyXG4gICAgXHJcbiAgICAmLmRvbmUge1xyXG4gICAgICAgIGxlZnQ6IC0xMDAlO1xyXG4gICAgICAgIHotaW5kZXg6IC0xO1xyXG4gICAgICAgIG9wYWNpdHk6IDA7XHJcbiAgICB9XHJcbiAgICBcclxuICAgICYuYWN0aXZlIHtcclxuICAgICAgICBsZWZ0OiAwO1xyXG4gICAgICAgIHotaW5kZXg6IDE7XHJcbiAgICAgICAgb3BhY2l0eTogMTtcclxuICAgIH1cclxuICAgIFxyXG4gICAgJi5hY3RpdmUgKyAud2l6YXJkLXN0ZXAge1xyXG4gICAgICAgIGxlZnQ6IDEwMCU7XHJcbiAgICAgICAgei1pbmRleDogMDtcclxuICAgIH1cclxufSJdLCJzb3VyY2VSb290IjoiL3NvdXJjZS8ifQ== */ diff --git a/dist/jquery.simplewizard.js b/dist/jquery.simplewizard.js new file mode 100644 index 0000000..0b46866 --- /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 < this.$steps.length - 1) { + this.nextStep(); + if (!this.isValid(current)) { + break; + } + current = this.getCurrentStep(); + } + } else if (index < current) { + while (current > 0) { + 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..cea6af3 --- /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(;it)for(;i>0;)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..a3b212d --- /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":"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","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 ($) {\r\n \"use strict\";\r\n\r\n var pluginName = \"simpleWizard\";\r\n\r\n function Plugin(el, options) {\r\n this.$el = $(el);\r\n this.$steps = this.$el.find(\".wizard-step\");\r\n this.$indicators = this.$el.find(\".wizard-step-indicator\");\r\n this.opts = $.extend({\r\n cssClassStepDone: \"wizard-done\",\r\n cssClassStepActive: \"wizard-current\",\r\n onInit: function () {},\r\n onChange: function () {},\r\n onFinish: function () {}\r\n }, options);\r\n this.onChangeTimeout = null;\r\n this.validation = {\r\n formToValidate: ($.validator !== undefined ? this.$el.closest(\"form\") : undefined),\r\n isUnobtrusive: $.validator.unobtrusive !== undefined\r\n };\r\n this.init();\r\n }\r\n\r\n Plugin.prototype = {\r\n init: function () {\r\n var self = this;\r\n\r\n self.$el.on(\"click\", \".wizard-next\", function (e) {\r\n e.preventDefault();\r\n self.nextStep();\r\n });\r\n\r\n self.$el.on(\"click\", \".wizard-prev\", function (e) {\r\n e.preventDefault();\r\n self.prevStep();\r\n });\r\n\r\n self.$el.on(\"click\", \".wizard-goto\", function (e) {\r\n e.preventDefault();\r\n var targetIndex = $(this).val();\r\n self.gotoStep(targetIndex);\r\n });\r\n\r\n self.$el.on(\"click\", \".wizard-finish\", function (e) {\r\n e.preventDefault();\r\n self.finish();\r\n });\r\n\r\n self.$el.on(\"wizard_onInit\", function (e) {\r\n if (typeof (self.opts.onInit) === \"function\") {\r\n self.opts.onInit(e);\r\n }\r\n });\r\n\r\n self.$el.on(\"wizard_onChange\", function (e) {\r\n if (typeof (self.opts.onChange) === \"function\") {\r\n var current = self.getCurrentStep();\r\n self.opts.onChange(e, self.$steps.eq(current));\r\n }\r\n });\r\n\r\n self.$el.on(\"wizard_onFinish\", function (e) {\r\n if (typeof (self.opts.onFinish) === \"function\") {\r\n self.opts.onFinish(e);\r\n }\r\n });\r\n\r\n self.$el.on(\"click\", \"a\", function (e) {\r\n var $target = $(e.target.hash),\r\n $targetStep = self.$steps.filter($target);\r\n\r\n if ($targetStep.length) {\r\n e.preventDefault();\r\n self.gotoStep($targetStep.index());\r\n }\r\n });\r\n\r\n this.$steps.first().addClass(this.opts.cssClassStepActive);\r\n this.$indicators.first().addClass(this.opts.cssClassStepActive);\r\n\r\n if (this.validation.formToValidate) {\r\n this.validation.formToValidate.validate({\r\n ignore: \".wizard-ignore\"\r\n });\r\n }\r\n\r\n if (this.validation.formToValidate && this.validation.isUnobtrusive) {\r\n $.data(this.validation.formToValidate[0], \"validator\").settings.ignore += \",.wizard-ignore\";\r\n }\r\n\r\n this.$el.triggerHandler(\"wizard_onInit\");\r\n },\r\n\r\n // onChange event handler buffer - this will prevent multiple event raise\r\n onChangeEventHandler: function () {\r\n var self = this;\r\n\r\n clearTimeout(self.onChangeTimeout);\r\n self.onChangeTimeout = setTimeout(function () {\r\n if (self.$indicators.length) {\r\n self.updateIndicators();\r\n }\r\n\r\n self.$el.triggerHandler(\"wizard_onChange\");\r\n }, 100);\r\n },\r\n\r\n // methods\r\n\r\n getCurrentStep: function () {\r\n return this.$steps.filter(\".\" + this.opts.cssClassStepActive).index();\r\n },\r\n\r\n nextStep: function () {\r\n var current = this.getCurrentStep();\r\n if (!this.isValid(current)) {\r\n return;\r\n }\r\n\r\n if (current >= this.$steps.length) {\r\n return;\r\n }\r\n\r\n this.$steps.filter(\".\" + this.opts.cssClassStepActive)\r\n .addClass(this.opts.cssClassStepDone).removeClass(this.opts.cssClassStepActive)\r\n .next().addClass(this.opts.cssClassStepActive);\r\n\r\n this.onChangeEventHandler();\r\n },\r\n\r\n prevStep: function () {\r\n var current = this.getCurrentStep();\r\n\r\n if (current <= 0) {\r\n return;\r\n }\r\n\r\n this.$steps.filter(\".\" + this.opts.cssClassStepActive)\r\n .removeClass(this.opts.cssClassStepActive)\r\n .prev().addClass(this.opts.cssClassStepActive);\r\n\r\n this.onChangeEventHandler();\r\n },\r\n\r\n gotoStep: function (index) {\r\n if (index < 0 || index > this.$steps.length) {\r\n return;\r\n }\r\n\r\n var current = this.getCurrentStep();\r\n if (index > current) {\r\n while (current < this.$steps.length - 1) {\r\n this.nextStep();\r\n if (!this.isValid(current)) {\r\n break;\r\n }\r\n current = this.getCurrentStep();\r\n }\r\n } else if (index < current) {\r\n while (current > 0) {\r\n this.prevStep();\r\n current = this.getCurrentStep();\r\n }\r\n }\r\n },\r\n\r\n finish: function () {\r\n this.$el.triggerHandler(\"wizard_onFinish\");\r\n },\r\n\r\n updateIndicators: function () {\r\n var current = this.getCurrentStep();\r\n this.$indicators\r\n .filter(function (index) {\r\n return index < current;\r\n })\r\n .addClass(this.opts.cssClassStepDone);\r\n this.$indicators.removeClass(this.opts.cssClassStepActive)\r\n .eq(current).addClass(this.opts.cssClassStepActive);\r\n },\r\n\r\n isValid: function (current) {\r\n if (this.validation.formToValidate === undefined) {\r\n return true;\r\n }\r\n\r\n this.$steps.not(\":eq(\" + current + \")\").find(\"input, textarea\").addClass(\"wizard-ignore\");\r\n\r\n var result = this.validation.formToValidate.valid();\r\n\r\n this.$steps.find(\"input, textarea\").removeClass(\"wizard-ignore\");\r\n\r\n return result;\r\n }\r\n };\r\n\r\n $.fn[pluginName] = function (options) {\r\n var args = Array.prototype.slice.call(arguments, 1);\r\n\r\n return this.each(function () {\r\n if (!$.data(this, \"plugin_\" + pluginName)) {\r\n $.data(this, \"plugin_\" + pluginName, new Plugin(this, options));\r\n } else if (typeof options === \"string\" && Plugin.prototype.hasOwnProperty(options)) {\r\n var instance = $.data(this, \"plugin_\" + pluginName);\r\n Plugin.prototype[options].apply(instance, args);\r\n }\r\n });\r\n };\r\n})(jQuery);\r\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..30e34f0 100644 --- a/index.html +++ b/index.html @@ -9,44 +9,7 @@ Wizard demo - + @@ -91,9 +54,9 @@ - - - + + + - +