| 33 |
33 |
<div class="modal" id="wizard">
|
| 34 |
34 |
<!-- status bar -->
|
| 35 |
35 |
<ul id="status">
|
| 36 |
|
<li class="active">
|
|
36 |
<li class="active li-0">
|
| 37 |
37 |
<span class="headernumber" class="first">1</span>
|
| 38 |
38 |
<div class="headerbody first">{% trans "Image" %}</div>
|
|
39 |
<img src="static/check.png" class="img-check" style="visibility:hidden;" />
|
| 39 |
40 |
</li>
|
| 40 |
|
<li>
|
|
41 |
<li class="li-1">
|
| 41 |
42 |
<span class="headernumber">2</span>
|
| 42 |
43 |
<div class="headerbody">{% trans "Flavor" %}</div>
|
|
44 |
<img src="static/check.png" class="img-check" style="visibility:hidden;" />
|
| 43 |
45 |
</li>
|
| 44 |
|
<li class="third">
|
|
46 |
<li class="li-2">
|
| 45 |
47 |
<span class="headernumber">3</span>
|
| 46 |
48 |
<div class="headerbody">{% trans "Name" %}</div>
|
| 47 |
49 |
</li>
|
| ... | ... | |
| 49 |
51 |
<!-- scrollable items -->
|
| 50 |
52 |
<div class="items">
|
| 51 |
53 |
<!-- pages -->
|
| 52 |
|
<div class="page">
|
|
54 |
<div class="page page1">
|
| 53 |
55 |
<h2>{% trans "Select an OS" %}</h2>
|
| 54 |
56 |
<hr class="topruler" />
|
| 55 |
57 |
<div id="tabscontainer">
|
| ... | ... | |
| 88 |
90 |
<button type="button" class="prev" id="cancel">{% trans "Cancel" %}</button>
|
| 89 |
91 |
<button type="button" class="next right">{% trans "Next" %}<img src="static/next.png" class="img-next" /></button>
|
| 90 |
92 |
</div>
|
| 91 |
|
<div class="page">
|
|
93 |
<div class="page page2">
|
| 92 |
94 |
<h2>{% trans "Select CPUs, RAM and Disk Size" %}</h2>
|
| 93 |
95 |
<hr class="topruler" />
|
| 94 |
96 |
<ul>
|
| ... | ... | |
| 148 |
150 |
<button type="button" class="prev"><img src="static/prev.png" class="img-prev" />{% trans "Back" %}</button>
|
| 149 |
151 |
<button type="button" class="next right">{% trans "Next" %}<img src="static/next.png" class="img-next" /></button>
|
| 150 |
152 |
</div>
|
| 151 |
|
<div class="page">
|
|
153 |
<div class="page page3">
|
| 152 |
154 |
<h2>{% trans "Confirm your settings" %}</h2>
|
| 153 |
155 |
<hr class="topruler" />
|
| 154 |
156 |
<ul id="page3-container">
|
| ... | ... | |
| 360 |
362 |
// rangeinput with default configuration
|
| 361 |
363 |
// validation logic is done inside the onBeforeSeek callback
|
| 362 |
364 |
api.onBeforeSeek(function(event, i) {
|
|
365 |
// update status bar
|
|
366 |
$("#status li").removeClass("active").eq(i).addClass("active");
|
| 363 |
367 |
// we are going 1 step backwards so no need for validation
|
|
368 |
if (api.getIndex() > i) {
|
|
369 |
$("#wizard .li-" + i).removeClass("checked");
|
|
370 |
$("#wizard .li-" + i).find(".img-check").css("visibility","hidden");
|
|
371 |
}
|
| 364 |
372 |
if (api.getIndex() < i) {
|
|
373 |
$("#wizard .li-" + api.getIndex()).addClass("checked");
|
|
374 |
$("#wizard .li-" + api.getIndex()).find(".img-check").css("visibility","visible");
|
| 365 |
375 |
// 1. get current page
|
| 366 |
376 |
var page = root.find(".page").eq(api.getIndex()),
|
| 367 |
377 |
// 2. .. and all required fields inside the page
|
| ... | ... | |
| 394 |
404 |
$("#machine_storage-label")[0].textContent = $("#storage-indicator")[0].value;
|
| 395 |
405 |
}
|
| 396 |
406 |
});
|
| 397 |
|
api.onSeek(function(event, i) {
|
| 398 |
|
// update status bar
|
| 399 |
|
$("#status li").removeClass("active").eq(i).addClass("active");
|
| 400 |
|
});
|
| 401 |
407 |
// if tab is pressed on the next button seek to next page
|
| 402 |
408 |
$(root).live('keydown', function (e) {
|
| 403 |
409 |
if ( e.keyCode == 9 ){
|