Added async example

oguzhanoya · Dec 13, 2021 · 2895ada · 2895ada
1 parent fcbdbac
commit 2895ada
Show file tree

Hide file tree

Showing 3 changed files with 159 additions and 6 deletions.
diff --git a/examples/async.html b/examples/async.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Async</title>
+  <link rel="stylesheet" href="../dist/jquery-steps.css">
+  <!-- Demo stylesheet -->
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+
+  <div class="step-app" id="demo">
+    <ul class="step-steps">
+      <li data-step-target="step1">Step 1</li>
+      <li data-step-target="step2">Step 2</li>
+      <li data-step-target="step3">Step 3</li>
+    </ul>
+    <div class="step-content">
+      <div class="step-tab-panel" data-step="step1">
+        ... step1
+      </div>
+      <div class="step-tab-panel" data-step="step2">
+        ... step2
+      </div>
+      <div class="step-tab-panel" data-step="step3">
+        ... step3
+      </div>
+    </div>
+    <div class="step-footer">
+      <button data-step-action="prev" class="step-btn">Previous</button>
+      <button data-step-action="next" class="step-btn">Next</button>
+      <button data-step-action="finish" class="step-btn">Finish</button>
+    </div>
+  </div>
+  <div class="loader">Loading...</div>
+
+  <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
+  <script src="../dist/jquery-steps.js"></script>
+  <script>
+    var loader = {
+      isLoading: false,
+      show: function() {
+        loader.isLoading = true;
+        $('.loader').show();
+      },
+      hide: function() {
+        loader.isLoading = false;
+        $('.loader').hide();
+      }
+    };
+
+    var xhr = null;
+    var isAllowChangeToNextStep = false;
+    var targetStepIndex = 1; // step2
+
+    var steps = $('#demo').steps({
+      onChange: function(currentIndex, newIndex, stepDirection) {
+
+        if (isAllowChangeToNextStep && !loader.isLoading) {
+          isAllowChangeToNextStep = false;
+          return true;
+        }
+
+        if (currentIndex === targetStepIndex) {
+          if (stepDirection === 'forward') {
+
+            if (!loader.isLoading) {
+              loader.show();
+
+              xhr = $.ajax({
+                url: 'https://jsonplaceholder.typicode.com/todos/4'
+              })
+              .done(function(response) {
+                loader.hide();
+
+                // success
+                if (response.completed) {
+                  isAllowChangeToNextStep = true;
+
+                  var stepIndex = steps_api.getStepIndex();
+                  if (stepIndex === targetStepIndex) {
+                    steps_api.next();
+                  }
+                }
+              });
+
+            }
+
+            return false;
+          }
+        }
+
+        if (xhr) {
+          xhr.abort();
+          loader.hide();
+        }
+
+        return true;
+      },
+      onFinish: function() {
+        alert('Wizard Completed');
+      }
+    });
+
+    var steps_api = steps.data('plugin_Steps');
+  </script>
+</body>
+</html>
diff --git a/examples/css/style.css b/examples/css/style.css
@@ -17,3 +17,46 @@ label.error {
 input.error {
     border: 2px solid #e7505a;
 }
+
+.loader,
+.loader:after {
+  border-radius: 50%;
+  width: 10em;
+  height: 10em;
+}
+.loader {
+  display: none;
+  margin-top: 10px;
+  overflow: hidden;
+  font-size: 3px;
+  text-indent: -9999em;
+  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
+  border-left: 1.1em solid #31c5d2;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load8 1.1s infinite linear;
+  animation: load8 1.1s infinite linear;
+}
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/Steps.js b/src/Steps.js
@@ -46,12 +46,12 @@ class Steps {
     // set default step
     this.setActiveStep(0, this.options.startAt, true);
 
-    this.setFooterBtns();
+    this.setFooterButtons();
 
     // show footer buttons
     if (!this.options.showFooterButtons) {
-      this.hideFooterBtns();
-      this.setFooterBtns = $.noop;
+      this.hideFooterButtons();
+      this.setFooterButtons = $.noop;
     }
   }
 
@@ -122,11 +122,11 @@ class Steps {
         }
         i = conditionIncrementOrDecrement(i);
       }
-      this.setFooterBtns();
+      this.setFooterButtons();
     }
   }
 
-  setFooterBtns() {
+  setFooterButtons() {
     const stepIndex = this.getStepIndex();
     const maxIndex = this.getMaxStepIndex();
     const $footer = this.el.find(this.options.footerSelector);
@@ -193,7 +193,7 @@ class Steps {
     this.hook('onFinish');
   }
 
-  hideFooterBtns() {
+  hideFooterButtons() {
     this.el.find(this.options.footerSelector).hide();
   }