UNPKG

9.87 kBHTMLView Raw
1<!doctype html>
2<html lang="en">
3<head>
4 <title>jQuery Smart Wizard - The awesome jQuery step wizard plugin</title>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8 <!-- Include SmartWizard CSS -->
9 <link href="./css/smart_wizard_all.css" rel="stylesheet" type="text/css" />
10
11 <!-- Demo Page Style - You don't need -->
12 <style>
13 body {
14 padding-right: 5%;
15 padding-left: 5%;
16 }
17 </style>
18
19</head>
20<body>
21
22 <br />
23 <p>
24 <label>Theme:</label>
25 <select id="theme_selector">
26 <option value="default" selected>Default</option>
27 <option value="arrows">Arrows</option>
28 <option value="dots">Dots</option>
29 <option value="progress">Progress</option>
30 </select>
31
32 &nbsp;&nbsp;&nbsp;&nbsp;
33 <input type="checkbox" id="is_justified" value="1" checked />
34 <label for="is_justified">Justified</label>
35
36 &nbsp;&nbsp;&nbsp;&nbsp;
37 <label>Animation:</label>
38 <select id="animation">
39 <option value="none">None</option>
40 <option value="fade">Fade</option>
41 <option value="slide-horizontal" selected>Slide Horizontal</option>
42 <option value="slide-vertical">Slide Vertical</option>
43 <option value="slide-swing">Slide Swing</option>
44 </select>
45
46 &nbsp;&nbsp;&nbsp;&nbsp;
47 <label>Go To:</label>
48 <select id="got_to_step">
49 <option value="1">1</option>
50 <option value="2">2</option>
51 <option value="3">3</option>
52 </select>
53
54 &nbsp;&nbsp;&nbsp;&nbsp;
55 <label>External Buttons:</label>
56 <button class="btn btn-secondary" id="prev-btn" type="button">Go Previous</button>
57 <button class="btn btn-secondary" id="next-btn" type="button">Go Next</button>
58 <button class="btn btn-danger" id="reset-btn" type="button">Reset Wizard</button>
59 </p>
60 <br />
61
62
63 <!-- SmartWizard html -->
64 <div id="smartwizard">
65
66 <ul class="nav">
67 <li class="nav-item">
68 <a class="nav-link" href="#step-1" data-repo="jquery-smarttab">
69 <strong>SmartTab</strong><br />repository details from GitHub
70 </a>
71 </li>
72 <li class="nav-item">
73 <a class="nav-link" href="#step-2" data-repo="smartwizard">
74 <strong>SmartWizard</strong><br />repository details from GitHub
75 </a>
76 </li>
77 <li class="nav-item">
78 <a class="nav-link" href="#step-3" data-repo="jquery-smartcart">
79 <strong>SmartCart</strong><br />repository details from GitHub
80 </a>
81 </li>
82 </ul>
83
84 <div class="tab-content">
85 <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
86 </div>
87 <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
88 </div>
89 <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
90 </div>
91 <div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
92 </div>
93 </div>
94 </div>
95
96 <br /> &nbsp;
97
98 <!-- Include jQuery -->
99 <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
100
101 <!-- Include SmartWizard JavaScript source -->
102 <script type="text/javascript" src="./js/jquery.smartWizard.min.js"></script>
103
104 <script type="text/javascript">
105 $(document).ready(function(){
106
107 // Toolbar extra buttons
108 var btnFinish = $('<button></button>').text('Finish')
109 .addClass('btn btn-info')
110 .on('click', function(){ alert('Finish Clicked'); });
111 var btnCancel = $('<button></button>').text('Cancel')
112 .addClass('btn btn-danger')
113 .on('click', function(){ $('#smartwizard').smartWizard("reset"); });
114
115 // Step show event
116 $("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
117 $("#prev-btn").removeClass('disabled');
118 $("#next-btn").removeClass('disabled');
119 if(stepPosition === 'first') {
120 $("#prev-btn").addClass('disabled');
121 } else if(stepPosition === 'last') {
122 $("#next-btn").addClass('disabled');
123 } else {
124 $("#prev-btn").removeClass('disabled');
125 $("#next-btn").removeClass('disabled');
126 }
127 });
128
129 $("#smartwizard").on("stepContent", function(e, anchorObject, stepIndex, stepDirection) {
130
131 var repo = anchorObject.data('repo');
132 var ajaxURL = "https://api.npms.io/v2/package/" + repo;
133 // Return a promise object
134 return new Promise((resolve, reject) => {
135
136 // Ajax call to fetch your content
137 $.ajax({
138 method : "GET",
139 url : ajaxURL,
140 beforeSend: function( xhr ) {
141 // Show the loader
142 $('#smartwizard').smartWizard("loader", "show");
143 }
144 }).done(function( res ) {
145 // console.log(res);
146
147 var html = '<h2>Ajax data about ' + repo + ' loaded from GitHub</h2>';
148 html += '<br>URL: <strong>' + ajaxURL + '</strong>';
149 html += '<br>Name: <strong>' + res.collected.metadata.name + '</strong>';
150 html += '<br>Description: ' + res.collected.metadata.description;
151 html += '<br>Homepage: <a href="' + res.collected.github.homepage + '" >'+ res.collected.github.homepage +'</a>';
152 html += '<br>Keywords: ' + res.collected.metadata.keywords.join(', ');
153
154 // html += '<br>Clone URL: ' + res.clone_url;
155 html += '<br>Stars: ' + res.collected.github.starsCount;
156 html += '<br>Forks: ' + res.collected.github.forksCount;
157 html += '<br>Watchers: ' + res.collected.github.subscribersCount;
158 html += '<br>Open Issues: ' + res.collected.github.issues.openCount + '/' + res.collected.github.issues.count;
159
160 html += '<br><br>Popularity: ' + parseInt(res.score.detail.popularity * 100);
161 html += '<br>Quality: ' + parseInt(res.score.detail.quality * 100);
162 html += '<br>Maintenance: ' + parseInt(res.score.detail.maintenance * 100);
163
164 // Resolve the Promise with the tab content
165 resolve(html);
166
167 // Hide the loader
168 $('#smartwizard').smartWizard("loader", "hide");
169 }).fail(function(err) {
170
171 // Reject the Promise with error message to show as tab content
172 reject( "An error loading the resource" );
173
174 // Hide the loader
175 $('#smartwizard').smartWizard("loader", "hide");
176 });
177
178 });
179 });
180
181 // Smart Wizard
182 $('#smartwizard').smartWizard({
183 selected: 0,
184 transition: {
185 animation: 'slide-horizontal', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
186 },
187 toolbarSettings: {
188 toolbarPosition: 'both', // both bottom
189 toolbarExtraButtons: [btnFinish, btnCancel]
190 }
191 });
192
193 // External Button Events
194 $("#reset-btn").on("click", function() {
195 // Reset wizard
196 $('#smartwizard').smartWizard("reset");
197 return true;
198 });
199
200 $("#prev-btn").on("click", function() {
201 // Navigate previous
202 $('#smartwizard').smartWizard("prev");
203 return true;
204 });
205
206 $("#next-btn").on("click", function() {
207 // Navigate next
208 $('#smartwizard').smartWizard("next");
209 return true;
210 });
211
212
213 // Demo Button Events
214 $("#got_to_step").on("change", function() {
215 // Go to step
216 var step_index = $(this).val() - 1;
217 $('#smartwizard').smartWizard("goToStep", step_index);
218 return true;
219 });
220
221 $("#is_justified").on("click", function() {
222 // Change Justify
223 var options = {
224 justified: $(this).prop("checked")
225 };
226
227 $('#smartwizard').smartWizard("setOptions", options);
228 return true;
229 });
230
231 $("#animation").on("change", function() {
232 // Change theme
233 var options = {
234 transition: {
235 animation: $(this).val()
236 },
237 };
238 $('#smartwizard').smartWizard("setOptions", options);
239 return true;
240 });
241
242 $("#theme_selector").on("change", function() {
243 // Change theme
244 var options = {
245 theme: $(this).val()
246 };
247 $('#smartwizard').smartWizard("setOptions", options);
248 return true;
249 });
250
251 });
252 </script>
253</body>
254</html>