Revision ff529368

b/snf-cyclades-app/synnefo/ui/new_ui/ui/app/common.js
2 2
* These functions are used throughout ember
3 3
*/
4 4

  
5
_.mixin({
6
  capitalize: function(string) {
7
    return string.charAt(0).toUpperCase() + string.substring(1).toLowerCase();
8
  }
9
});
10

  
11

  
12
em = {};
13

  
5 14

  
6 15

  
7 16

  
......
31 40
        e.preventDefault();
32 41
        $(this).parents(divToCloseClass).slideUp('slow');
33 42
    });
34
}
43
};
35 44

  
36 45

  
37 46
ui.trimChars = function( str, chars) {
......
40 49
    } else {
41 50
        return str;
42 51
    }
43
}
52
};
44 53

  
45 54

  
46 55
/* Sets element min-height
......
52 61
    var actions = $('.actions-bar').height();
53 62
    var h1= WindowHeight - (header+actions);
54 63
    el.css('min-height', h1);
55
}
64
};
56 65

  
57 66
/* Sets element height
58 67
* Used for .details, .lt-bar divs
......
63 72
    var actions = $('.actions-bar').height();
64 73
    var h1= WindowHeight - (header+actions);
65 74
    el.css('height', h1);
66
}
75
};
67 76

  
68 77
/* Sets element max-height
69 78
* Used for div.storage-progress
......
74 83
    var actions = $('.actions-bar').height();
75 84
    var h1= WindowHeight - (header+actions);
76 85
    el.css('max-height', h1);
77
}
86
};
78 87

  
79 88
/* 
80 89
* Logic for Entities actions. Present in items_list pages
......
126 135
            $('.lt-actions li.single a').removeClass('active');
127 136
        }
128 137
    }
129
}
138
};
130 139

  
131 140
ui.inactiveActions = function() {
132 141

  
......
147 156
            var el = '.' + key + ' .' + value;
148 157
            $(el).addClass('inactive');
149 158
        });
150
    })
151
}
159
    });
160
};
152 161

  
153 162
ui.detailsCustom = function(area) {
154 163
    // position last connected item
......
157 166
    var moveY = el.find('.connections >li').last().outerHeight(true) - 2;
158 167
    el.css('top',moveY);
159 168
    el.css('marginTop', -moveY);
160
}
169
};
161 170

  
162 171
ui.firewallSetup = function(){
163 172
    $('.firewall').each(function(){
......
169 178
            $(this).find('p').first().find('em').html('on');
170 179
        }
171 180
    });
172
}
173

  
174

  
175

  
176
/*
177
* In order for the editable value functionality to work, the html markup
178
* should be:
179
    <div class="editable">
180
        <span class="input-txt">editable value</span>
181
        <input type="text">
182
        <a href="#" class="edit">edit</a>
183
        <a href="#" class="save">save</a>
184
        <a href="#" class="cancel">cancel</a>
185
    </div>
186
*/
187
ui.editable = function(){
188

  
189
/*
190
* resetForm hides save and cancel buttons,
191
* text input and shows input-txt. resetForm does not alter
192
* input-txt content.
193
*/
194

  
195
    function resetForm(e, elem) {
196
        var el = elem.parents('.editable');
197
        el.find('input[type="text"]').hide();
198
        el.find('a.cancel, a.save').hide();
199
        el.find('a.edit, .input-txt').show();
200
    }
201

  
202
/* 
203
* showForm hides input-txt, shows save and cancel buttons and
204
* sets input value to input-txt content.
205
*/
206
    function showForm(e,elem) {
207
        e.stopPropagation(); 
208
        e.preventDefault();
209
        var el = elem.parents('.editable'); 
210
        el.find('input[type="text"]').val(el.find('.input-txt').html());
211
        el.find('input[type="text"]').show().focus();
212
        el.find('a.cancel, a.save').show();
213
        elem.hide();
214
        el.find('.input-txt').hide();
215
    }
216

  
217
/*
218
setValue sets input-txt value to the input value.
219
Makes sure that the input value is not empty.
220
TODO:
221
Ajax request to submit form
222
*/
223

  
224
    function setValue(elem) {
225
        var el = elem.parents('.editable');
226
        if( el.find('input[type="text"]').val() ) {
227
            el.find('.input-txt').html(el.find('input[type="text"]').val());
228
        }
229
    }
230

  
231

  
232
    $('.editable .edit').click(function(e){
233
        showForm(e, $(this));
234
    })
235

  
236
    $('.editable .cancel').click(function(e){
237
        e.stopPropagation();
238
        e.preventDefault();
239
        resetForm(e, $(this));
240
    })
241

  
242
    $('.editable .save').click(function(e){
243
        e.stopPropagation();
244
        e.preventDefault();
245
        setValue($(this));
246
        resetForm(e, $(this));
181
};
247 182

  
248
    })
