Merge remote-tracking branch 'origin/master'

.jshintrc

@@ -0,0 +1,4 @@
+{
+    "browser": true,
+    "jquery": true
+}

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
+<form id="wizard1">
+    <div class="wizard-header">
+        <ul>
+            <li role="presentation" class="wizard-step-indicator">Start</li>
+            <li role="presentation" class="wizard-step-indicator">Profile</li>
+            <li role="presentation" class="wizard-step-indicator">Message</li>
+            <li role="presentation" class="wizard-step-indicator">Finish</li>
+        </ul>
+    </div>
+    <div class="wizard-content">
+        <div class="wizard-step">
+          <h2>Welcome to my wizard</h2>
+          <p>Let's begin</p>
+          <button type="button" class="wizard-next">Start</button>
+        </div>
+        <div class="wizard-step">
+            <div>
+                <label for="name">Name</label>
+                <input type="text" id="name" class="required" />
+            </div>
+            <button type="button" class="wizard-prev">Previous</button>
+            <button type="button" class="wizard-next">Next</button>
+        </div>
+        <div class="wizard-step">
+            <div>
+                <label for="message">Message</label>
+                <textarea id="message"></textarea>
+            </div>
+            <button type="button" class="wizard-prev">Previous</button>
+            <button type="button" class="wizard-next">Next</button>
+        </div>
+        <div class="wizard-step">
+            <button type="button" class="wizard-prev">Previous</button>
+            <button type="button" class="wizard-finish">Finish</button>
+            <button type="button" class="wizard-goto" value="0">Go back to start</button>
+        </div>
+    </div>
+</form>
+```
+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.

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);