Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / javascripts / vm-wizard.js @ 96e40ea0

History | View | Annotate | Download (13.7 kB)

1
ui.wizard = {
2
        current_step: undefined,
3
        total_step: $('.wizard-content .step').length,
4
        current_position: undefined,
5
        relocation: undefined,
6
        btns: {
7
                start: undefined,
8
                close: undefined,
9
                next: undefined,
10
                previous: undefined,
11
                expand_down: undefined
12
        },
13
        speed: 500,
14
        semaphore:1,
15

    
16
        setDimensions: function() {
17
                $('.vm-wizard-carousel').css('width', 100 * ui.wizard.total_step + '%');
18
                $('.vm-wizard-carousel .step').css('width', 100 / ui.wizard.total_step + '%');
19
        },
20
        getCurrent: function(){
21
                return $('.step').filter('.current').first();
22
        },
23

    
24
        getNextStep: function() {
25
        return ui.wizard.getCurrent().next();
26
    },
27

    
28
    getPreviousStep: function() {
29
        return ui.wizard.getCurrent().prev();
30
    },
31

    
32
    getScrollOffset: function() {
33
        return document.body.scrollTop;
34
    },
35

    
36
        submitData: function() {
37
                console.log('submit data dummy function');
38
        },
39

    
40
        data_next_array: ['el0', 'el2', 'el4', 'el7'],
41

    
42
        focusFun: function() {
43
                $('.firstfocus-' + ui.wizard.current_step + '').first().focus();
44
                $('.nav.next').removeAttr('data-next');
45
                $('.nav.next').attr('data-next', ui.wizard.data_next_array[ui.wizard.current_step]);
46
        },
47

    
48
        move: function(step, pos) {
49
                ui.wizard.semaphore = 0;
50
                ui.wizard.focusFun();
51
                ui.wizard.indicateStep(ui.wizard.current_step);
52
                ui.wizard.setMovementTags(ui.wizard.current_step, ui.wizard.btns.previous, ui.wizard.btns.next);
53
                $('body').css('overflow','hidden');
54
                // the current visible pane
55
        var current = this.getCurrent();
56
        // Set next pane position on the right of the current one
57
        // Add current to the next pane, so that it will become
58
        // visible
59
        step.css({
60
            left: pos.toString() + '%'
61
        }).addClass("current");
62
        console.log(current,'current');
63
        // identify the current scroll position. Use it to
64
        // set next pane top position. We assume all panes
65
        // are within the scroll context of the main window.
66
        step.css({
67
            top: this.getScrollOffset() + 'px'
68
        });
69
        $('.step').stop(false,true).animate({
70
            marginLeft: (-pos).toString() + '%'
71
        }, {
72
                                complete: _.bind(function() {
73
                // assuming all the following take place
74
                // instantaneously within a single browser 
75
                // render cycle, no flickering should occur.
76
                current.removeClass("current");
77
                            window.scroll(0, 0);
78
                step.css({
79
                    left: '0',
80
                    top: '0'
81
                });
82
                $('.step').css({
83
                    marginLeft: '0'
84
                });
85
                $('body').css('overflow','visible');
86
                if (ui.wizard.current_step == 3 ){
87
                                        $('.vm-name input').first().focus();
88
                }
89
                ui.wizard.semaphore =1;
90
            }, this)
91
        });
92

    
93
        },
94

    
95
        goNext: function() {
96
                var next = ui.wizard.getNextStep();
97
                if (!next) {
98
                        ui.wizard.submitData();
99
                        ui.wizard.close();
100
                        return;
101
                }
102
                if (ui.wizard.semaphore == 1) {
103
                        ui.wizard.current_step++;
104
                        ui.wizard.move(next, 100);
105
                }
106
        },
107

    
108
        goPrev: function() {
109
                var prev = ui.wizard.getPreviousStep();
110
                if (!prev) {
111
                        ui.wizard.close();
112
                        return;
113
                }
114
                if (ui.wizard.semaphore == 1) {
115
                        ui.wizard.current_step--;
116
                        ui.wizard.move(prev, -100);
117
                }
118
        },
119

    
120
        initEvents: function() {
121
                ui.wizard.setDimensions();
122

    
123

    
124
                $(document).keydown(function(e) {
125
                        var exp = $('.vm-name input').is(':focus') && $('.vm-name input').val().length>0 && ui.wizard.current_step ==3;
126
                        // right arrow keyCode == 39
127
                        if ($('.wizard:visible').length != 0) {
128
                                if (e.keyCode == 39 && ui.wizard.current_step != (ui.wizard.total_step) &&(!exp)) {
129
                                        ui.wizard.goNext();
130
                                        return false;
131
                                }
132
                                // left arrow keyCode == 37
133
                                else if (e.keyCode == 37 && ui.wizard.current_step != 1 &&(!exp)) {
134
                                        ui.wizard.goPrev();
135
                                        return false;
136
                                }
137
                                // ESC
138
                                else if (e.keyCode == 27 && ui.wizard.current_step == 1) {
139
                                        ui.wizard.close();
140
                                }
141
                        }
142
                });
143

    
144
                ui.wizard.btns.next.click(function(e) {
145
                        if (ui.wizard.current_step == ui.wizard.total_step ){
146
                                ui.wizard.submitData();
147
                                ui.wizard.close();
148
                                return false;
149
                        }
150
                        ui.wizard.goNext();
151
                });
152

    
153
                ui.wizard.btns.previous.click(function(e) {
154
                        if (ui.wizard.current_step == 1 ){
155
                                ui.wizard.close();
156
                                return false;
157
                        }
158
                        ui.wizard.goPrev();
159
                });
160
        },
161

    
162
        // for the carousel index
163
        indicateStep: function(step) {
164
                $('.wizard .top .sub-menu[data-step]').hide();
165
                $('.wizard .top .sub-menu[data-step=' + step + ']').fadeIn();
166

    
167
                $('.nums').children().removeClass('current');
168
                $('.nums li:not(".current")').show().css("display", "inline");
169
                $('.nums li:nth-child(' + ui.wizard.current_step + ')').addClass('current');
170
                $('.nums li.current').hide();
171
                $('.nums li.current').fadeIn('slow').css("display", "inline");
172
                $('.nums .current').prevAll('li').hide();
173
        },
174

    
175
        // changes the text of next and previous buttons
176
        setMovementTags: function() {
177
                if (ui.wizard.current_step == 1) {
178
                        ui.wizard.btns.previous.find('span').html('CANCEL');
179
                        ui.wizard.btns.next.find('span').html('NEXT');
180
                } else if (ui.wizard.current_step == ui.wizard.total_step) {
181
                        ui.wizard.btns.previous.find('span').html('PREVIOUS');
182
                        ui.wizard.btns.next.find('span').html('CREATE');
183
                } else {
184
                        ui.wizard.btns.previous.find('span').html('PREVIOUS');
185
                        ui.wizard.btns.next.find('span').html('NEXT');
186
                }
187
        },
188

    
189
        close: function() {
190
                $('body').removeClass('with-overlay');
191
                $('.overlay-area').fadeOut(400, function() {
192
                        $('.overlay-div').hide();
193
                });
194
                ui.wizard.resetWizard();
195
        },
196
        // manually sets elements to a initial state
197
        resetWizard: function() {
198
                ui.wizard.current_step = 1;
199
                $('.step').removeAttr('style');
200
                $('.bottom').show();
201
                ui.wizard.indicateStep(ui.wizard.current_step);
202
                ui.wizard.setMovementTags();
203
                $('.networks-area .more').show();
204
                $('.details').hide();
205
                $('.vm-name input').val("");
206
                $('.form-item input').val("");
207
                $('.advanced-conf-options').hide();
208
                $('.snf-color-picker').hide();
209
                ui.wizard.preselectElements('.wizard');
210
        },
211

    
212
        expandArea: function() {
213
                ui.wizard.btns.expand_down.click(function(e) {
214
                        ui.expandArrow(ui.wizard.btns.expand_down);
215
                        $('.wizard-content').removeAttr('style');
216
                        ui.wizard.btns.expand_down.parents('div.advanced-conf-step').find('.advanced-conf-options').stop().slideToggle(600, function() {
217
                                if ($('.advanced-conf-options:visible').length != 0) {
218
                                        ui.wizard.btns.expand_down.find('.snf-arrow-down .snf-arrow-up').removeClass('snf-arrow-down').addClass('snf-arrow-up');
219
                                } else {
220
                                        ui.wizard.btns.expand_down.find('.snf-arrow-down .snf-arrow-up').addClass('snf-arrow-down');
221
                                }
222

    
223
                        });
224
                })
225
        },
226
        focusCustom: function(el, step) {
227
                el.focus();
228
                el.attr('data-step', step);
229
        },
230

    
231
        preselectElements: function(area) {
232
                $(area).find('.current').not('.preselected').removeClass('current');
233
                $(area).find('.preselected').not('.current').addClass('current');
234
                $(area).find('.custom.dropdown.medium a:first').addClass('current'); // to fix
235
                $(area).find('.snf-radio-checked').not('.prechecked').toggleClass('snf-radio-checked snf-radio-unchecked');
236
                $(area).find('.snf-radio-unchecked.prechecked').toggleClass('snf-radio-checked snf-radio-unchecked');
237
                $(area).find('.snf-checkbox-checked').not('.prechecked').toggleClass('snf-checkbox-checked snf-checkbox-unchecked');
238
                $(area).find('.snf-checkbox-unchecked.prechecked').toggleClass('snf-checkbox-checked snf-checkbox-unchecked');
239
                $('.expand-link').find('.snf-arrow-up.preselected').toggleClass('snf-arrow-up snf-arrow-down');
240
                $('.step-1').addClass('current');
241
                
242
                $('.os li').hide();
243
                $('#vm-wizard .top .sub-menu[data-step=1] .preselected').data('img-type')
244
                $('.os').find('.'+$('#vm-wizard .top .sub-menu[data-step=1] .preselected').data('img-type')).show();
245
        },
246

    
247
        pickResources: function(resource) {
248
                $('.flavor .with-flavor a:not(.' + resource + ')').removeClass('current');
249
                $('.flavor .with-flavor a.' + resource + '').addClass('current');
250
        },
251

    
252
        showImageCategory: function(imagesCategory) {
253
                $(imagesCategory).closest('.sub-menu').find('.current').removeClass('current');
254
                $(imagesCategory).addClass('current');
255
                $('.os li').hide();
256
                $('.os .details').hide();
257
                selectedImages = $(imagesCategory).data('img-type');
258
                $('.os').find('.'+selectedImages).fadeIn();
259
                
260
        
261
        }
262

    
263
}
264

    
265

    
266
$(document).ready(function() {
267

    
268
        /*
269
Various functions for vm creation wizard
270
*/
271

    
272
        /* step functions */
273
        /* step-1: Pick OS */
274
        $('.wizard .os > li').keydown(function(e) {
275
          if(e.keyCode == 13) {
276
            $(this).trigger("click", true);
277
            e.preventDefault();
278
          }
279
        });
280

    
281
        $('.wizard .os > li').click(function(e, wasEnterKey) {
282
                e.preventDefault();
283
                if ( $(this).hasClass('current') && wasEnterKey) {
284
                        ui.wizard.goNext();
285
                }
286
                $('.wizard .os >li').removeClass('current');
287
                $(this).addClass('current');
288
        });
289

    
290
        $('.os .btn-col a').click(function(e) {
291
                e.preventDefault();
292
                e.stopPropagation();
293
                $(this).toggleClass('current');
294
                var self = this;
295
                $(this).parents('li').find('.details').stop().slideToggle();
296
        });
297

    
298

    
299
        /* step-2: Select flavor */
300
        $('.wizard .sub-menu a[data-size]').on("click", function(e) {
301
                // e.preventDefault();
302
                $(this).parents('.sub-menu').find('a').removeClass('current');
303
                $(this).addClass('current');
304
                ui.wizard.pickResources($(this).data('size'));
305
        });
306

    
307
        $('.wizard .flavor .options:not(".vm-storage-selection") a').click(function(e) {
308
                // e.preventDefault();
309
                $('.wizard .sub-menu a[data-size]').removeClass('current');
310
                $(this).parents('.options').find('a').removeClass('current');
311
                $(this).addClass('current');
312

    
313
                var size, count;
314
                if ($(this).hasClass('small')) {
315
                        size = 'small';
316
                } else if ($(this).hasClass('medium')) {
317
                        size = 'medium';
318
                } else if ($(this).hasClass('large')) {
319
                        size = 'large';
320
                }
321

    
322
                count = $('.wizard .step-2 .options.with-flavor .' + size + '.current').length;
323
                if (count == 3) {
324
                        $('.wizard .sub-menu[data-step=2]').find('a[data-size=' + size + ']').addClass('current');
325
                }
326
        });
327

    
328
        $('.wizard .flavor .options.vm-storage-selection a').click(function(e) {
329
                // e.preventDefault();
330
                $(this).parents('.options').find('a').removeClass('current');
331
                $(this).addClass('current');
332
        });
333

    
334
        $('.flavor .options a').hover(
335
                function() {
336
                        var paragraph = $(this).parents('.options-bar').siblings('.title').find('p');
337
                        var text = $(this).data('help');
338
                        paragraph.html(text);
339
                        paragraph.css('visibility', 'visible');
340
                }, function() {
341
                        var paragraph = $(this).parents('.options-bar').siblings('.title').find('p');
342
                        paragraph.css('visibility', 'hidden');
343
                }
344
        );
345
        /* step-3: Advanced options */
346

    
347
        // reaction li.click   
348
        $('.advanced-conf-options .checkbox').click(function(e) {
349
                e.preventDefault();
350
                var self = this;
351
                var checkbox = $(this).find('.check');
352
                ui.changeCheckboxState(checkbox);
353
                if ($(this).hasClass('has-more')) {
354
                        $(this).next('.more').stop().slideToggle(400, function() {
355
                                if ($(self).next('.more:visible').length != 0) {
356
                                        $(checkbox).find('span').removeClass('snf-checkbox-unchecked').addClass('snf-checkbox-checked');
357
                                } else {
358
                                        $(checkbox).find('span').removeClass('snf-checkbox-checked').addClass('snf-checkbox-unchecked');
359
                                }
360
                        });
361
                }
362
        });
363

    
364

    
365

    
366
        // reaction a.click
367
        $('.checkbox .check').click(function(e) {
368
                e.stopPropagation();
369
                var self = this;
370
                if ($(this).closest('.checkbox').hasClass('has-more')) {
371
                        console.log('hi');
372
                        $(this).parent().next('.more').stop().slideToggle(400, function() {
373
                                console.log('a2');
374
                                if ($(self).parent().next('.more:visible').length != 0) {
375
                                        $(self).find('span').removeClass('snf-checkbox-unchecked').addClass('snf-checkbox-checked');
376
                                        console.log('a3');
377
                                } else {
378
                                        $(self).find('span').removeClass('snf-checkbox-checked').addClass('snf-checkbox-unchecked');
379
                                }
380
                        });
381
                }
382
        });
383

    
384
        $('.show-add-tag').click(function(e) {
385
                e.preventDefault();
386
                $(this).parents('.tags-area').find('.snf-color-picker').slideDown('slow', function() {
387
                        $('#hide-add-tag-dummy').scrollintoview({
388
                                'duration': 'slow'
389
                        });
390
                });
391
                ui.colorPickerVisible = 1;
392
        });
393

    
394
        $('.hide-add-tag').click(function(e) {
395
                e.preventDefault();
396
                $(this).parents('.tags-area').find('.snf-color-picker').slideUp(400, function() {
397
                        $('.show-add-tag').first().scrollintoview({
398
                                'duration': 'slow'
399
                        });
400
                        ui.colorPickerVisible = 0;
401
                });
402
        });
403

    
404
        /* end of step functions */
405

    
406
        /* navigation and numbers functions */
407
        $('.nav.previous').focus(function(e) {
408
                $(this).addClass('active');
409
        });
410

    
411
        $('.nav.previous').focusout(function(e) {
412
                $(this).removeClass('active');
413

    
414
        });
415

    
416
        $('.sub-menu[data-step=2] li:last').find('a').focusout(function(e) {
417
                $('.step-2').find('.dropdown a:first').focus();
418

    
419
        });
420

    
421
        $('.os .name-col').focus(function(e) {
422
                $(this).parents('li').addClass('hover');
423
        });
424

    
425
        $('.os .name-col').focusout(function(e) {
426
                $(this).parents('li').removeClass('hover');
427
        });
428

    
429

    
430
        /* end of navigation and numbers functions */
431

    
432

    
433
        /* focus and tabs functionality */
434

    
435
        $('a').keyup(function(e) {
436

    
437
                var self = this;
438
                if (e.keyCode == 9 || e.which == 9) {
439
                        if (e.shiftKey) {
440
                        } else {
441
                                //Focus next input
442
                                if ($(self).attr('data-next')) {
443
                                        $(self).focusout(function(e) {
444
                                                var classname = $(self).data('next');
445
                                                $('.' + classname + '').first().focus();
446
                                        });
447
                                }
448
                        }
449
                }
450
        })
451

    
452
        /* end of focus and tabs functionality */
453

    
454
        $('#vm-wizard').find('a').click(function(e) {
455
                e.preventDefault();
456
        });
457
        ui.wizard.current_step = 1;
458
        ui.wizard.btns.previous = $('.bottom').find('.nav.prev');
459
        ui.wizard.btns.next = $('.bottom').find('.nav.next');
460
        ui.wizard.btns.expand_down = $('.adv-main').find('.expand-link');
461
        ui.wizard.btns.close = $('#vm-wizard').find('.close');
462
        ui.wizard.initEvents();
463
        ui.wizard.setMovementTags();
464
        ui.wizard.expandArea();
465
        ui.wizard.btns.close.click(function() {
466
                ui.wizard.close();
467
        });
468
        
469
        $('.os .system-images').show();
470

    
471
        $('#vm-wizard .top .sub-menu[data-step=1] a').click(function() {
472
                ui.wizard.showImageCategory(this);
473
        })
474
});