249 183

  
250 184

  
251
    $('.editable input[type="text"]').click(function(e){
252
        e.stopPropagation();
253
    })
254

  
255
    $('.editable input[type="text"]').keyup(function(e){
256
        if(e.keyCode == 13) { 
257
            setValue($(this));
258
            resetForm(e, $(this));
259
            
260
        }
261
    
262
    })
263

  
264
    $('html').click(function(e) {
265
        resetForm(e, $('.editable a.cancel'));
266
    });
267

  
268
}
269 185

  
270 186
/* TODO: better overlay functionality */
271 187
ui.overlay = function() {
......
283 199
        }
284 200
        $(id).find('a').first().focus();
285 201
    });
286
}
202
};
287 203

  
288 204
function goToByScroll(id){
289 205
      // Remove "link" from the ID
......
298 214
// toggle expand arrrow  and  area
299 215
// todo: one function for all the areas we reveal
300 216
ui.expandDownArea = function(arrow_link, area) {
301
    var arrow_link = $(arrow_link);
302
    var area = $(area);
303
            arrow_link.find('span.snf-arrow-up, span.snf-arrow-down').toggleClass('snf-arrow-up snf-arrow-down');
304
            // $('.wizard-content').removeAttr('style');
305
            area.stop().slideToggle(600, function() {
306
                if (area.is(':visible')) {
307
                    arrow_link.find('.snf-arrow-down .snf-arrow-up').removeClass('snf-arrow-down').addClass('snf-arrow-up');
308
                } else {
309
                    arrow_link.find('.snf-arrow-down .snf-arrow-up').addClass('snf-arrow-down');
310
                }
217
    var arrow = $(arrow_link);
218
    arrow.find('span.snf-arrow-up, span.snf-arrow-down').toggleClass('snf-arrow-up snf-arrow-down');
219
    // $('.wizard-content').removeAttr('style');
220
    $(area).stop().slideToggle(600, function() {
221
        if ($(area).is(':visible')) {
222
            arrow.find('.snf-arrow-down .snf-arrow-up').removeClass('snf-arrow-down').addClass('snf-arrow-up');
223
        } else {
224
            arrow.find('.snf-arrow-down .snf-arrow-up').addClass('snf-arrow-down');
225
        }
311 226

  
312
            });
313
}
227
    });
228
};
314 229

  
315 230
// toggle checkbox and area
316 231
ui.slideHiddenArea = function(checkbox_link, area) {
......
322 237
        }
323 238
    });
