root / snf-cyclades-app / synnefo / ui / new_ui / ui / javascripts / wizard.js @ 05205849
History | View | Annotate | Download (15.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 |
$('body').removeClass('with-overlay'); |
162 |
$('.overlay-area').fadeOut(400, function() { |
163 |
$('.overlay-div').hide(); |
164 |
ui.wizard.reset(); |
165 |
}); |
166 |
}, |
167 |
|
168 |
reset: function() { |
169 |
var wizard = ui.wizard.domID;
|
170 |
var wizardType = wizard.attr('id'); |
171 |
|
172 |
if(wizardType == 'vm-wizard') { |
173 |
wizard.find('.networks-area .more').show();
|
174 |
wizard.find('.details').hide();
|
175 |
wizard.find('.os li').hide();
|
176 |
wizard.find('.advanced-conf-options').hide();
|
177 |
wizard.find('.snf-color-picker').hide();
|
178 |
|
179 |
} |
180 |
else if(wizardType == 'network-wizard') { |
181 |
wizard.find('li .manual .input').hide();
|
182 |
wizard.find('ul.subnet_options').parent('li').show(); |
183 |
} |
184 |
|
185 |
ui.wizard.currentStep = 1;
|
186 |
wizard.find('.step').removeAttr('style'); |
187 |
wizard.find('.bottom').show();
|
188 |
wizard.find('input').val(''); |
189 |
ui.wizard.indicateStep(); |
190 |
ui.wizard.setMovementTags(); |
191 |
ui.wizard.preselectElements(wizardType); |
192 |
}, |
193 |
|
194 |
preselectElements: function(wizardType) { |
195 |
var wizard = ui.wizard.domID;
|
196 |
|
197 |
wizard.find('.current').not('.preselected').removeClass('current'); |
198 |
wizard.find('.preselected').not('.current').addClass('current'); |
199 |
wizard.find('.custom.dropdown.medium a:first').addClass('current'); // to fix |
200 |
wizard.find('.snf-radio-checked').not('.prechecked').toggleClass('snf-radio-checked snf-radio-unchecked'); |
201 |
wizard.find('.snf-radio-unchecked.prechecked').toggleClass('snf-radio-checked snf-radio-unchecked'); |
202 |
wizard.find('.snf-checkbox-checked').not('.prechecked').toggleClass('snf-checkbox-checked snf-checkbox-unchecked'); |
203 |
wizard.find('.snf-checkbox-unchecked.prechecked').toggleClass('snf-checkbox-checked snf-checkbox-unchecked'); |
204 |
wizard.find('.snf-arrow-up.preselected').toggleClass('snf-arrow-up snf-arrow-down'); |
205 |
if(wizardType == 'vm-wizard') { |
206 |
var preselectedImgCategory = wizard.find('.top .sub-menu[data-step=1] .preselected').data('img-type'); |
207 |
wizard.find('.os .'+preselectedImgCategory).show();
|
208 |
} |
209 |
}, |
210 |
|
211 |
vm: {
|
212 |
hideNext: function() { |
213 |
if(ui.wizard.currentStep == 2 && $('.flavor a.disabled').hasClass('small')) { |
214 |
return true; |
215 |
} |
216 |
else {
|
217 |
return false; |
218 |
} |
219 |
}, |
220 |
getSize: function(elem) { |
221 |
if ($(elem).hasClass('small')) { |
222 |
return 'small'; |
223 |
} else if ($(elem).hasClass('medium')) { |
224 |
return 'medium'; |
225 |
} else if ($(elem).hasClass('large')) { |
226 |
return 'large'; |
227 |
} |
228 |
}, |
229 |
|
230 |
|
231 |
pickResources: function(resource) { |
232 |
var wizard = ui.wizard.domID;
|
233 |
wizard.find('.flavor .with-flavor a:not(.' + resource + ')').removeClass('current'); |
234 |
wizard.find('.flavor .with-flavor a.' + resource + '').addClass('current'); |
235 |
}, |
236 |
|
237 |
showImageCategory: function(imagesCategory) { |
238 |
var wizard = ui.wizard.domID;
|
239 |
var selectedImages = $(imagesCategory).data('img-type'); |
240 |
wizard.find(imagesCategory).closest('.sub-menu').find('.current').removeClass('current'); |
241 |
wizard.find(imagesCategory).addClass('current');
|
242 |
wizard.find('.os li').hide();
|
243 |
wizard.find('.os .details').hide();
|
244 |
wizard.find('.os').find('.'+selectedImages).fadeIn(); |
245 |
} |
246 |
}, |
247 |
network : { }
|
248 |
} |
249 |
|
250 |
$(document).ready(function() { |
251 |
|
252 |
if($('.wizard').length>0) { |
253 |
var wizardType = $('.wizard').attr('id'); |
254 |
var wizard = ui.wizard.domID =$('#'+wizardType); |
255 |
ui.wizard.totalStep = ui.wizard.domID.find('.step').length;
|
256 |
ui.wizard.currentStep = 1;
|
257 |
var topHeaderArea = ui.wizard.areas.top.header = wizard.find('.top .nums'); |
258 |
var topMenuArea = ui.wizard.areas.top.menu = wizard.find('.top .menus'); |
259 |
var middleArea = ui.wizard.areas.middle = wizard.find('.middle'); |
260 |
var bottomArea = ui.wizard.areas.bottom = wizard.find('.bottom'); |
261 |
|
262 |
var prevBtn = ui.wizard.btns.previous = ui.wizard.areas.bottom.find('.nav.prev'); |
263 |
var nextBtn = ui.wizard.btns.next = ui.wizard.areas.bottom.find('.nav.next'); |
264 |
var closeBtn = ui.wizard.btns.close = wizard.find('.close'); |
265 |
|
266 |
// various functions for creation wizards
|
267 |
closeBtn.click(function(e) {
|
268 |
e.preventDefault(); |
269 |
ui.wizard.close(); |
270 |
}); |
271 |
|
272 |
nextBtn.click(function(e) {
|
273 |
e.preventDefault(); |
274 |
if (ui.wizard.currentStep == ui.wizard.totalStep ){
|
275 |
ui.wizard.submitData(); |
276 |
ui.wizard.close(); |
277 |
return false; |
278 |
} |
279 |
ui.wizard.goNext(); |
280 |
|
281 |
}); |
282 |
|
283 |
prevBtn.click(function(e) {
|
284 |
e.preventDefault(); |
285 |
if (ui.wizard.currentStep == 1 ){ |
286 |
ui.wizard.close(); |
287 |
return false; |
288 |
} |
289 |
ui.wizard.goPrev(); |
290 |
}); |
291 |
|
292 |
|
293 |
$(document).keydown(function(e) { |
294 |
var exp1 = $('.vm-name input').is(':focus') && $('.vm-name input').val().length>0; |
295 |
var exp2 = $('.form-item input').is(':focus') && $('.form-item input').val().length>0; |
296 |
// right arrow keyCode == 39
|
297 |
if (wizard.is(':visible').length != 0) { |
298 |
if (e.keyCode == 39 && ui.wizard.currentStep != (ui.wizard.totalStep) &&(!exp1) && (!exp2)) { |
299 |
ui.wizard.goNext(); |
300 |
return false; |
301 |
} |
302 |
// left arrow keyCode == 37
|
303 |
else if (e.keyCode == 37 && ui.wizard.currentStep != 1 &&(!exp1) &&(!exp2)) { |
304 |
ui.wizard.goPrev(); |
305 |
return false; |
306 |
} |
307 |
// ESC
|
308 |
else if (e.keyCode == 27 && ui.wizard.currentStep == 1) { |
309 |
ui.wizard.close(); |
310 |
} |
311 |
} |
312 |
}); |
313 |
|
314 |
// focus and tabs functionality
|
315 |
wizard.find('a').keyup(function(e) { |
316 |
var self = this; |
317 |
if (e.keyCode == 9 || e.which == 9) { |
318 |
if (e.shiftKey) {
|
319 |
} else {
|
320 |
//Focus next input
|
321 |
if ($(self).attr('data-next')) { |
322 |
$(self).focusout(function(e) { |
323 |
var classname = $(self).data('next'); |
324 |
wizard.find('.' + classname + '').first().focus(); |
325 |
}); |
326 |
} |
327 |
} |
328 |
} |
329 |
}); |
330 |
|
331 |
// navigation and numbers functions
|
332 |
wizard.find('.nav.previous').focus(function(e) { |
333 |
$(this).addClass('active'); |
334 |
}); |
335 |
|
336 |
wizard.find('.nav.previous').focusout(function(e) { |
337 |
$(this).removeClass('active'); |
338 |
|
339 |
}); |
340 |
|
341 |
if(wizardType == 'vm-wizard') { |
342 |
|
343 |
// step-1: pick OS
|
344 |
wizard.find('.os > li').keydown(function(e) { |
345 |
if(e.keyCode == 13) { |
346 |
$(this).trigger("click", true); |
347 |
e.preventDefault(); |
348 |
} |
349 |
}); |
350 |
wizard.find('.os .btn-col a').keydown(function(e) { |
351 |
if(e.keyCode == 13) { |
352 |
$(this).trigger("click", true); |
353 |
e.preventDefault(); |
354 |
e.stopPropagation(); |
355 |
} |
356 |
}); |
357 |
|
358 |
wizard.find('.os > li').click(function(e, wasEnterKey) { |
359 |
e.preventDefault(); |
360 |
if ( $(this).hasClass('current') && wasEnterKey) { |
361 |
ui.wizard.goNext(); |
362 |
} |
363 |
wizard.find('.os >li').removeClass('current'); |
364 |
$(this).addClass('current'); |
365 |
}); |
366 |
|
367 |
wizard.find('.os .btn-col a').click(function(e) { |
368 |
e.preventDefault(); |
369 |
e.stopPropagation(); |
370 |
$(this).toggleClass('current'); |
371 |
var self = this; |
372 |
$(this).parents('li').find('.details').stop().slideToggle(); |
373 |
}); |
374 |
|
375 |
wizard.find('.top .sub-menu[data-step=1] a').click(function(e) { |
376 |
e.preventDefault(); |
377 |
ui.wizard.vm.showImageCategory(this);
|
378 |
}); |
379 |
|
380 |
wizard.find('.os .name-col').focus(function(e) { |
381 |
$(this).parents('li').addClass('hover'); |
382 |
}); |
383 |
|
384 |
wizard.find('.os .name-col').focusout(function(e) { |
385 |
$(this).parents('li').removeClass('hover'); |
386 |
}); |
387 |
|
388 |
// step-2: pick flavor
|
389 |
var disabledElems = wizard.find('.flavor a.disabled'); |
390 |
var disabledElemsNum = disabledElems.length;
|
391 |
var size;
|
392 |
if(disabledElemsNum>0) { |
393 |
for(i=0; i<disabledElemsNum; i++) { |
394 |
size = ui.wizard.vm.getSize(disabledElems.get(i)); |
395 |
wizard.find('.sub-menu[data-step=2] a[data-size=' + size + ']').removeClass('current').addClass('disabled'); |
396 |
wizard.find('.flavor .'+size).removeClass('current preselected'); |
397 |
if(size == 'small') { |
398 |
wizard.find('.flavor .vm-storage-selection a').removeClass('current preselected'); |
399 |
|
400 |
} |
401 |
} |
402 |
} |
403 |
wizard.find('.sub-menu a[data-size]:not(.disabled)').click(function(e) { |
404 |
e.preventDefault(); |
405 |
$(this).parents('.sub-menu').find('a').removeClass('current'); |
406 |
$(this).addClass('current'); |
407 |
ui.wizard.vm.pickResources($(this).data('size')); |
408 |
}); |
409 |
|
410 |
wizard.find('.flavor .options:not(.vm-storage-selection) a:not(.disabled)').click(function(e) { |
411 |
e.preventDefault(); |
412 |
wizard.find('.sub-menu a[data-size]').removeClass('current'); |
413 |
$(this).parents('.options').find('a').removeClass('current'); |
414 |
$(this).addClass('current'); |
415 |
size = ui.wizard.vm.getSize(this);
|
416 |
var count = wizard.find('.options.with-flavor .' + size + '.current').length; |
417 |
if (count == 3) { |
418 |
wizard.find('.sub-menu[data-step=2] a[data-size=' + size + ']').addClass('current'); |
419 |
} |
420 |
}); |
421 |
|
422 |
wizard.find('.flavor .options.vm-storage-selection a').click(function(e) { |
423 |
e.preventDefault(); |
424 |
$(this).parents('.options').find('a').removeClass('current'); |
425 |
$(this).addClass('current'); |
426 |
}); |
427 |
|
428 |
wizard.find('.flavor .options a').hover(
|
429 |
function() {
|
430 |
var paragraph = $(this).parents('.options-bar').siblings('.title').find('p'); |
431 |
var text = $(this).data('help'); |
432 |
paragraph.html(text); |
433 |
paragraph.css('visibility', 'visible'); |
434 |
}, function() {
|
435 |
var paragraph = $(this).parents('.options-bar').siblings('.title').find('p'); |
436 |
paragraph.css('visibility', 'hidden'); |
437 |
} |
438 |
); |
439 |
|
440 |
wizard.find('.sub-menu[data-step=2] li:last').find('a').focusout(function(e) { |
441 |
$('.step-2').find('.dropdown a:first').focus(); |
442 |
}); |
443 |
|
444 |
// step-3: custom options
|
445 |
wizard.find('.expand-arrow').click(function(e) { |
446 |
e.preventDefault(); |
447 |
ui.expandDownArea(this, wizard.find('.advanced-conf-options')); |
448 |
}); |
449 |
|
450 |
|
451 |
// reaction li.click *
|
452 |
wizard.find('.advanced-conf-options .with-checkbox').click(function(e) { |
453 |
e.preventDefault(); |
454 |
$(this).find('.check').trigger('click'); |
455 |
}); |
456 |
|
457 |
// reaction a.click *
|
458 |
$('.with-checkbox .check').click(function(e) { |
459 |
e.stopPropagation(); |
460 |
console.log('hi');
|
461 |
var self = this; |
462 |
if ($(this).closest('.with-checkbox').hasClass('has-more')) { |
463 |
$(this).parent().next('.more').stop().slideToggle(400, function() { |
464 |
if ($(self).parent().next('.more:visible').length != 0) { |
465 |
$(self).find('span').removeClass('snf-checkbox-unchecked').addClass('snf-checkbox-checked'); |
466 |
} else {
|
467 |
$(self).find('span').removeClass('snf-checkbox-checked').addClass('snf-checkbox-unchecked'); |
468 |
} |
469 |
}); |
470 |
} |
471 |
}); |
472 |
|
473 |
$('.show-add-tag').click(function(e) { |
474 |
e.preventDefault(); |
475 |
$(this).parents('.tags-area').find('.snf-color-picker').slideDown('slow', function() { |
476 |
$('#hide-add-tag-dummy').scrollintoview({ |
477 |
'duration': 'slow' |
478 |
}); |
479 |
}); |
480 |
ui.colorPickerVisible = 1;
|
481 |
}); |
482 |
|
483 |
$('.hide-add-tag').click(function(e) { |
484 |
e.preventDefault(); |
485 |
$(this).parents('.tags-area').find('.snf-color-picker').slideUp(400, function() { |
486 |
$('.show-add-tag').first().scrollintoview({ |
487 |
'duration': 'slow' |
488 |
}); |
489 |
ui.colorPickerVisible = 0;
|
490 |
}); |
491 |
}); |
492 |
|
493 |
} |
494 |
else if (wizardType == 'network-wizard') { |
495 |
|
496 |
wizard.find('.network_options .check').click(function(e){ |
497 |
e.preventDefault(); |
498 |
e.stopPropagation(); |
499 |
this.blur();
|
500 |
$(this).parents('li').siblings().find('ul.subnet_options').parent('li').toggle(); |
501 |
}); |
502 |
|
503 |
wizard.find('.network_options .dhcp_option').click(function(e){ |
504 |
e.preventDefault(); |
505 |
$(this).find('.check').trigger('click'); |
506 |
}); |
507 |
|
508 |
wizard.find('.network_options .radio_btn').click(function(e){ |
509 |
e.preventDefault(); |
510 |
e.stopPropagation(); |
511 |
this.blur();
|
512 |
var state = $(this).find('span'); |
513 |
if($(this).hasClass('manual')) { |
514 |
$(this).siblings('.input').toggle(); |
515 |
} |
516 |
else {
|
517 |
$(this).closest('li').siblings('.manual').find('.input').hide(); |
518 |
} |
519 |
}); |
520 |
|
521 |
wizard.find('.subnet_options>li').click(function(e) { |
522 |
$(this).find('.radio_btn').trigger('click'); |
523 |
}) |
524 |
} |
525 |
} |
526 |
|
527 |
}) |