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