Statistics
| Branch: | Tag: | Revision:

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
})