324 239
};
325
/* Tabs functionality
326
* tabsEl is the div/ul with the links to the sections and the sections that
327
* with toggle have class sectionEl.
328
* Markup needed is an href to each a with the id of the relative section.
329
*/
330 240

  
331
/*ui.tabsSection = function(link, sectionEl) {
332
    sectionEl.hide();
333
    var el = $(link.attr('href'));
334
    el.stop(true, true).show(0);
335
    el.css('opacity',0);
336
    ui.detailsCustom(el);
337
    el.animate({
338
        'opacity':1,
339
    }, 500)
340
}
341

  
342
ui.tabs = function(tabsEl, sectionEl) {
343
    var tabLink = tabsEl.find('a');
344
    ui.replaceClass(tabLink.find('.active'), 'outline', 'full', 'snf-');
345
    function href(a) {
346
        return a.attr('href');
347
    }
348
    tabLink.click(function(e){
349
        e.preventDefault();
350
        if ( $(this).hasClass('active')){
351
             return false;
352
        } else {
353
            window.location.hash = $(this).attr('href');
354
            ui.replaceClass($(this).parents(tabsEl).find('.active'), 'full', 'outline', 'snf-');
355
            $(this).parents(tabsEl).find('a').removeClass('active');
356
            $(this).addClass('active');
357
            ui.replaceClass($(this), 'outline', 'full', 'snf-');
358
            ui.tabsSection( $(this), sectionEl);
359
        }
360
    })
361
}*/
362 241

  
363 242
// the function replaces part of the class of a span that is placed inside an a element
364 243
// the class is a word with the form : firstSubStr+*+str1 and it will be converted to: firstSubStr+*+str2
......
368 247
    $.each($(elements), function() {
369 248
        var classOld = $(this).find('span').attr('class');
370 249
        var classNew;
371
        if(classOld != undefined && classOld.indexOf(str1) != -1) {
250
        if(classOld !== undefined && classOld.indexOf(str1) != -1) {
372 251
            if(classOld.indexOf(' ') == -1) {
373 252
                classNew = classOld.replace(str1, str2);
374 253
                $(this).find('.'+classOld).removeClass(classOld).addClass(classNew);
......
386 265
                // spaces all over the string
387 266
                var spacesExp = new RegExp('\\s+', 'g');
388 267

  
389
                if(classOld.match(expr1) != null) {
268
                if(classOld.match(expr1) !== null) {
390 269
                    classToReplace = classOld.match(expr1);
391 270
                }
392
                else if(classOld.match(expr2) != null) {
271
                else if(classOld.match(expr2) !== null) {
393 272
                    classToReplace = classOld.match(expr2);
394 273
                }
395
                else if (classOld.match(expr3) != null) {
274
                else if (classOld.match(expr3) !== null) {
396 275
                    classToReplace = classOld.match(expr3);
397 276
                }
398 277
                classToReplace = classToReplace.toString().replace(spacesExp,"");
......
401 280
            }
402 281
        }
403 282
    });
404
}
405

  
406
// in a page with tabs, allow navigation with hash tags
407
ui.hashTabs = function(tabsEl, sectionEl){
408
/*    var hash = window.location.hash;
409
    if ($(hash).length<=0){
410
        return;
411
    }
412
    tabsEl.find('a').removeClass('active');
413
    var link = tabsEl.find('a[href="'+hash+'"]');
414
    link.addClass('active');
415
    ui.tabsSection(link, sectionEl);
416
*/
417
}
418

  
419
// in a page with tabs, allow navigation with hash tags
420
ui.hashViews = function(viewsEl, sectionEl){
421
    /*var hash = window.location.hash;
422
    if (!(hash)){
423
        return;
424
    }
425
    var link = viewsEl.find('a[href="'+hash+'"]');
426
    console.log('link', link);
427
    if (link.length<=0){
428
        return;
429
    }
430
    viewsEl.find('a span').removeClass('current');
431
    link.find('span').addClass('current');
432
    sectionEl.removeClass('grid-view list-view');
433
    var sectionClass = hash.slice(1) + '-view';
434
    sectionEl.addClass(sectionClass);*/
435
}
436

  
437

  
438

  
439

  
440
ui.setCustomScrollBar = function() {
441
}
283
};
442 284

  
443 285
function bytesToSize(bytes) {
444 286
    var sizes = [ 'n/a', 'bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
......
464 306
       a_p = "pm";
465 307
    }
466 308

  
467
    if (curr_hour == 0) {
309
    if (curr_hour === 0) {
468 310
       curr_hour = 12;
469 311
    }
470 312
    if (curr_hour > 12){
......
487 329
  };
488 330
  console.log(mimetype);
489 331
  return mimeExt[mimetype] || 'unknown';
490
}
332
};
491 333

  
492 334
$(document).ready(function(){
493 335

  
......
498 340
        }
499 341
    });
500 342

  
501
    if($('.vms.entities').length!=0){
343
    if($('.vms.entities').length!==0){
502 344
        ui.inactiveActions();
503
    };
345
    }
504 346
    ui.setElminHeight($('.main > .details'));
505 347
    ui.setElminHeight($('.lt-bar'));
506 348
    ui.setElmaxHeight($('.storage-progress'));
......
512 354
        } else {
513 355
            $(that).parents('.hd-search').find('input[type="search"]').val('');
514 356
        }
515
    })
357
    });
516 358

  
517 359
    $('.header .login').mouseenter(function(e){
518 360
        $(this).find('ul').stop(true, true).slideDown(200);
......
540 382

  
541 383
    $('.lt-actions a:not(.active)').click(function(e){
542 384
        e.preventDefault();
543
    })
385
    });
544 386

  
545 387
    if ($('.entities .items-list >li').length == 1) {
546 388
        $('.body-wrapper').addClass('no-vm');
547
    };
389
    }
