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