Updated to version v4.0.5

Get direction navigaion on leaveStep and showStep events Events added: beginReset, endReset, themeChanged Examples updated
techlab · Nov 16, 2016 · 57838d9 · 57838d9
1 parent c64cf5b
commit 57838d9
Show file tree

Hide file tree

Showing 15 changed files with 125 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -62,13 +62,14 @@ Features
   + Ajax content loading with option to specify individual url for steps
   + Keyboard navigation
   + Easy navigation with step anchors and navigation buttons
+  + Navigation direction parameter on events
   + Multiple wizard instance on same page
   + Easy to implement, Minimal HTML required
   + and a lot more...
 
 Version
 -----
-**SmartWizard v4.0.1**
+**SmartWizard v4.0.5**
 
 License
 ----

diff --git a/bower.json b/bower.json
@@ -1,11 +1,11 @@
 {
     "name": "smartwizard",
-    "version": "4.0.1",
+    "version": "4.0.5",
     "homepage": "https://github.com/techlab/SmartWizard",
     "authors": [
         "Dipu Raj <[email protected]>"
     ],
-    "description": "An awesome step wizard jQuery plugin with Bootstrap support",
+    "description": "An awesome jQuery step wizard plugin with Bootstrap support",
     "main": [
         "./css/smart_wizard.min.css",
         "./js/jquery.smartWizard.min.js"

diff --git a/composer.json b/composer.json
@@ -1,7 +1,7 @@
 {
     "name": "techlab/smartwizard",
-    "description": "An awesome step wizard jQuery plugin with Bootstrap support",
-    "version": "4.0.1",
+    "description": "An awesome jQuery step wizard plugin with Bootstrap support",
+    "version": "4.0.5",
     "homepage": "http://techlaboratory.net/smartwizard",
     "license": "MIT",      
     "support": {

diff --git a/css/smart_wizard.css b/css/smart_wizard.css
@@ -1,4 +1,4 @@
-/* SmartWizard v4.0.1
+/* SmartWizard v4.x
  * jQuery Wizard Plugin
  * http://www.techlaboratory.net/smartwizard
  * 

diff --git a/css/smart_wizard.min.css b/css/smart_wizard.min.css
diff --git a/css/smart_wizard_theme_arrows.css b/css/smart_wizard_theme_arrows.css
@@ -1,4 +1,4 @@
-/* SmartWizard v4.0.1
+/* SmartWizard v4.x
  * jQuery Wizard Plugin
  * http://www.techlaboratory.net/smartwizard
  * 

diff --git a/css/smart_wizard_theme_arrows.min.css b/css/smart_wizard_theme_arrows.min.css
diff --git a/css/smart_wizard_theme_circles.css b/css/smart_wizard_theme_circles.css
@@ -1,4 +1,4 @@
-/* SmartWizard v4.0.1
+/* SmartWizard v4.x
  * jQuery Wizard Plugin
  * http://www.techlaboratory.net/smartwizard
  * 

diff --git a/css/smart_wizard_theme_dots.css b/css/smart_wizard_theme_dots.css
@@ -1,4 +1,4 @@
-/* SmartWizard v4.0.1
+/* SmartWizard v4.x
  * jQuery Wizard Plugin
  * http://www.techlaboratory.net/smartwizard
  * 

diff --git a/css/smart_wizard_theme_dots.min.css b/css/smart_wizard_theme_dots.min.css
diff --git a/examples/smartwizard-events.html b/examples/smartwizard-events.html
@@ -14,12 +14,23 @@
     <link href="../css/smart_wizard.min.css" rel="stylesheet" type="text/css" />
 
     <!-- Optional SmartWizard theme -->
+    <link href="../css/smart_wizard_theme_circles.min.css" rel="stylesheet" type="text/css" />
+    <link href="../css/smart_wizard_theme_arrows.min.css" rel="stylesheet" type="text/css" />
     <link href="../css/smart_wizard_theme_dots.min.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
     <div class="container">
 
         <form class="form-inline">
+            <div class="form-group">
+              <label >Choose Theme:</label>
+              <select id="theme_selector" class="form-control">
+                    <option value="dots">dots</option>
+                    <option value="default">default</option>
+                    <option value="arrows">arrows</option>
+              </select>
+            </div> 
+
             <label>External Buttons:</label>
             <div class="btn-group navbar-btn" role="group">
                 <button class="btn btn-default" id="prev-btn" type="button">Go Previous</button>
@@ -81,7 +92,39 @@ <h2>Step 4 Content</h2>
 
     <script type="text/javascript">
         $(document).ready(function(){
-            // Smart Wizard
+
+            // Smart Wizard events
+            $("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber, stepDirection) {
+                $("#message-box").append("<br /> > <strong>leaveStep</strong> called on " + stepNumber + ". Direction: " + stepDirection);
+                var res = confirm("Do you want to leave the step "+stepNumber+"?");
+                if(!res){
+                    $("#message-box").append(" <strong>leaveStep</strong> Cancelled");    
+                }else{
+                    $("#message-box").append(" <strong>leaveStep</strong> Allowed");
+                }
+                return res;
+            });
+
+            // This event should initialize before initializing smartWizard
+            // Otherwise this event wont load on first page load 
+            $("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection) {
+                $("#message-box").append(" > <strong>showStep</strong> called on " + stepNumber + ". Direction: " + stepDirection);
+            });
+
+            $("#smartwizard").on("beginReset", function(e) {
+                $("#message-box").append("<br /> > <strong>beginReset</strong> called");
+            });
+
+            $("#smartwizard").on("endReset", function(e) {
+                $("#message-box").append(" > <strong>endReset</strong> called");
+            });  
+
+            $("#smartwizard").on("themeChanged", function(e, theme) {
+                $("#message-box").append("<br /> > <strong>themeChanged</strong> called. New theme: " + theme);
+            });
+
+
+            // Smart Wizard initialize
             $('#smartwizard').smartWizard({ 
                     selected: 0, 
                     theme: 'dots',
@@ -92,17 +135,8 @@ <h2>Step 4 Content</h2>
                                             {label: 'Cancel', css: 'btn-danger', onClick: function(){ $('#smartwizard').smartWizard("reset"); }}
                                         ]
                                     }
-                 });
-
-
-            $("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber) {
-                $("#message-box").append(" >leaveStep called on " + stepNumber);
-                return confirm("Do you want to leave the step "+stepNumber+"?");
-            });
+                 });           
 
-            $("#smartwizard").on("showStep", function(e, anchorObject, stepNumber) {
-                $("#message-box").append(" >showStep called on " + stepNumber);
-            });
 
             // External Button Events
             $("#reset-btn").on("click", function() {

diff --git a/examples/smartwizard-input.html b/examples/smartwizard-input.html
@@ -126,20 +126,23 @@ <h2>Terms and Conditions</h2>
                                     }
                  });
 
-            $("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber) {
+            $("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber, stepDirection) {
                 var elmForm = $("#form-step-" + stepNumber);
-                if(elmForm){
+                // stepDirection === 'forward' :- this condition allows to do the form validation 
+                // only on forward navigation, that makes easy navigation on backwards still do the validation when going next
+                if(stepDirection === 'forward' && elmForm){
                     elmForm.validator('validate'); 
                     var elmErr = elmForm.children('.has-error');
                     if(elmErr && elmErr.length > 0){
-                        // Error found
+                        // Form validation failed
                         return false;    
                     }
                 }
                 return true;
             });
 
-            $("#smartwizard").on("showStep", function(e, anchorObject, stepNumber) {
+            $("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection) {
+                // Enable finish button only on last step
                 if(stepNumber == 3){ 
                     $('.btn-finish').removeClass('disabled');  
                 }else{