Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / javascripts / wizard.js @ c997f7b6

History | View | Annotate | Download (16.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
        // use the showExplanatory and hideExplanatory functions
213
        // when there's html structure as the following:
214
        //         <div class="title">
215
        //                 <p>EXPLANATORY TEXT</p>
216
        //         </div>
217
        //         <div class="options-bar">
218
        //                 <div>
219
        //                        <a href="">link</a><
220
        //                 </div>
221
        //         </div>
222
        showExplanatoryText: function(link) {
223
                var paragraph = $(link).parents('.options-bar').siblings('.title').find('p');
224
                // var text = $(link).data('help');
225
                // paragraph.html(text);
226
                paragraph.css('visibility', 'visible');
227
        },
228

    
229
        hideExplanatoryText: function(link) {
230
                var paragraph = $(link).parents('.options-bar').siblings('.title').find('p');
231
                paragraph.css('visibility', 'hidden');
232
        },
233

    
234
        vm: {
235
                hideNext: function() {
236
                        if(ui.wizard.currentStep == 2 && $('.flavor a.disabled').hasClass('small')) {
237
                                return true;
238
                        }
239
                        else {
240
                                return false;
241
                        }
242
                },
243
                getSize: function(elem) {
244
                        if ($(elem).hasClass('small')) {
245
                                return 'small';
246
                        } else if ($(elem).hasClass('medium')) {
247
                                return 'medium';
248
                        } else if ($(elem).hasClass('large')) {
249
                                return 'large';
250
                        }
251
                },
252

    
253

    
254
                pickResources: function(resource) {
255
                        var wizard = ui.wizard.domID;
256
                        wizard.find('.flavor .with-flavor a:not(.' + resource + ')').removeClass('current');
257
                        wizard.find('.flavor .with-flavor a.' + resource + '').addClass('current');
258
                },
259

    
260
                showImageCategory: function(imagesCategory) {
261
                        var wizard = ui.wizard.domID;
262
                        var selectedImages = $(imagesCategory).data('img-type');
263
                        wizard.find(imagesCategory).closest('.sub-menu').find('.current').removeClass('current');
264
                        wizard.find(imagesCategory).addClass('current');
265
                        wizard.find('.os li').hide();
266
                        wizard.find('.os .details').hide();
267
                        wizard.find('.os').find('.'+selectedImages).fadeIn();
268
                }
269
        },
270
        network : { }
271
}
272

    
273
$(document).ready(function() {
274

    
275
        if($('.wizard').length>0) {
276
                var wizardType = $('.wizard').attr('id');
277
                var wizard = ui.wizard.domID =$('#'+wizardType);
278
                ui.wizard.totalStep = ui.wizard.domID.find('.step').length;
279
                ui.wizard.currentStep = 1;
280
                var topHeaderArea = ui.wizard.areas.top.header = wizard.find('.top .nums');
281
                var topMenuArea = ui.wizard.areas.top.menu = wizard.find('.top .menus');
282
                var middleArea = ui.wizard.areas.middle = wizard.find('.middle');
283
                var bottomArea = ui.wizard.areas.bottom = wizard.find('.bottom');
284

    
285
                var prevBtn = ui.wizard.btns.previous = ui.wizard.areas.bottom.find('.nav.prev');
286
                var nextBtn = ui.wizard.btns.next = ui.wizard.areas.bottom.find('.nav.next');
287
                var closeBtn = ui.wizard.btns.close = wizard.find('.close');
288

    
289
                // various functions for creation wizards
290
                closeBtn.click(function(e) {
291
                        e.preventDefault();
292
                        ui.wizard.close();
293
                });
294

    
295
                nextBtn.click(function(e) {
296
                        e.preventDefault();
297
                        if (ui.wizard.currentStep == ui.wizard.totalStep ){
298
                                ui.wizard.submitData();
299
                                ui.wizard.close();
300
                                return false;
301
                        }
302
                        ui.wizard.goNext();
303

    
304
                });
305

    
306
                prevBtn.click(function(e) {
307
                        e.preventDefault();
308
                        if (ui.wizard.currentStep == 1 ){
309
                                ui.wizard.close();
310
                                return false;
311
                        }
312
                        ui.wizard.goPrev();
313
                });
314

    
315

    
316
                $(document).keydown(function(e) {
317
                        var exp1 = $('.vm-name input').is(':focus') && $('.vm-name input').val().length>0;
318
                        var exp2 = $('.form-item input').is(':focus') && $('.form-item input').val().length>0;
319
                        // right arrow keyCode == 39
320
                        if (wizard.is(':visible').length != 0) {
321
                                if (e.keyCode == 39 && ui.wizard.currentStep != (ui.wizard.totalStep) &&(!exp1) && (!exp2)) {
322
                                        ui.wizard.goNext();
323
                                        return false;
324
                                }
325
                                // left arrow keyCode == 37
326
                                else if (e.keyCode == 37 && ui.wizard.currentStep != 1 &&(!exp1) &&(!exp2)) {
327
                                        ui.wizard.goPrev();
328
                                        return false;
329
                                }
330
                                // ESC
331
                                else if (e.keyCode == 27 && ui.wizard.currentStep == 1) {
332
                                        ui.wizard.close();
333
                                }
334
                        }
335
                });
336

    
337
                // focus and tabs functionality
338
                 wizard.find('a').keyup(function(e) {
339
                        var self = this;
340
                        if (e.keyCode == 9 || e.which == 9) {
341
                                if (e.shiftKey) {
342
                                } else {
343
                                        //Focus next input
344
                                        if ($(self).attr('data-next')) {
345
                                                $(self).focusout(function(e) {
346
                                                        var classname = $(self).data('next');
347
                                                        wizard.find('.' + classname + '').first().focus();
348
                                                });
349
                                        }
350
                                }
351
                        }
352
                });
353

    
354
                // navigation and numbers functions
355
                wizard.find('.nav.previous').focus(function(e) {
356
                        $(this).addClass('active');
357
                });
358

    
359
                wizard.find('.nav.previous').focusout(function(e) {
360
                        $(this).removeClass('active');
361

    
362
                });
363

    
364
                if(wizardType == 'vm-wizard') {
365
                        
366
                        // step-1: pick OS
367
                        wizard.find('.os > li').keydown(function(e) {
368
                          if(e.keyCode == 13) {
369
                            $(this).trigger("click", true);
370
                            e.preventDefault();
371
                          }
372
                        });
373
                        wizard.find('.os .btn-col a').keydown(function(e) {
374
                          if(e.keyCode == 13) {
375
                            $(this).trigger("click", true);
376
                            e.preventDefault();
377
                            e.stopPropagation();
378
                          }
379
                        });
380

    
381
                        wizard.find('.os > li').click(function(e, wasEnterKey) {
382
                                e.preventDefault();
383
                                if ( $(this).hasClass('current') && wasEnterKey) {
384
                                        ui.wizard.goNext();
385
                                }
386
                                wizard.find('.os >li').removeClass('current');
387
                                $(this).addClass('current');
388
                        });
389

    
390
                        wizard.find('.os .btn-col a').click(function(e) {
391
                                e.preventDefault();
392
                                e.stopPropagation();
393
                                $(this).toggleClass('current');
394
                                var self = this;
395
                                $(this).parents('li').find('.details').stop().slideToggle();
396
                        });
397

    
398
                        wizard.find('.top .sub-menu[data-step=1] a').click(function(e) {
399
                                e.preventDefault();
400
                                ui.wizard.vm.showImageCategory(this);
401
                        });
402

    
403
                        wizard.find('.os .name-col').focus(function(e) {
404
                                $(this).parents('li').addClass('hover');
405
                        });
406

    
407
                        wizard.find('.os .name-col').focusout(function(e) {
408
                                $(this).parents('li').removeClass('hover');
409
                        });
410

    
411
                        // step-2: pick flavor
412
                        var disabledElems = wizard.find('.flavor a.disabled');
413
                        var disabledElemsNum = disabledElems.length;
414
                        var size;
415
                        if(disabledElemsNum>0) {
416
                                for(i=0; i<disabledElemsNum; i++) {
417
                                        size = ui.wizard.vm.getSize(disabledElems.get(i));
418
                                        wizard.find('.sub-menu[data-step=2] a[data-size=' + size + ']').removeClass('current').addClass('disabled');
419
                                        wizard.find('.flavor .'+size).removeClass('current preselected');
420
                                        if(size == 'small') {
421
                                                wizard.find('.flavor .vm-storage-selection a').removeClass('current preselected');
422

    
423
                                        }
424
                                }
425
                        }
426
                        wizard.find('.sub-menu a[data-size]:not(.disabled)').click(function(e) {
427
                                e.preventDefault();
428
                                $(this).parents('.sub-menu').find('a').removeClass('current');
429
                                $(this).addClass('current');
430
                                ui.wizard.vm.pickResources($(this).data('size'));
431
                        });
432

    
433
                        wizard.find('.flavor .options:not(.vm-storage-selection) a:not(.disabled)').click(function(e) {
434
                                e.preventDefault();
435
                                wizard.find('.sub-menu a[data-size]').removeClass('current');
436
                                $(this).parents('.options').find('a').removeClass('current');
437
                                $(this).addClass('current');
438
                                size = ui.wizard.vm.getSize(this);
439
                                var count = wizard.find('.options.with-flavor .' + size + '.current').length;
440
                                if (count == 3) {
441
                                        wizard.find('.sub-menu[data-step=2] a[data-size=' + size + ']').addClass('current');
442
                                }
443
                        });
444

    
445
                        wizard.find('.flavor .options.vm-storage-selection a').click(function(e) {
446
                                e.preventDefault();
447
                                $(this).parents('.options').find('a').removeClass('current');
448
                                $(this).addClass('current');
449
                        });
450

    
451
                        wizard.find('.flavor .options a').hover(
452
                                function() {
453
                                        ui.wizard.showExplanatoryText($(this))
454
                                }, function() {
455
                                        ui.wizard.hideExplanatoryText($(this))
456
                                });
457

    
458
                        wizard.find('.sub-menu[data-step=2] li:last').find('a').focusout(function(e) {
459
                                $('.step-2').find('.dropdown a:first').focus();
460
                        });
461

    
462
                        // step-3: custom options
463
                        wizard.find('.expand-arrow').click(function(e) {
464
                                e.preventDefault();
465
                                ui.expandDownArea(this, wizard.find('.advanced-conf-options'));
466
                        });
467

    
468

    
469
                        // reaction li.click *
470
                        wizard.find('.advanced-conf-options .with-checkbox').click(function(e) {
471
                                e.preventDefault();
472
                                $(this).find('.check').trigger('click');
473
                        });
474

    
475
                        // reaction a.click *
476
                        $('.with-checkbox .check').click(function(e) {
477
                                e.stopPropagation();
478
                                console.log('hi');
479
                                var self = this;
480
                                if ($(this).closest('.with-checkbox').hasClass('has-more')) {
481
                                        $(this).parent().next('.more').stop().slideToggle(400, function() {
482
                                                if ($(self).parent().next('.more:visible').length != 0) {
483
                                                        $(self).find('span').removeClass('snf-checkbox-unchecked').addClass('snf-checkbox-checked');
484
                                                } else {
485
                                                        $(self).find('span').removeClass('snf-checkbox-checked').addClass('snf-checkbox-unchecked');
486
                                                }
487
                                        });
488
                                }
489
                        });
490
                }
491
                else if (wizardType == 'network-wizard') {
492

    
493
                        wizard.find('.network_options .check').click(function(e){
494
                                e.preventDefault();
495
                                e.stopPropagation();
496
                                this.blur();
497
                                $(this).parents('li').siblings().find('ul.subnet_options').parent('li').toggle();
498
                        });
499

    
500
                        wizard.find('.network_options .dhcp_option').click(function(e){
501
                                e.preventDefault();
502
                                $(this).find('.check').trigger('click');
503
                        });
504

    
505
                        wizard.find('.network_options .radio_btn').click(function(e){
506
                        e.preventDefault();
507
                        e.stopPropagation();
508
                        this.blur();
509
                        var state = $(this).find('span');
510
                        if(state.hasClass('snf-radio-checked')) {
511
                            if($(this).hasClass('manual')) {
512
                                $(this).siblings('.input').show();
513
                            }
514
                            else {
515
                                $(this).closest('li').siblings('.manual').find('.input').hide();
516
                            }
517
                        }
518
                    });
519

    
520
                        wizard.find('.subnet_options>li').click(function(e) {
521
                                $(this).find('.radio_btn').trigger('click');
522
                        })
523
                }
524
                else if (wizardType == 'volume-wizard') {
525
                        // step-1
526
                        wizard.find('.volume_options .options a').hover(
527
                                function() {
528
                                        ui.wizard.showExplanatoryText($(this))
529
                                }, function() {
530
                                        ui.wizard.hideExplanatoryText($(this))
531
                                });
532
                        wizard.find('.volume_options .options a:not(.disabled)').click(function(e) {
533
                                e.preventDefault();
534
                                if(!$(this).hasClass('current')) {
535
                                        $(this).closest('.options').find('.current').removeClass('current');
536
                                        $(this).addClass('current');
537
                                }
538
                        });
539

    
540
                        //step-2
541
                        wizard.find('.vms-list a').click(function(e) {
542
                                e.preventDefault();
543
                                e.stopPropagation();
544
                                ui.checkOneRadioButton(this);
545
                                ui.changeRadiobuttonState(this);
546
                        });
547

    
548
                        wizard.find('.vms-list li').click(function(e) {
549
                                e.preventDefault();
550
                                $(this).find('a').trigger('click');
551
                        });
552

    
553
                }
554

    
555
                else if(wizardType == 'snapshot-wizard') {
556
                        wizard.find('.vms-list a').click(function(e) {
557
                                e.preventDefault();
558
                                e.stopPropagation();
559
                                ui.checkOneRadioButton(this);
560
                                ui.changeRadiobuttonState(this);
561
                        });
562

    
563
                        wizard.find('.vms-list li').click(function(e) {
564
                                e.preventDefault();
565
                                $(this).find('a').trigger('click');
566
                        });
567
                }
568
        }
569

    
570
})