Revision 0c26d55c snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/vm-wizard.js
| b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/vm-wizard.js | ||
|---|---|---|
| 13 | 13 |
}, |
| 14 | 14 |
speed: 500, |
| 15 | 15 |
|
| 16 |
set_dimensions: function (){
|
|
| 16 |
setDimensions: function (){
|
|
| 17 | 17 |
$('.vm-wizard-carousel').css('width', 100*ui.wizard.total_step+'%');
|
| 18 | 18 |
$('.vm-wizard-carousel .step').css('width', 100/ui.wizard.total_step+'%');
|
| 19 |
ui.wizard.set_step_height('.step', '.top', '.bottom', '.header');
|
|
| 19 |
ui.wizard.setStepHeight('.step', '.top', '.bottom', '.header');
|
|
| 20 | 20 |
}, |
| 21 | 21 |
|
| 22 |
submit_data: function (){
|
|
| 22 |
submitData: function (){
|
|
| 23 | 23 |
console.log('submit data dummy function');
|
| 24 | 24 |
}, |
| 25 | 25 |
|
| 26 | 26 |
data_next_array: ['test1','el2','el4','el7'], |
| 27 | 27 |
|
| 28 |
focus_fun: function(){
|
|
| 28 |
focusFun: function(){
|
|
| 29 | 29 |
// $('.nav.next').attr('data-step',ui.wizard.current_step);
|
| 30 | 30 |
// $('.nav.next').removeAttr('data-next');
|
| 31 | 31 |
// $('.nav.next').attr('data-next', ui.wizard.data_next_array[ui.wizard.current_step]);
|
| 32 | 32 |
// $('.'+ui.wizard.data_next_array[ui.wizard.current_step]+'').first().focus();
|
| 33 |
// console.log('focus_fun',ui.wizard.data_next_array[ui.wizard.current_step]);
|
|
| 33 |
// console.log('focusFun',ui.wizard.data_next_array[ui.wizard.current_step]);
|
|
| 34 | 34 |
}, |
| 35 | 35 |
|
| 36 | 36 |
move: function () {
|
| 37 | 37 |
var percentage = -(ui.wizard.current_step-1)*100+'%'; |
| 38 | 38 |
$('.step').css('overflow-y', 'hidden');
|
| 39 |
$('.vm-wizard-carousel').stop().animate({ 'left': percentage }, ui.wizard.speed, function() {
|
|
| 39 |
$('.vm-wizard-carousel').stop(true, true).animate({ 'left': percentage }, ui.wizard.speed, function() {
|
|
| 40 | 40 |
$('.step').css('overflow-y', 'scroll');
|
| 41 | 41 |
}); |
| 42 |
ui.wizard.focus_fun();
|
|
| 43 |
ui.wizard.indicate_step(ui.wizard.current_step);
|
|
| 44 |
ui.wizard.set_movement_tags(ui.wizard.current_step, ui.wizard.btns.previous, ui.wizard.btns.next);
|
|
| 45 |
if(ui.wizard.current_step == 3) {
|
|
| 42 |
ui.wizard.focusFun();
|
|
| 43 |
ui.wizard.indicateStep(ui.wizard.current_step);
|
|
| 44 |
ui.wizard.setMovementTags(ui.wizard.current_step, ui.wizard.btns.previous, ui.wizard.btns.next);
|
|
| 45 |
if(ui.wizard.current_step == 3 && $('.step-3 .advanced-conf-options:visible').length == 0) {
|
|
| 46 | 46 |
setTimeout(function() { $('.vm-name').find('input').focus() }, ui.wizard.speed/2);
|
| 47 | 47 |
} |
| 48 | 48 |
|
| 49 | 49 |
}, |
| 50 | 50 |
|
| 51 |
go_next: function () {
|
|
| 51 |
goNext: function () {
|
|
| 52 | 52 |
if(ui.wizard.current_step < ui.wizard.total_step){
|
| 53 | 53 |
ui.wizard.current_step++; |
| 54 | 54 |
ui.wizard.move(); |
| 55 | 55 |
} |
| 56 | 56 |
else {
|
| 57 |
ui.wizard.submit_data();
|
|
| 57 |
ui.wizard.submitData();
|
|
| 58 | 58 |
ui.wizard.close('.bottom', '#vm-wizard', '.overlay-area');
|
| 59 | 59 |
} |
| 60 | 60 |
}, |
| 61 | 61 |
|
| 62 |
go_prev:function() {
|
|
| 62 |
goPrev:function() {
|
|
| 63 | 63 |
if(ui.wizard.current_step > 1){
|
| 64 | 64 |
ui.wizard.current_step--; |
| 65 | 65 |
ui.wizard.move(); |
| ... | ... | |
| 69 | 69 |
} |
| 70 | 70 |
}, |
| 71 | 71 |
|
| 72 |
init_events: function(){
|
|
| 73 |
ui.wizard.set_dimensions();
|
|
| 72 |
initEvents: function(){
|
|
| 73 |
ui.wizard.setDimensions();
|
|
| 74 | 74 |
|
| 75 | 75 |
$(document).keydown(function(e) {
|
| 76 | 76 |
// right arrow keyCode == 39 |
| 77 |
// ui.wizard.total_step+1 because current_step has not changed yet |
|
| 78 |
if(e.keyCode==39 && ui.wizard.current_step!=(ui.wizard.total_step+1)) {
|
|
| 79 |
ui.wizard.go_next(); |
|
| 80 |
return false; |
|
| 81 |
} |
|
| 82 |
// left arrow keyCode == 37 |
|
| 83 |
else if(e.keyCode==37 && ui.wizard.current_step!=1) {
|
|
| 84 |
ui.wizard.go_prev(); |
|
| 85 |
return false; |
|
| 86 |
} |
|
| 87 |
// ESC |
|
| 88 |
else if(e.keyCode== 27 && ui.wizard.current_step==1) {
|
|
| 89 |
ui.wizard.close('.bottom', '#vm-wizard', '.overlay-area')
|
|
| 90 |
} |
|
| 77 |
if($('.vm-wizard-carousel:visible').length != 0) {
|
|
| 78 |
if(e.keyCode==39 && ui.wizard.current_step!=(ui.wizard.total_step)) {
|
|
| 79 |
ui.wizard.goNext(); |
|
| 80 |
return false; |
|
| 81 |
} |
|
| 82 |
// left arrow keyCode == 37 |
|
| 83 |
else if(e.keyCode==37 && ui.wizard.current_step!=1) {
|
|
| 84 |
ui.wizard.goPrev(); |
|
| 85 |
return false; |
|
| 86 |
} |
|
| 87 |
// ESC |
|
| 88 |
else if(e.keyCode== 27 && ui.wizard.current_step==1) {
|
|
| 89 |
ui.wizard.close('.bottom', '#vm-wizard', '.overlay-area')
|
|
| 90 |
} |
|
| 91 |
} |
|
| 91 | 92 |
}); |
| 92 | 93 |
|
| 93 | 94 |
ui.wizard.btns.next.click(function(e){
|
| 94 |
ui.wizard.go_next();
|
|
| 95 |
ui.wizard.goNext();
|
|
| 95 | 96 |
}) |
| 96 | 97 |
|
| 97 | 98 |
ui.wizard.btns.previous.click(function(e){
|
| 98 |
ui.wizard.go_prev();
|
|
| 99 |
ui.wizard.goPrev();
|
|
| 99 | 100 |
}); |
| 100 | 101 |
}, |
| 101 | 102 |
|
| 102 | 103 |
// for the carousel index |
| 103 |
indicate_step: function(step) {
|
|
| 104 |
indicateStep: function(step) {
|
|
| 104 | 105 |
$('.wizard .top .sub-menu[data-step]').hide();
|
| 105 | 106 |
$('.wizard .top .sub-menu[data-step='+step+']').fadeIn();
|
| 106 | 107 |
$('.nums').children().removeClass('current');
|
| ... | ... | |
| 110 | 111 |
}, |
| 111 | 112 |
|
| 112 | 113 |
// changes the text of next and previous buttons |
| 113 |
set_movement_tags: function() {
|
|
| 114 |
setMovementTags: function() {
|
|
| 114 | 115 |
if (ui.wizard.current_step==1) {
|
| 115 | 116 |
ui.wizard.btns.previous.find('span').html('CANCEL');
|
| 116 | 117 |
ui.wizard.btns.next.find('span').html('NEXT');
|
| ... | ... | |
| 127 | 128 |
|
| 128 | 129 |
close: function(bottom_area, main_area, total_area) {
|
| 129 | 130 |
$('.step').animate({
|
| 130 |
scrollTop: 0}, 800, 'swing', function() {
|
|
| 131 |
|
|
| 131 |
scrollTop: 0}, 1400, 'swing', function() {
|
|
| 132 | 132 |
$(bottom_area).hide(); |
| 133 |
$(main_area).slideUp(); |
|
| 134 |
$(total_area).slideUp(400, function(){
|
|
| 133 |
$(main_area).slideUp(600);
|
|
| 134 |
$(total_area).slideUp(600, function(){
|
|
| 135 | 135 |
ui.wizard.reset(); |
| 136 |
ui.wizard.preselect_elements(bottom_area);
|
|
| 137 |
ui.wizard.preselect_elements(main_area);
|
|
| 138 |
ui.wizard.preselect_elements(total_area);
|
|
| 136 |
ui.wizard.preselectElements(bottom_area);
|
|
| 137 |
ui.wizard.preselectElements(main_area);
|
|
| 138 |
ui.wizard.preselectElements(total_area);
|
|
| 139 | 139 |
}); |
| 140 | 140 |
}); |
| 141 | 141 |
}, |
| ... | ... | |
| 145 | 145 |
ui.wizard.current_step = 1; |
| 146 | 146 |
$('.vm-wizard-carousel').css('left',0);
|
| 147 | 147 |
$('.bottom').show();
|
| 148 |
ui.wizard.indicate_step(ui.wizard.current_step);
|
|
| 149 |
ui.wizard.set_movement_tags();
|
|
| 148 |
ui.wizard.indicateStep(ui.wizard.current_step);
|
|
| 149 |
ui.wizard.setMovementTags();
|
|
| 150 | 150 |
$('.networks-area .more').show();
|
| 151 | 151 |
$('.details').hide();
|
| 152 | 152 |
$('.vm-name input').val('');
|
| ... | ... | |
| 154 | 154 |
$('.snf-color-picker').hide();
|
| 155 | 155 |
}, |
| 156 | 156 |
|
| 157 |
expand_area: function() {
|
|
| 157 |
expandArea: function() {
|
|
| 158 | 158 |
ui.wizard.btns.expand_down.click(function(e){
|
| 159 | 159 |
// e.preventDefault(); |
| 160 | 160 |
ui.expandArrow(ui.wizard.btns.expand_down); |
| ... | ... | |
| 168 | 168 |
}); |
| 169 | 169 |
}) |
| 170 | 170 |
}, |
| 171 |
focus_custom: function(el, step) {
|
|
| 171 |
focusCustom: function(el, step) {
|
|
| 172 | 172 |
el.focus(); |
| 173 | 173 |
el.attr('data-step',step);
|
| 174 | 174 |
}, |
| 175 | 175 |
|
| 176 |
preselect_elements: function(area) {
|
|
| 176 |
preselectElements: function(area) {
|
|
| 177 | 177 |
$(area).find('.current').not('.preselected').removeClass('current');
|
| 178 | 178 |
$(area).find('.preselected').not('.current').addClass('current');
|
| 179 | 179 |
$(area).find('.custom.dropdown.medium a:first').addClass('current'); // to fix
|
| ... | ... | |
| 184 | 184 |
$('.expand-link').find('.snf-arrow-up.preselected').toggleClass('snf-arrow-up snf-arrow-down');
|
| 185 | 185 |
}, |
| 186 | 186 |
|
| 187 |
set_step_height: function(stepEl, fixedTopEl, fixedBottomEl, headerEl) {
|
|
| 188 |
topHeight = $(fixedTopEl).height(); |
|
| 189 |
bottomHeight = $('.bottom .row').height();
|
|
| 190 |
totalHeight = $(window).height(); |
|
| 191 |
headerHeight = $(headerEl).height(); |
|
| 192 |
stepHeight = totalHeight-topHeight-bottomHeight-headerHeight; |
|
| 193 |
console.log('stepHeight: ', stepHeight)
|
|
| 194 |
tt=stepEl; |
|
| 187 |
setStepHeight: function(stepEl, fixedTopEl, fixedBottomEl, headerEl) {
|
|
| 188 |
var topHeight = $(fixedTopEl).height(); |
|
| 189 |
var bottomHeight = $('.bottom .row').height();
|
|
| 190 |
var totalHeight = $(window).height(); |
|
| 191 |
var headerHeight = $(headerEl).height(); |
|
| 192 |
var stepHeight = totalHeight-topHeight-bottomHeight-headerHeight; |
|
| 195 | 193 |
$(stepEl).outerHeight(stepHeight); |
| 196 | 194 |
$('.wizard-content').outerHeight(stepHeight);
|
| 197 | 195 |
}, |
| ... | ... | |
| 234 | 232 |
ui.wizard.pickResources($(this).data('size'));
|
| 235 | 233 |
}); |
| 236 | 234 |
|
| 237 |
$('.wizard .flavor .options:not(".storage") a').click(function(e){
|
|
| 235 |
$('.wizard .flavor .options:not(".vm-storage-selection") a').click(function(e){
|
|
| 238 | 236 |
// e.preventDefault(); |
| 239 | 237 |
$('.wizard .sub-menu a[data-size]').removeClass('current');
|
| 240 | 238 |
$(this).parents('.options').find('a').removeClass('current');
|
| 241 | 239 |
$(this).addClass('current');
|
| 242 | 240 |
}); |
| 243 | 241 |
|
| 244 |
$('.wizard .flavor .options.storage a').click(function(e){
|
|
| 242 |
$('.wizard .flavor .options.vm-storage-selection a').click(function(e){
|
|
| 245 | 243 |
// e.preventDefault(); |
| 246 | 244 |
$(this).parents('.options').find('a').removeClass('current');
|
| 247 | 245 |
$(this).addClass('current');
|
| 248 | 246 |
}); |
| 249 | 247 |
|
| 250 | 248 |
/* step-3: Advanced options */ |
| 251 |
|
|
| 249 |
|
|
| 250 |
// reaction li.click |
|
| 252 | 251 |
$('.advanced-conf-options .checkbox').click(function(e){
|
| 253 | 252 |
e.preventDefault(); |
| 253 |
var self = this; |
|
| 254 | 254 |
var checkbox = $(this).find('.check');
|
| 255 | 255 |
ui.changeCheckboxState(checkbox); |
| 256 |
console.log('a1');
|
|
| 256 | 257 |
if($(this).hasClass('has-more')) {
|
| 257 |
$(this).next('.more').slideToggle();
|
|
| 258 |
$(this).next('.more').stop().slideToggle(400, function() {
|
|
| 259 |
console.log('a2');
|
|
| 260 |
if($(self).next('.more:visible').length != 0) {
|
|
| 261 |
$(checkbox).find('span').removeClass('snf-checkbox-unchecked').addClass('snf-checkbox-checked');
|
|
| 262 |
console.log('a3');
|
|
| 263 |
} |
|
| 264 |
else {
|
|
| 265 |
$(checkbox).find('span').removeClass('snf-checkbox-checked').addClass('snf-checkbox-unchecked');
|
|
| 266 |
} |
|
| 267 |
}); |
|
| 258 | 268 |
} |
| 259 | 269 |
}); |
| 270 |
// reaction a.click |
|
| 271 |
$('.checkbox .check').click(function(e) {
|
|
| 272 |
e.stopPropagation(); |
|
| 273 |
var self = this; |
|
| 274 |
if($(this).closest('.checkbox').hasClass('has-more')) {
|
|
| 275 |
console.log('hi');
|
|
| 276 |
$(this).parent().next('.more').stop().slideToggle(400, function() {
|
|
| 277 |
console.log('a2');
|
|
| 278 |
if($(self).parent().next('.more:visible').length != 0) {
|
|
| 279 |
$(self).find('span').removeClass('snf-checkbox-unchecked').addClass('snf-checkbox-checked');
|
|
| 280 |
console.log('a3');
|
|
| 281 |
} |
|
| 282 |
else {
|
|
| 283 |
$(self).find('span').removeClass('snf-checkbox-checked').addClass('snf-checkbox-unchecked');
|
|
| 284 |
} |
|
| 285 |
}); |
|
| 286 |
} |
|
| 287 |
}); |
|
| 260 | 288 |
|
| 261 | 289 |
$('.show-add-tag').click(function(e){
|
| 262 | 290 |
e.preventDefault(); |
| ... | ... | |
| 272 | 300 |
}); |
| 273 | 301 |
}); |
| 274 | 302 |
|
| 275 |
$('.checkbox .check').click(function(e) {
|
|
| 276 |
e.stopPropagation(); |
|
| 277 |
|
|
| 278 |
if($(this).closest('.checkbox').hasClass('has-more')) {
|
|
| 279 |
$(this).parent().next('.more').slideToggle();
|
|
| 280 |
} |
|
| 281 |
}) |
|
| 282 | 303 |
/* end of step functions */ |
| 283 | 304 |
|
| 284 | 305 |
/* navigation and numbers functions */ |
| ... | ... | |
| 344 | 365 |
ui.wizard.btns.next = $('.bottom').find('.nav.next');
|
| 345 | 366 |
ui.wizard.btns.expand_down =$('.adv-main').find('.expand-link');
|
| 346 | 367 |
ui.wizard.btns.close =$('#vm-wizard').find('.close');
|
| 347 |
ui.wizard.init_events();
|
|
| 348 |
ui.wizard.set_movement_tags();
|
|
| 349 |
ui.wizard.expand_area();
|
|
| 368 |
ui.wizard.initEvents();
|
|
| 369 |
ui.wizard.setMovementTags();
|
|
| 370 |
ui.wizard.expandArea();
|
|
| 350 | 371 |
ui.wizard.btns.close.click(function(e) {
|
| 351 | 372 |
ui.wizard.close('.bottom', '#vm-wizard', '.overlay-area')
|
| 352 | 373 |
}); |
| 353 | 374 |
|
| 354 | 375 |
$(window).resize(function() {
|
| 355 |
ui.wizard.set_step_height('.step', '.top', '.bottom', '.header')
|
|
| 376 |
ui.wizard.setStepHeight('.step', '.top', '.bottom', '.header')
|
|
| 356 | 377 |
}); |
| 357 | 378 |
}); |
Also available in: Unified diff