390

  
548 391
    $('.entities li .more').each(function(){
549 392
        var width = $(this).parent('li').outerWidth()  + 20;
550 393
        $(this).css('width', width);
......
570 413
            $(that).find('.more').fadeOut(200, function() {
571 414
                $(this).siblings('.container').fadeIn('fast');
572 415
            });
573
        },50)
416
        },50);
574 417
    });
575 418

  
576 419
    ui.closeDiv($('.info .close'), '.info');
577
    //ui.editable();
420

  
578 421
    ui.overlay();
579 422
    ui.colorPickerVisible = 0;
580 423

  
......
603 446
        $(this).parents('.overlay-area-custom').hide();
604 447
        $(this).parents('.overlay-area-custom').find($('.overlay-div')).hide();
605 448
        $('body').removeClass('with-overlay');
606
    })
449
    });
607 450

  
608 451
    $('.browse-files').click(function(e){
609 452
        e.preventDefault();
......
611 454

  
612 455
    if($('#picker-1').length>0) {
613 456
        $('#picker-1').farbtastic('#color-1');
614
    };
457
    }
615 458
    if($('#picker-2').length>0) {
616 459
        $('#picker-2').farbtastic('#color-2');
617
    };
460
    }
618 461
    if($('#sb-search').length>0) {
619 462
        new UISearch( document.getElementById( 'sb-search' ) );
620 463
    }
......
651 494
    $('[data-status="rebooting"] .btn5.temp').click(function(e) {
652 495
        e.preventDefault();
653 496
        $(this).siblings('.container').find('.snf-pc-full').toggleClass('reboot-progress');
654
    })
497
    });
655 498

  
656 499
    // //temp function to preventDefault of links in modal
657 500
    // $('.reveal-modal a:not(".close-reveal-modal, .generate-key-btn, .import-key-btn")').click(function(e){
......
687 530
    });
688 531

  
689 532
    $('.hide-add-tag').click(function(e) {
690
    e.preventDefault();
691
    $(this).parents('.tags-area, .tags').find('.snf-color-picker').slideUp(400, function() {
692
        $('.show-add-tag').first().scrollintoview({
693
            'duration': 'slow'
533
        e.preventDefault();
534
        $(this).parents('.tags-area, .tags').find('.snf-color-picker').slideUp(400, function() {
535
            $('.show-add-tag').first().scrollintoview({
536
                'duration': 'slow'
537
            });
538
            ui.colorPickerVisible = 0;
694 539
        });
695
        ui.colorPickerVisible = 0;
696
    });
697 540
    });
698 541

  
699 542
    // connected details js
......
710 553
        $(this).css('z-index',1);
711 554
        $(this).find('.more').stop(true, true).slideUp(200);
712 555
    });
713
    //ui.tabs($('.tabs'), $('.content'));
714
    ui.hashTabs($('.tabs'), $('.content'));
715
    ui.hashViews($('.actions-bar .rt-actions'), $('.entities'));
556
    
557

  
716 558

  
717 559
    $('.act').click(function(e) {
718 560
        $(this).addClass('pending last');
......
759 601
    $('.containers .project').mouseleave(function(e){
760 602
        $(this).find('ul').fadeOut();
761 603
        $(this).find('.btn-more').removeClass('clicked');
762
    })
604
    });
763 605

  
764 606
    if ($('.containers .btn-more').length>0) {
765 607
        $('body').click(function(e){
766 608
            $('.btn-more').removeClass('clicked');
767 609
            $('.btn-more').siblings('ul').fadeOut();
768
        })
610
        });
769 611
    }
770 612

  
771 613
    // add a <span> element inside the content of each a.wrap-a element
......
781 623
    $('.side-actions ul.options').mouseleave(function(e){
782 624
        $(this).hide();
783 625
        $(this).siblings('ul').removeAttr('style');
784
    })
626
    });
785 627

  
786
})
628
});
787 629

  
788 630

  
789 631
$(window).resize(function(e){
790 632
    ui.setElminHeight($('.main > .details'));
791 633
    ui.setElminHeight($('.lt-bar'));
792 634
    ui.setElHeight($('.scroll-wrap'));
793
    ui.setCustomScrollBar();
794 635
    ui.setElmaxHeight($('.storage-progress'));
795 636

  
796 637
});
797 638

  
798

  
799
_.mixin({
800
  capitalize: function(string) {
801
    return string.charAt(0).toUpperCase() + string.substring(1).toLowerCase();
802
  }
803
});

Also available in: Unified diff