root / snf-cyclades-app / synnefo / ui / new_ui / ui / javascripts / wizard.js @ c997f7b6
History | View | Annotate | Download (16.6 kB)
1 |
ui.wizard = { |
---|---|
2 |
domID: undefined, |
3 |
currentStep: undefined, |
4 |
totalStep: undefined, |
5 |
btns: {
|
6 |
start: undefined, |
7 |
close: undefined, |
8 |
next: undefined, |
9 |
previous: undefined, |
10 |
}, |
11 |
areas : {
|
12 |
top: {
|
13 |
header: undefined, |
14 |
menu: undefined |
15 |
}, |
16 |
middle: undefined, |
17 |
bottom: undefined |
18 |
}, |
19 |
speed: 500, |
20 |
onMove: 0, |
21 |
|
22 |
getCurrentStep: function(){ |
23 |
return ui.wizard.domID.find('.step').filter('.current').first(); |
24 |
}, |
25 |
|
26 |
getNextStep: function() { |
27 |
return ui.wizard.getCurrentStep().next();
|
28 |
}, |
29 |
|
30 |
getPreviousStep: function() { |
31 |
return ui.wizard.getCurrentStep().prev();
|
32 |
}, |
33 |
|
34 |
getScrollOffset: function() { |
35 |
return document.body.scrollTop;
|
36 |
}, |
37 |
|
38 |
submitData: function() { |
39 |
console.log('submit data dummy function');
|
40 |
}, |
41 |
|
42 |
|
43 |
|
44 |
move: function(stepToDisplay, pos) { |
45 |
ui.wizard.onMove = 1;
|
46 |
ui.wizard.focusFun(); |
47 |
ui.wizard.indicateStep(); |
48 |
ui.wizard.setMovementTags(); |
49 |
$('body').css('overflow','hidden'); |
50 |
// the current visible pane
|
51 |
var current = this.getCurrentStep(); |
52 |
// Set next pane position on the right of the current one
|
53 |
// Add current to the next pane, so that it will become
|
54 |
// visible
|
55 |
stepToDisplay.css({ |
56 |
left: pos.toString() + '%' |
57 |
}).addClass("current");
|
58 |
// identify the current scroll position. Use it to
|
59 |
// set next pane top position. We assume all panes
|
60 |
// are within the scroll context of the main window.
|
61 |
stepToDisplay.css({ |
62 |
top: this.getScrollOffset() + 'px' |
63 |
}); |
64 |
ui.wizard.domID.find('.step').animate({
|
65 |
marginLeft: (-pos).toString() + '%' |
66 |
}, { |
67 |
complete: _.bind(function() { |
68 |
// assuming all the following take place
|
69 |
// instantaneously within a single browser
|
70 |
// render cycle, no flickering should occur.
|
71 |
current.removeClass("current");
|
72 |
window.scroll(0, 0); |
73 |
stepToDisplay.css({ |
74 |
left: '0', |
75 |
top: '0' |
76 |
}); |
77 |
$('.step').css({ |
78 |
marginLeft: '0' |
79 |
}); |
80 |
$('body').css('overflow','visible'); |
81 |
if (ui.wizard.currentStep == 3 ){ |
82 |
$('.vm-name input').first().focus(); |
83 |
} |
84 |
$('.actions-bar').show(); |
85 |
ui.wizard.onMove = 0;
|
86 |
}, this)
|
87 |
}); |
88 |
|
89 |
}, |
90 |
|
91 |
data_next_array: ['el0', 'el2', 'el4', 'el7'], |
92 |
|
93 |
focusFun: function() { |
94 |
var step = ui.wizard.currentStep;
|
95 |
var nextBtn = ui.wizard.btns.next;
|
96 |
|
97 |
$('.firstfocus-' + step + '').first().focus(); |
98 |
nextBtn.removeAttr('data-next');
|
99 |
nextBtn.attr('data-next', ui.wizard.data_next_array[step]);
|
100 |
}, |
101 |
|
102 |
goNext: function() { |
103 |
var next = ui.wizard.getNextStep();
|
104 |
if (ui.wizard.onMove == 0) { |
105 |
ui.wizard.currentStep++; |
106 |
ui.wizard.move(next, 100);
|
107 |
} |
108 |
}, |
109 |
|
110 |
goPrev: function() { |
111 |
var prev = ui.wizard.getPreviousStep();
|
112 |
if (ui.wizard.onMove == 0) { |
113 |
ui.wizard.currentStep--; |
114 |
ui.wizard.move(prev, -100);
|
115 |
} |
116 |
}, |
117 |
|
118 |
indicateStep: function() { |
119 |
var step =ui.wizard.currentStep;
|
120 |
var menus = ui.wizard.areas.top.menu;
|
121 |
var wizardHeader = ui.wizard.areas.top.header;
|
122 |
|
123 |
menus.find('.sub-menu').hide();
|
124 |
menus.find('.sub-menu[data-step='+step+']').fadeIn(); |
125 |
wizardHeader.children().removeClass('current');
|
126 |
wizardHeader.find('li:not(".current")').show().css("display", "inline"); |
127 |
wizardHeader.find('li:nth-child(' + step + ')').addClass('current'); |
128 |
wizardHeader.find('li.current').hide();
|
129 |
wizardHeader.find('li.current').fadeIn('slow').css("display", "inline"); |
130 |
wizardHeader.find('.current').prevAll('li').hide(); |
131 |
}, |
132 |
|
133 |
// changes the text of next and previous buttons
|
134 |
setMovementTags: function() { |
135 |
var step = ui.wizard.currentStep;
|
136 |
var totalStep = ui.wizard.totalStep;
|
137 |
var prevBtnLabel = ui.wizard.btns.previous.find('span'); |
138 |
var nextBtnLabel = ui.wizard.btns.next.find('span'); |
139 |
|
140 |
if(totalStep == 1) { |
141 |
prevBtnLabel.html('CANCEL');
|
142 |
nextBtnLabel.html('CREATE');
|
143 |
} |
144 |
else {
|
145 |
if (step == 1) { |
146 |
prevBtnLabel.html('CANCEL');
|
147 |
nextBtnLabel.html('NEXT');
|
148 |
} else if (step == totalStep) { |
149 |
prevBtnLabel.html('PREVIOUS');
|
150 |
nextBtnLabel.html('CREATE');
|
151 |
} else if (ui.wizard.vm.hideNext()){ |
152 |
// ***
|
153 |
ui.wizard.btns.next.hide(); |
154 |
} else {
|
155 |
prevBtnLabel.html('PREVIOUS');
|
156 |
nextBtnLabel.html('NEXT');
|
157 |
} |
158 |
} |
159 |
}, |
160 |
close: function() { |
161 |
console.log('1');
|
162 |
$('body').removeClass('with-overlay'); |
163 |
$('.overlay-area-custom').fadeOut(400, function() { |
164 |
$('.overlay-div').hide(); |
165 |
ui.wizard.reset(); |
166 |
}); |
167 |
}, |
168 |
|
169 |
reset: function() { |
170 |
var wizard = ui.wizard.domID;
|
171 |
var wizardType = wizard.attr('id'); |
172 |
|
173 |
if(wizardType == 'vm-wizard') { |
174 |
wizard.find('.networks-area .more').show();
|
175 |
wizard.find('.details').hide();
|
176 |
wizard.find('.os li').hide();
|
177 |
wizard.find('.advanced-conf-options').hide();
|
178 |
wizard.find('.snf-color-picker').hide();
|
179 |
|
180 |
} |
181 |
else if(wizardType == 'network-wizard') { |
182 |
wizard.find('li .manual .input').hide();
|
183 |
wizard.find('ul.subnet_options').parent('li').show(); |
184 |
} |
185 |
|
186 |
ui.wizard.currentStep = 1;
|
187 |
wizard.find('.step').removeAttr('style'); |
188 |
wizard.find('.bottom').show();
|
189 |
wizard.find('input').val(''); |
190 |
ui.wizard.indicateStep(); |
191 |
ui.wizard.setMovementTags(); |
192 |
ui.wizard.preselectElements(wizardType); |
193 |
}, |
194 |
|
195 |
preselectElements: function(wizardType) { |
196 |
var wizard = ui.wizard.domID;
|
197 |
|
198 |
wizard.find('.current').not('.preselected').removeClass('current'); |
199 |
wizard.find('.preselected').not('.current').addClass('current'); |
200 |
wizard.find('.custom.dropdown.medium a:first').addClass('current'); // to fix |
201 |
wizard.find('.snf-radio-checked').not('.prechecked').toggleClass('snf-radio-checked snf-radio-unchecked'); |
202 |
wizard.find('.snf-radio-unchecked.prechecked').toggleClass('snf-radio-checked snf-radio-unchecked'); |
203 |
wizard.find('.snf-checkbox-checked').not('.prechecked').toggleClass('snf-checkbox-checked snf-checkbox-unchecked'); |
204 |
wizard.find('.snf-checkbox-unchecked.prechecked').toggleClass('snf-checkbox-checked snf-checkbox-unchecked'); |
205 |
wizard.find('.snf-arrow-up.preselected').toggleClass('snf-arrow-up snf-arrow-down'); |
206 |
if(wizardType == 'vm-wizard') { |
207 |
var preselectedImgCategory = wizard.find('.top .sub-menu[data-step=1] .preselected').data('img-type'); |
208 |
wizard.find('.os .'+preselectedImgCategory).show();
|
209 |
} |
210 |
}, |
211 |
|
212 |
// use the showExplanatory and hideExplanatory functions
|
213 |
// when there's html structure as the following:
|
214 |
// <div class="title">
|
215 |
// <p>EXPLANATORY TEXT</p>
|
216 |
// </div>
|
217 |
// <div class="options-bar">
|
218 |
// <div>
|
219 |
// <a href="">link</a><
|
220 |
// </div>
|
221 |
// </div>
|
222 |
showExplanatoryText: function(link) { |
223 |
var paragraph = $(link).parents('.options-bar').siblings('.title').find('p'); |
224 |
// var text = $(link).data('help');
|
225 |
// paragraph.html(text);
|
226 |
paragraph.css('visibility', 'visible'); |
227 |
}, |
228 |
|
229 |
hideExplanatoryText: function(link) { |
230 |
var paragraph = $(link).parents('.options-bar').siblings('.title').find('p'); |
231 |
paragraph.css('visibility', 'hidden'); |
232 |
}, |
233 |
|
234 |
vm: {
|
235 |
hideNext: function() { |
236 |
if(ui.wizard.currentStep == 2 && $('.flavor a.disabled').hasClass('small')) { |
237 |
return true; |
238 |
} |
239 |
else {
|
240 |
return false; |
241 |
} |
242 |
}, |
243 |
getSize: function(elem) { |
244 |
if ($(elem).hasClass('small')) { |
245 |
return 'small'; |
246 |
} else if ($(elem).hasClass('medium')) { |
247 |
return 'medium'; |
248 |
} else if ($(elem).hasClass('large')) { |
249 |
return 'large'; |
250 |
} |
251 |
}, |
252 |
|
253 |
|
254 |
pickResources: function(resource) { |
255 |
var wizard = ui.wizard.domID;
|
256 |
wizard.find('.flavor .with-flavor a:not(.' + resource + ')').removeClass('current'); |
257 |
wizard.find('.flavor .with-flavor a.' + resource + '').addClass('current'); |
258 |
}, |
259 |
|
260 |
showImageCategory: function(imagesCategory) { |
261 |
var wizard = ui.wizard.domID;
|
262 |
var selectedImages = $(imagesCategory).data('img-type'); |
263 |
wizard.find(imagesCategory).closest('.sub-menu').find('.current').removeClass('current'); |
264 |
wizard.find(imagesCategory).addClass('current');
|
265 |
wizard.find('.os li').hide();
|
266 |
wizard.find('.os .details').hide();
|
267 |
wizard.find('.os').find('.'+selectedImages).fadeIn(); |
268 |
} |
269 |
}, |
270 |
network : { }
|
271 |
} |
272 |
|
273 |
$(document).ready(function() { |
274 |
|
275 |
if($('.wizard').length>0) { |
276 |
var wizardType = $('.wizard').attr('id'); |
277 |
var wizard = ui.wizard.domID =$('#'+wizardType); |
278 |
ui.wizard.totalStep = ui.wizard.domID.find('.step').length;
|
279 |
ui.wizard.currentStep = 1;
|
280 |
var topHeaderArea = ui.wizard.areas.top.header = wizard.find('.top .nums'); |
281 |
var topMenuArea = ui.wizard.areas.top.menu = wizard.find('.top .menus'); |
282 |
var middleArea = ui.wizard.areas.middle = wizard.find('.middle'); |
283 |
var bottomArea = ui.wizard.areas.bottom = wizard.find('.bottom'); |
284 |
|
285 |
var prevBtn = ui.wizard.btns.previous = ui.wizard.areas.bottom.find('.nav.prev'); |
286 |
var nextBtn = ui.wizard.btns.next = ui.wizard.areas.bottom.find('.nav.next'); |
287 |
var closeBtn = ui.wizard.btns.close = wizard.find('.close'); |
288 |
|
289 |
// various functions for creation wizards
|
290 |
closeBtn.click(function(e) {
|
291 |
e.preventDefault(); |
292 |
ui.wizard.close(); |
293 |
}); |
294 |
|
295 |
nextBtn.click(function(e) {
|
296 |
e.preventDefault(); |
297 |
if (ui.wizard.currentStep == ui.wizard.totalStep ){
|
298 |
ui.wizard.submitData(); |
299 |
ui.wizard.close(); |
300 |
return false; |
301 |
} |
302 |
ui.wizard.goNext(); |
303 |
|
304 |
}); |
305 |
|
306 |
prevBtn.click(function(e) {
|
307 |
e.preventDefault(); |
308 |
if (ui.wizard.currentStep == 1 ){ |
309 |
ui.wizard.close(); |
310 |
return false; |
311 |
} |
312 |
ui.wizard.goPrev(); |
313 |
}); |
314 |
|
315 |
|
316 |
$(document).keydown(function(e) { |
317 |
var exp1 = $('.vm-name input').is(':focus') && $('.vm-name input').val().length>0; |
318 |
var exp2 = $('.form-item input').is(':focus') && $('.form-item input').val().length>0; |
319 |
// right arrow keyCode == 39
|
320 |
if (wizard.is(':visible').length != 0) { |
321 |
if (e.keyCode == 39 && ui.wizard.currentStep != (ui.wizard.totalStep) &&(!exp1) && (!exp2)) { |
322 |
ui.wizard.goNext(); |
323 |
return false; |
324 |
} |
325 |
// left arrow keyCode == 37
|
326 |
else if (e.keyCode == 37 && ui.wizard.currentStep != 1 &&(!exp1) &&(!exp2)) { |
327 |
ui.wizard.goPrev(); |
328 |
return false; |
329 |
} |
330 |
// ESC
|
331 |
else if (e.keyCode == 27 && ui.wizard.currentStep == 1) { |
332 |
ui.wizard.close(); |
333 |
} |
334 |
} |
335 |
}); |
336 |
|
337 |
// focus and tabs functionality
|
338 |
wizard.find('a').keyup(function(e) { |
339 |
var self = this; |
340 |
if (e.keyCode == 9 || e.which == 9) { |
341 |
if (e.shiftKey) {
|
342 |
} else {
|
343 |
//Focus next input
|
344 |
if ($(self).attr('data-next')) { |
345 |
$(self).focusout(function(e) { |
346 |
var classname = $(self).data('next'); |
347 |
wizard.find('.' + classname + '').first().focus(); |
348 |
}); |
349 |
} |
350 |
} |
351 |
} |
352 |
}); |
353 |
|
354 |
// navigation and numbers functions
|
355 |
wizard.find('.nav.previous').focus(function(e) { |
356 |
$(this).addClass('active'); |
357 |
}); |
358 |
|
359 |
wizard.find('.nav.previous').focusout(function(e) { |
360 |
$(this).removeClass('active'); |
361 |
|
362 |
}); |
363 |
|
364 |
if(wizardType == 'vm-wizard') { |
365 |
|
366 |
// step-1: pick OS
|
367 |
wizard.find('.os > li').keydown(function(e) { |
368 |
if(e.keyCode == 13) { |
369 |
$(this).trigger("click", true); |
370 |
e.preventDefault(); |
371 |
} |
372 |
}); |
373 |
wizard.find('.os .btn-col a').keydown(function(e) { |
374 |
if(e.keyCode == 13) { |
375 |
$(this).trigger("click", true); |
376 |
e.preventDefault(); |
377 |
e.stopPropagation(); |
378 |
} |
379 |
}); |
380 |
|
381 |
wizard.find('.os > li').click(function(e, wasEnterKey) { |
382 |
e.preventDefault(); |
383 |
if ( $(this).hasClass('current') && wasEnterKey) { |
384 |
ui.wizard.goNext(); |
385 |
} |
386 |
wizard.find('.os >li').removeClass('current'); |
387 |
$(this).addClass('current'); |
388 |
}); |
389 |
|
390 |
wizard.find('.os .btn-col a').click(function(e) { |
391 |
e.preventDefault(); |
392 |
e.stopPropagation(); |
393 |
$(this).toggleClass('current'); |
394 |
var self = this; |
395 |
$(this).parents('li').find('.details').stop().slideToggle(); |
396 |
}); |
397 |
|
398 |
wizard.find('.top .sub-menu[data-step=1] a').click(function(e) { |
399 |
e.preventDefault(); |
400 |
ui.wizard.vm.showImageCategory(this);
|
401 |
}); |
402 |
|
403 |
wizard.find('.os .name-col').focus(function(e) { |
404 |
$(this).parents('li').addClass('hover'); |
405 |
}); |
406 |
|
407 |
wizard.find('.os .name-col').focusout(function(e) { |
408 |
$(this).parents('li').removeClass('hover'); |
409 |
}); |
410 |
|
411 |
// step-2: pick flavor
|
412 |
var disabledElems = wizard.find('.flavor a.disabled'); |
413 |
var disabledElemsNum = disabledElems.length;
|
414 |
var size;
|
415 |
if(disabledElemsNum>0) { |
416 |
for(i=0; i<disabledElemsNum; i++) { |
417 |
size = ui.wizard.vm.getSize(disabledElems.get(i)); |
418 |
wizard.find('.sub-menu[data-step=2] a[data-size=' + size + ']').removeClass('current').addClass('disabled'); |
419 |
wizard.find('.flavor .'+size).removeClass('current preselected'); |
420 |
if(size == 'small') { |
421 |
wizard.find('.flavor .vm-storage-selection a').removeClass('current preselected'); |
422 |
|
423 |
} |
424 |
} |
425 |
} |
426 |
wizard.find('.sub-menu a[data-size]:not(.disabled)').click(function(e) { |
427 |
e.preventDefault(); |
428 |
$(this).parents('.sub-menu').find('a').removeClass('current'); |
429 |
$(this).addClass('current'); |
430 |
ui.wizard.vm.pickResources($(this).data('size')); |
431 |
}); |
432 |
|
433 |
wizard.find('.flavor .options:not(.vm-storage-selection) a:not(.disabled)').click(function(e) { |
434 |
e.preventDefault(); |
435 |
wizard.find('.sub-menu a[data-size]').removeClass('current'); |
436 |
$(this).parents('.options').find('a').removeClass('current'); |
437 |
$(this).addClass('current'); |
438 |
size = ui.wizard.vm.getSize(this);
|
439 |
var count = wizard.find('.options.with-flavor .' + size + '.current').length; |
440 |
if (count == 3) { |
441 |
wizard.find('.sub-menu[data-step=2] a[data-size=' + size + ']').addClass('current'); |
442 |
} |
443 |
}); |
444 |
|
445 |
wizard.find('.flavor .options.vm-storage-selection a').click(function(e) { |
446 |
e.preventDefault(); |
447 |
$(this).parents('.options').find('a').removeClass('current'); |
448 |
$(this).addClass('current'); |
449 |
}); |
450 |
|
451 |
wizard.find('.flavor .options a').hover(
|
452 |
function() {
|
453 |
ui.wizard.showExplanatoryText($(this)) |
454 |
}, function() {
|
455 |
ui.wizard.hideExplanatoryText($(this)) |
456 |
}); |
457 |
|
458 |
wizard.find('.sub-menu[data-step=2] li:last').find('a').focusout(function(e) { |
459 |
$('.step-2').find('.dropdown a:first').focus(); |
460 |
}); |
461 |
|
462 |
// step-3: custom options
|
463 |
wizard.find('.expand-arrow').click(function(e) { |
464 |
e.preventDefault(); |
465 |
ui.expandDownArea(this, wizard.find('.advanced-conf-options')); |
466 |
}); |
467 |
|
468 |
|
469 |
// reaction li.click *
|
470 |
wizard.find('.advanced-conf-options .with-checkbox').click(function(e) { |
471 |
e.preventDefault(); |
472 |
$(this).find('.check').trigger('click'); |
473 |
}); |
474 |
|
475 |
// reaction a.click *
|
476 |
$('.with-checkbox .check').click(function(e) { |
477 |
e.stopPropagation(); |
478 |
console.log('hi');
|
479 |
var self = this; |
480 |
if ($(this).closest('.with-checkbox').hasClass('has-more')) { |
481 |
$(this).parent().next('.more').stop().slideToggle(400, function() { |
482 |
if ($(self).parent().next('.more:visible').length != 0) { |
483 |
$(self).find('span').removeClass('snf-checkbox-unchecked').addClass('snf-checkbox-checked'); |
484 |
} else {
|
485 |
$(self).find('span').removeClass('snf-checkbox-checked').addClass('snf-checkbox-unchecked'); |
486 |
} |
487 |
}); |
488 |
} |
489 |
}); |
490 |
} |
491 |
else if (wizardType == 'network-wizard') { |
492 |
|
493 |
wizard.find('.network_options .check').click(function(e){ |
494 |
e.preventDefault(); |
495 |
e.stopPropagation(); |
496 |
this.blur();
|
497 |
$(this).parents('li').siblings().find('ul.subnet_options').parent('li').toggle(); |
498 |
}); |
499 |
|
500 |
wizard.find('.network_options .dhcp_option').click(function(e){ |
501 |
e.preventDefault(); |
502 |
$(this).find('.check').trigger('click'); |
503 |
}); |
504 |
|
505 |
wizard.find('.network_options .radio_btn').click(function(e){ |
506 |
e.preventDefault(); |
507 |
e.stopPropagation(); |
508 |
this.blur();
|
509 |
var state = $(this).find('span'); |
510 |
if(state.hasClass('snf-radio-checked')) { |
511 |
if($(this).hasClass('manual')) { |
512 |
$(this).siblings('.input').show(); |
513 |
} |
514 |
else {
|
515 |
$(this).closest('li').siblings('.manual').find('.input').hide(); |
516 |
} |
517 |
} |
518 |
}); |
519 |
|
520 |
wizard.find('.subnet_options>li').click(function(e) { |
521 |
$(this).find('.radio_btn').trigger('click'); |
522 |
}) |
523 |
} |
524 |
else if (wizardType == 'volume-wizard') { |
525 |
// step-1
|
526 |
wizard.find('.volume_options .options a').hover(
|
527 |
function() {
|
528 |
ui.wizard.showExplanatoryText($(this)) |
529 |
}, function() {
|
530 |
ui.wizard.hideExplanatoryText($(this)) |
531 |
}); |
532 |
wizard.find('.volume_options .options a:not(.disabled)').click(function(e) { |
533 |
e.preventDefault(); |
534 |
if(!$(this).hasClass('current')) { |
535 |
$(this).closest('.options').find('.current').removeClass('current'); |
536 |
$(this).addClass('current'); |
537 |
} |
538 |
}); |
539 |
|
540 |
//step-2
|
541 |
wizard.find('.vms-list a').click(function(e) { |
542 |
e.preventDefault(); |
543 |
e.stopPropagation(); |
544 |
ui.checkOneRadioButton(this);
|
545 |
ui.changeRadiobuttonState(this);
|
546 |
}); |
547 |
|
548 |
wizard.find('.vms-list li').click(function(e) { |
549 |
e.preventDefault(); |
550 |
$(this).find('a').trigger('click'); |
551 |
}); |
552 |
|
553 |
} |
554 |
|
555 |
else if(wizardType == 'snapshot-wizard') { |
556 |
wizard.find('.vms-list a').click(function(e) { |
557 |
e.preventDefault(); |
558 |
e.stopPropagation(); |
559 |
ui.checkOneRadioButton(this);
|
560 |
ui.changeRadiobuttonState(this);
|
561 |
}); |
562 |
|
563 |
wizard.find('.vms-list li').click(function(e) { |
564 |
e.preventDefault(); |
565 |
$(this).find('a').trigger('click'); |
566 |
}); |
567 |
} |
568 |
} |
569 |
|
570 |
}) |