Statistics
| Branch: | Tag: | Revision:

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