Skip to content

Commit 2895ada

Browse files
oguzhanoyaoguzhanoya
committed
Added async example
1 parent fcbdbac commit 2895ada

File tree

3 files changed

+159
-6
lines changed

3 files changed

+159
-6
lines changed

‎examples/async.html‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Async</title>
8+
<link rel="stylesheet" href="../dist/jquery-steps.css">
9+
<!-- Demo stylesheet -->
10+
<link rel="stylesheet" href="css/style.css">
11+
</head>
12+
<body>
13+
14+
<div class="step-app" id="demo">
15+
<ul class="step-steps">
16+
<li data-step-target="step1">Step 1</li>
17+
<li data-step-target="step2">Step 2</li>
18+
<li data-step-target="step3">Step 3</li>
19+
</ul>
20+
<div class="step-content">
21+
<div class="step-tab-panel" data-step="step1">
22+
... step1
23+
</div>
24+
<div class="step-tab-panel" data-step="step2">
25+
... step2
26+
</div>
27+
<div class="step-tab-panel" data-step="step3">
28+
... step3
29+
</div>
30+
</div>
31+
<div class="step-footer">
32+
<button data-step-action="prev" class="step-btn">Previous</button>
33+
<button data-step-action="next" class="step-btn">Next</button>
34+
<button data-step-action="finish" class="step-btn">Finish</button>
35+
</div>
36+
</div>
37+
<div class="loader">Loading...</div>
38+
39+
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
40+
<script src="../dist/jquery-steps.js"></script>
41+
<script>
42+
var loader = {
43+
isLoading: false,
44+
show: function() {
45+
loader.isLoading = true;
46+
$('.loader').show();
47+
},
48+
hide: function() {
49+
loader.isLoading = false;
50+
$('.loader').hide();
51+
}
52+
};
53+
54+
var xhr = null;
55+
var isAllowChangeToNextStep = false;
56+
var targetStepIndex = 1; // step2
57+
58+
var steps = $('#demo').steps({
59+
onChange: function(currentIndex, newIndex, stepDirection) {
60+
61+
if (isAllowChangeToNextStep && !loader.isLoading) {
62+
isAllowChangeToNextStep = false;
63+
return true;
64+
}
65+
66+
if (currentIndex === targetStepIndex) {
67+
if (stepDirection === 'forward') {
68+
69+
if (!loader.isLoading) {
70+
loader.show();
71+
72+
xhr = $.ajax({
73+
url: 'https://jsonplaceholder.typicode.com/todos/4'
74+
})
75+
.done(function(response) {
76+
loader.hide();
77+
78+
// success
79+
if (response.completed) {
80+
isAllowChangeToNextStep = true;
81+
82+
var stepIndex = steps_api.getStepIndex();
83+
if (stepIndex === targetStepIndex) {
84+
steps_api.next();
85+
}
86+
}
87+
});
88+
89+
}
90+
91+
return false;
92+
}
93+
}
94+
95+
if (xhr) {
96+
xhr.abort();
97+
loader.hide();
98+
}
99+
100+
return true;
101+
},
102+
onFinish: function() {
103+
alert('Wizard Completed');
104+
}
105+
});
106+
107+
var steps_api = steps.data('plugin_Steps');
108+
</script>
109+
</body>
110+
</html>

‎examples/css/style.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,46 @@ label.error {
1717
input.error {
1818
border: 2px solid #e7505a;
1919
}
20+
21+
.loader,
22+
.loader:after {
23+
border-radius: 50%;
24+
width: 10em;
25+
height: 10em;
26+
}
27+
.loader {
28+
display: none;
29+
margin-top: 10px;
30+
overflow: hidden;
31+
font-size: 3px;
32+
text-indent: -9999em;
33+
border-top: 1.1em solid rgba(255, 255, 255, 0.2);
34+
border-right: 1.1em solid rgba(255, 255, 255, 0.2);
35+
border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
36+
border-left: 1.1em solid #31c5d2;
37+
-webkit-transform: translateZ(0);
38+
-ms-transform: translateZ(0);
39+
transform: translateZ(0);
40+
-webkit-animation: load8 1.1s infinite linear;
41+
animation: load8 1.1s infinite linear;
42+
}
43+
@-webkit-keyframes load8 {
44+
0% {
45+
-webkit-transform: rotate(0deg);
46+
transform: rotate(0deg);
47+
}
48+
100% {
49+
-webkit-transform: rotate(360deg);
50+
transform: rotate(360deg);
51+
}
52+
}
53+
@keyframes load8 {
54+
0% {
55+
-webkit-transform: rotate(0deg);
56+
transform: rotate(0deg);
57+
}
58+
100% {
59+
-webkit-transform: rotate(360deg);
60+
transform: rotate(360deg);
61+
}
62+
}

‎src/Steps.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,12 @@ class Steps {
4646
// set default step
4747
this.setActiveStep(0, this.options.startAt, true);
4848

49-
this.setFooterBtns();
49+
this.setFooterButtons();
5050

5151
// show footer buttons
5252
if (!this.options.showFooterButtons) {
53-
this.hideFooterBtns();
54-
this.setFooterBtns = $.noop;
53+
this.hideFooterButtons();
54+
this.setFooterButtons = $.noop;
5555
}
5656
}
5757

@@ -122,11 +122,11 @@ class Steps {
122122
}
123123
i = conditionIncrementOrDecrement(i);
124124
}
125-
this.setFooterBtns();
125+
this.setFooterButtons();
126126
}
127127
}
128128

129-
setFooterBtns() {
129+
setFooterButtons() {
130130
const stepIndex = this.getStepIndex();
131131
const maxIndex = this.getMaxStepIndex();
132132
const $footer = this.el.find(this.options.footerSelector);
@@ -193,7 +193,7 @@ class Steps {
193193
this.hook('onFinish');
194194
}
195195

196-
hideFooterBtns() {
196+
hideFooterButtons() {
197197
this.el.find(this.options.footerSelector).hide();
198198
}
199199

0 commit comments

Comments
 (0)