Revision 5acf3fcf

b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js
1
ui = {};
1
/*
2
* Various functions that will be used throughout all templates
3
* are inside ui Object
4
*/
2 5

  
6
ui = {};
3 7

  
8
/* when closeEl el is clicked, its parent with class divToCloseClass slidesUp */
4 9
ui.closeDiv = function(closeEl, divToCloseClass) {
5 10
    closeEl.click(function(e){
6 11
        e.preventDefault();
......
9 14
}
10 15

  
11 16

  
12

  
13 17
ui.trimChars = function( str, chars) {
14 18
    if ( str.length>chars){
15
        return jQuery.trim(str).substring(0, chars).split(" ").slice(0, -1).join(" ") + "...";
19
        return $.trim(str).substring(0, chars)+ "...";
16 20
    } else {
17 21
        return str;
18 22
    }
19 23
}
20 24

  
21
// set lt-sidebar height 
25
/* sets lt-sidebar height. Useful for jscrollpane scrollbar */
22 26
ui.setSidebarHeight = function(){
23 27
    var WindowHeight = $(window).height();
24 28
    var h1= WindowHeight - $('.header').outerHeight();
25
    var h2= $('.main.details').outerHeight();
26
    
27
    if (h2>h1) {
28
        var ltSidebarHeight = h2;
29
    } else {
30
        var ltSidebarHeight = h1;
31
    }
32
    $('.lt-sidebar').height(ltSidebarHeight);
29
    var h2= $('.main').outerHeight();
30
    $('.lt-sidebar').height((h2>h1) ? h2 : h1);
33 31
}
34 32

  
35
ui.cntCheckbox = function(){ 
33

  
34
/* 
35
* Logic for Entities actions. Present in items_list pages
36
* Available categories are :
37
*  - both/single ( for multiple entities/single entities)
38
*  - running/stopped ( for running/stopped entities)
39
*  - permanent ( for entities always active )
40
*/
41
ui.entitiesActionsEnabled = function(){
36 42
    var all = $('.snf-checkbox-checked').length;
37 43
    var running = $('.snf-checkbox-checked').parents('.container').find('.running').length;
38 44
    var stopped = $('.snf-checkbox-checked').parents('.container').find('.stopped').length;
......
47 53
        } else if (stopped>0) {
48 54
            $('.header .main-actions li.both a').addClass('active');   
49 55
            $('.header .main-actions li.stopped a').addClass('active');   
50

  
51
        } else {
52

  
53 56
        }
54 57
        if ( all > 1 ) {
55 58
            $('.header .main-actions li.single a').removeClass('active');   
56 59
        }
57

  
58 60
    }
59 61
}
60 62

  
61
ui.setCheckedVMBgColor = function(){
62

  
63
    if ($('.check span').length >0) {
64
        $('.more_checkbox .checkbox-checked').parents('.container').addClass('set-bg');
65
    } else {
66
        $('.more_checkbox').parents('.container').removeClass('set-bg');    
67
    }
68

  
69
}
70

  
71

  
72 63
ui.entitiesActionsInit = function(){
73 64

  
74
    // if VM is stopped hide connect option 
75
    $('.vms .container .stopped').parents('.container').find('.options .connect').hide();
76
    
77
    $('.entities li .container').mouseenter(
78
      function (e) {
79
        $(this).find('.options, .check').stop(true, true).addClass('active');
80
        $(this).find('.options').stop(true, true).fadeIn(500); 
81
        $(this).stop(true, true).addClass('set-border');
82
      }
83
    );
84

  
85 65
    $('.entities li .container').mouseleave(
86 66
        function(e){
87
            $(this).stop(true, true).removeClass('set-border');
88
            $(this).find('.options').stop(true, true).fadeOut(200); 
89
            $(this).find('.snf-checkbox-unchecked').parents('.check').stop(true, true).removeClass('active');
67
            $(this).find('.snf-checkbox-unchecked').parents('.check').removeClass('active');
90 68
         }
91 69
    );
92 70

  
93 71
    $('.entities .container .check').click(function(e){
94 72
        e.preventDefault();
95

  
96 73
        var checkbox = $(this).find('.snf-checkbox-unchecked, .snf-checkbox-checked');
97

  
98 74
        checkbox.toggleClass('snf-checkbox-unchecked');
99 75
        checkbox.toggleClass('snf-checkbox-checked');
100 76
        
......
104 80
        }
105 81
        else{
106 82
            $(this).parents('.container').removeClass('set-bg');
107
            
108
      
109 83
        }
110

  
111
        
112

  
113
        ui.cntCheckbox();
84
        ui.entitiesActionsEnabled();
114 85
    })
115
    $('.entities li .details').mouseenter(function (e) {
116
        $(this).parents('.container').find('.info-box').show();
117
    }) 
118
      
119
    $('.entities li .details').mouseleave(function (e) {
120
        $(this).parents('.container').find('.info-box').hide();
121
    })   
122
    $('.entities li .container').mouseleave(
123
        function(e){
124
            $(this).stop(true, true).removeClass('set-border');
125
            $(this).find('.options').stop(true, true).fadeOut(200); 
126
            $(this).find('.img').stop(true, true).fadeIn('slow');
127
            $(this).find('.snf-checkbox-unchecked').parents('.check').stop(true, true).removeClass('active');
128
            $(this).find('.visible-info em').stop(true, true).each(function(){
129
                $(this).animate({
130
                 left: 0,
131
                }, 300);        
132
            }) 
133
         }
134
    );
135 86
   
136 87
}
137 88

  
89
/*
90
* In order for the editable value functionality to work, the html markup
91
* should be:
92
    <div class="editable">
93
        <span class="input-txt">editable value</span>
94
        <input type="text">
95
        <a href="#" class="edit">edit</a>
96
        <a href="#" class="save">save</a>
97
        <a href="#" class="cancel">cancel</a>
98
    </div>
99
*/
138 100
ui.editable = function(){
139 101

  
140 102
/*
141
resetForm hides save and cancel buttons, 
142
text input and shows input-txt. resetForm does not alter 
143
input-txt content.
103
* resetForm hides save and cancel buttons,
104
* text input and shows input-txt. resetForm does not alter
105
* input-txt content.
144 106
*/
145 107

  
146 108
    function resetForm(e, elem) {
147 109
        var el = elem.parents('.editable');
148 110
        el.find('input[type="text"]').hide();
149 111
        el.find('a.cancel, a.save').hide();
150
        el.find('a.edit').show();
151
        el.find('.input-txt').show();
112
        el.find('a.edit, .input-txt').show();
152 113
    }
153 114

  
154 115
/* 
155
showForm hides input-txt, shows save and cancel buttons and
156
set input value to input-txt content.
116
* showForm hides input-txt, shows save and cancel buttons and
117
* sets input value to input-txt content.
157 118
*/
158 119
    function showForm(e,elem) {
159 120
        e.stopPropagation(); 
......
220 181

  
221 182
}
222 183

  
184
/* TODO: better overlay functionality */
223 185
ui.overlay = function() {
224 186
    $('[data-overlay-id]').click(function(e){
225 187
        e.preventDefault();
226 188
        var el = $(this);
227

  
228 189
        // main-actions a need to be active to trigger overlay
229 190
        if ( (el.parents('.main-actions').find('li a.active').length == 0) && (el.parents('.main-actions').length > 0) ) {
230 191
            return false;
......
232 193
        var id = el.data('overlay-id');
233 194
        $('.overlay-area').show();
234 195
        $(id).slideDown('slow');
235

  
236

  
237 196
    });
238 197

  
239 198

  
......
329 288

  
330 289
$(document).ready(function(){
331 290

  
332

  
291
    ui.setSidebarHeight();
333 292
    ui.closeDiv($('.info .close'), '.info');
334
    ui.closeDiv($('.dummy-navigation .close'), '.dummy-navigation');
293
    ui.entitiesActionsInit();
294
    ui.editable();
295
    ui.overlay();
335 296

  
336
    $('.dummy-navigation .our').click(function(e){
337
        e.preventDefault();
338
        $('.ours.'+$(this).data('our')).toggle();
339
        $(this).toggleClass('open');
340
    });
341 297

  
342
    ui.setSidebarHeight();
343 298
    $('.select-os li').click(function(e){
344 299
        $('.select-os li').removeClass('selected');
345 300
        $(this).addClass('selected');
......
354 309
        e.preventDefault();
355 310
    })
356 311

  
357
    ui.entitiesActionsInit();
358
    ui.editable();
359
    ui.overlay();
360

  
361 312
    $('.main-actions li a').click(function(e){
362 313
        if (!($(this).hasClass('active'))) {
363 314
            e.preventDefault();
......
365 316
    })
366 317
    $('.scroll-pane').jScrollPane();
367 318

  
368

  
369

  
370

  
371

  
372 319
    $('.main .items-list .title em').each(function(){
373
        $(this).html( ui.trimChars($(this).html(), 22) );
320
        $(this).html( ui.trimChars($(this).html(), 20) );
374 321

  
375 322
    })
376 323

  

Also available in: Unified diff