Revision 935e59b9
b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/vm-wizard.js | ||
---|---|---|
11 | 11 |
expand_down: undefined |
12 | 12 |
}, |
13 | 13 |
speed: 500, |
14 |
semaphore:1, |
|
14 | 15 |
|
15 | 16 |
setDimensions: function() { |
16 | 17 |
$('.vm-wizard-carousel').css('width', 100 * ui.wizard.total_step + '%'); |
17 | 18 |
$('.vm-wizard-carousel .step').css('width', 100 / ui.wizard.total_step + '%'); |
18 | 19 |
}, |
19 | 20 |
getCurrent: function(){ |
20 |
return $('.step').filter('.current'); |
|
21 |
return $('.step').filter('.current').first();
|
|
21 | 22 |
}, |
22 | 23 |
|
23 | 24 |
getNextStep: function() { |
... | ... | |
45 | 46 |
}, |
46 | 47 |
|
47 | 48 |
move: function(step, pos) { |
48 |
|
|
49 |
ui.wizard.semaphore = 0; |
|
49 | 50 |
ui.wizard.focusFun(); |
50 | 51 |
ui.wizard.indicateStep(ui.wizard.current_step); |
51 | 52 |
ui.wizard.setMovementTags(ui.wizard.current_step, ui.wizard.btns.previous, ui.wizard.btns.next); |
52 | 53 |
$('body').css('overflow','hidden'); |
53 | 54 |
// the current visible pane |
54 |
current = this.getCurrent(); |
|
55 |
var current = this.getCurrent();
|
|
55 | 56 |
// Set next pane position on the right of the current one |
56 | 57 |
// Add current to the next pane, so that it will become |
57 | 58 |
// visible |
58 |
console.log('1'); |
|
59 | 59 |
step.css({ |
60 | 60 |
left: pos.toString() + '%' |
61 | 61 |
}).addClass("current"); |
62 |
|
|
62 |
console.log(current,'current'); |
|
63 | 63 |
// identify the current scroll position. Use it to |
64 | 64 |
// set next pane top position. We assume all panes |
65 | 65 |
// are within the scroll context of the main window. |
66 | 66 |
step.css({ |
67 | 67 |
top: this.getScrollOffset() + 'px' |
68 | 68 |
}); |
69 |
window.scroll(0, 0); |
|
70 |
$('.step').finish().animate({ |
|
69 |
$('.step').stop(false,true).animate({ |
|
71 | 70 |
marginLeft: (-pos).toString() + '%' |
72 | 71 |
}, { |
73 |
complete: _.bind(function() {
|
|
72 |
complete: _.bind(function() {
|
|
74 | 73 |
// assuming all the following take place |
75 | 74 |
// instantaneously within a single browser |
76 | 75 |
// render cycle, no flickering should occur. |
77 | 76 |
current.removeClass("current"); |
77 |
window.scroll(0, 0); |
|
78 | 78 |
step.css({ |
79 | 79 |
left: '0', |
80 | 80 |
top: '0' |
... | ... | |
86 | 86 |
if (ui.wizard.current_step == 3 ){ |
87 | 87 |
$('.vm-name input').first().focus(); |
88 | 88 |
} |
89 |
ui.wizard.semaphore =1; |
|
89 | 90 |
}, this) |
90 | 91 |
}); |
92 |
|
|
91 | 93 |
}, |
92 | 94 |
|
93 | 95 |
goNext: function() { |
... | ... | |
97 | 99 |
ui.wizard.close(); |
98 | 100 |
return; |
99 | 101 |
} |
100 |
ui.wizard.current_step++; |
|
101 |
ui.wizard.move(next, 100); |
|
102 |
if (ui.wizard.semaphore == 1) { |
|
103 |
ui.wizard.current_step++; |
|
104 |
ui.wizard.move(next, 100); |
|
105 |
} |
|
102 | 106 |
}, |
103 | 107 |
|
104 | 108 |
goPrev: function() { |
... | ... | |
107 | 111 |
ui.wizard.close(); |
108 | 112 |
return; |
109 | 113 |
} |
110 |
ui.wizard.current_step--; |
|
111 |
ui.wizard.move(prev, -100); |
|
114 |
if (ui.wizard.semaphore == 1) { |
|
115 |
ui.wizard.current_step--; |
|
116 |
ui.wizard.move(prev, -100); |
|
117 |
} |
|
112 | 118 |
}, |
113 | 119 |
|
114 | 120 |
initEvents: function() { |
... | ... | |
117 | 123 |
|
118 | 124 |
$(document).keydown(function(e) { |
119 | 125 |
var exp = $('.vm-name input').is(':focus') && $('.vm-name input').val().length>0 && ui.wizard.current_step ==3; |
120 |
console.log('exp',exp); |
|
121 | 126 |
// right arrow keyCode == 39 |
122 | 127 |
if ($('.wizard:visible').length != 0) { |
123 | 128 |
if (e.keyCode == 39 && ui.wizard.current_step != (ui.wizard.total_step) &&(!exp)) { |
... | ... | |
403 | 408 |
/* focus and tabs functionality */ |
404 | 409 |
|
405 | 410 |
$('a').keyup(function(e) { |
411 |
|
|
406 | 412 |
var self = this; |
407 | 413 |
if (e.keyCode == 9 || e.which == 9) { |
408 |
if (e.shiftKey) {} else { |
|
414 |
if (e.shiftKey) { |
|
415 |
alert(e); |
|
416 |
} else { |
|
409 | 417 |
//Focus next input |
410 | 418 |
if ($(self).attr('data-next')) { |
411 | 419 |
$(self).focusout(function(e) { |
412 | 420 |
var classname = $(self).data('next'); |
413 |
console.log('tab goes to ', classname); |
|
414 | 421 |
$('.' + classname + '').first().focus(); |
415 | 422 |
}); |
416 | 423 |
} |
Also available in: Unified diff