root / snf-cyclades-app / synnefo / ui / new_ui / ui / javascripts / common.js @ 182f3fe2
History | View | Annotate | Download (8 kB)
1 |
ui = {}; |
---|---|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
ui.closeDiv = function(closeEl, divToCloseClass) { |
8 |
closeEl.click(function(e){
|
9 |
e.preventDefault(); |
10 |
$(this).parents(divToCloseClass).slideUp('slow'); |
11 |
}); |
12 |
} |
13 |
|
14 |
|
15 |
|
16 |
ui.trimChars = function( str, chars) { |
17 |
if ( str.length>chars){
|
18 |
return jQuery.trim(str).substring(0, chars).split(" ").slice(0, -1).join(" ") + "..."; |
19 |
} else {
|
20 |
return str;
|
21 |
} |
22 |
} |
23 |
|
24 |
// set lt-sidebar height
|
25 |
ui.setSidebarHeight = function(){ |
26 |
var WindowHeight = $(window).height(); |
27 |
var h1= WindowHeight - $('.header').outerHeight(); |
28 |
var h2= $('.main.details').outerHeight(); |
29 |
|
30 |
if (h2>h1) {
|
31 |
var ltSidebarHeight = h2;
|
32 |
} else {
|
33 |
var ltSidebarHeight = h1;
|
34 |
} |
35 |
$('.lt-sidebar').height(ltSidebarHeight); |
36 |
} |
37 |
|
38 |
ui.cntCheckbox = function(){ |
39 |
var all = $('.checkbox-checked').length; |
40 |
var running = $('.checkbox-checked').parents('.container').find('.running').length; |
41 |
var stopped = $('.checkbox-checked').parents('.container').find('.stopped').length; |
42 |
$('.header .main-actions li:not(.permanent) a').removeClass('active'); |
43 |
if ( (running*stopped) > 0 ){ |
44 |
$('.header .main-actions li.both a').addClass('active'); |
45 |
$('.header .main-actions li.single a').removeClass('active'); |
46 |
} else {
|
47 |
if (running > 0) { |
48 |
$('.header .main-actions li.both a').addClass('active'); |
49 |
$('.header .main-actions li.running a').addClass('active'); |
50 |
} else if (stopped>0) { |
51 |
$('.header .main-actions li.both a').addClass('active'); |
52 |
$('.header .main-actions li.stopped a').addClass('active'); |
53 |
|
54 |
} else {
|
55 |
|
56 |
} |
57 |
if ( all > 1 ) { |
58 |
$('.header .main-actions li.single a').removeClass('active'); |
59 |
} |
60 |
|
61 |
} |
62 |
} |
63 |
|
64 |
ui.setCheckedVMBgColor = function(){ |
65 |
|
66 |
if ($('.check span').length >0) { |
67 |
$('.more_checkbox .checkbox-checked').parents('.container').addClass('set-bg'); |
68 |
} else {
|
69 |
$('.more_checkbox').parents('.container').removeClass('set-bg'); |
70 |
} |
71 |
|
72 |
} |
73 |
|
74 |
|
75 |
ui.entitiesActionsInit = function(){ |
76 |
|
77 |
// if VM is stopped hide connect option
|
78 |
$('.vms .container .stopped').parents('.container').find('.options .connect').hide(); |
79 |
|
80 |
$('.entities li .container').mouseenter( |
81 |
function (e) {
|
82 |
$(this).find('.img').stop(true, true).fadeOut({ |
83 |
'duration':200, |
84 |
}); |
85 |
$(this).find('.options, .check').stop(true, true).addClass('active'); |
86 |
$(this).find('.options').stop(true, true).fadeIn(500); |
87 |
$(this).stop(true, true).addClass('set-border'); |
88 |
$(this).find('.visible-info em').stop(true, true).each(function(){ |
89 |
var emLeft = $(this).position(); |
90 |
$(this).animate({ |
91 |
left: -emLeft.left,
|
92 |
}, 300);
|
93 |
}) |
94 |
} |
95 |
); |
96 |
|
97 |
$('.entities li .container').mouseleave( |
98 |
function(e){
|
99 |
$(this).stop(true, true).removeClass('set-border'); |
100 |
$(this).find('.options').stop(true, true).fadeOut(200); |
101 |
$(this).find('.img').stop(true, true).fadeIn('slow'); |
102 |
$(this).find('.custom_checkbox:not(.checkbox-checked)').parents('.check').stop(true, true).removeClass('active'); |
103 |
$(this).find('.visible-info em').stop(true, true).each(function(){ |
104 |
$(this).animate({ |
105 |
left: 0, |
106 |
}, 300);
|
107 |
}) |
108 |
} |
109 |
); |
110 |
|
111 |
$('.entities .container .check').click(function(e){ |
112 |
e.preventDefault(); |
113 |
|
114 |
var checkbox = $(this).find('.custom_checkbox'); |
115 |
|
116 |
checkbox.toggleClass('checkbox-checked');
|
117 |
|
118 |
if(checkbox.hasClass('checkbox-checked')){ |
119 |
checkbox.html('b');
|
120 |
$(this).parents('.container').addClass('set-bg'); |
121 |
$(this).addClass('active'); |
122 |
} |
123 |
else{
|
124 |
checkbox.html('a');
|
125 |
$(this).parents('.container').removeClass('set-bg'); |
126 |
|
127 |
|
128 |
} |
129 |
|
130 |
|
131 |
|
132 |
ui.cntCheckbox(); |
133 |
}) |
134 |
|
135 |
} |
136 |
|
137 |
ui.editable = function(){ |
138 |
|
139 |
/*
|
140 |
resetForm hides save and cancel buttons,
|
141 |
text input and shows input-txt. resetForm does not alter
|
142 |
input-txt content.
|
143 |
*/
|
144 |
|
145 |
function resetForm(e, elem) { |
146 |
var el = elem.parents('.editable'); |
147 |
el.find('input[type="text"]').hide();
|
148 |
el.find('a.cancel, a.save').hide();
|
149 |
el.find('a.edit').show();
|
150 |
el.find('.input-txt').show();
|
151 |
} |
152 |
|
153 |
/*
|
154 |
showForm hides input-txt, shows save and cancel buttons and
|
155 |
set input value to input-txt content.
|
156 |
*/
|
157 |
function showForm(e,elem) { |
158 |
e.stopPropagation(); |
159 |
e.preventDefault(); |
160 |
var el = elem.parents('.editable'); |
161 |
el.find('input[type="text"]').val(el.find('.input-txt').html()); |
162 |
el.find('input[type="text"]').show();
|
163 |
el.find('a.cancel, a.save').show();
|
164 |
elem.hide(); |
165 |
el.find('.input-txt').hide();
|
166 |
|
167 |
} |
168 |
|
169 |
/*
|
170 |
setValue sets input-txt value to the input value.
|
171 |
Makes sure that the input value is not empty.
|
172 |
TODO:
|
173 |
Ajax request to submit form
|
174 |
*/
|
175 |
|
176 |
function setValue(elem) { |
177 |
var el = elem.parents('.editable'); |
178 |
if( el.find('input[type="text"]').val() ) { |
179 |
el.find('.input-txt').html(el.find('input[type="text"]').val()); |
180 |
} |
181 |
} |
182 |
|
183 |
|
184 |
$('.editable .edit').click(function(e){ |
185 |
showForm(e, $(this)); |
186 |
}) |
187 |
|
188 |
$('.editable .cancel').click(function(e){ |
189 |
e.stopPropagation(); |
190 |
e.preventDefault(); |
191 |
resetForm(e, $(this)); |
192 |
}) |
193 |
|
194 |
$('.editable .save').click(function(e){ |
195 |
e.stopPropagation(); |
196 |
e.preventDefault(); |
197 |
setValue($(this)); |
198 |
resetForm(e, $(this)); |
199 |
|
200 |
}) |
201 |
|
202 |
|
203 |
$('.editable input[type="text"]').click(function(e){ |
204 |
e.stopPropagation(); |
205 |
}) |
206 |
|
207 |
$('.editable input[type="text"]').keyup(function(e){ |
208 |
if(e.keyCode == 13) { |
209 |
setValue($(this)); |
210 |
resetForm(e, $(this)); |
211 |
|
212 |
} |
213 |
|
214 |
}) |
215 |
|
216 |
$('html').click(function(e) { |
217 |
resetForm(e, $('.editable a.cancel')); |
218 |
}); |
219 |
|
220 |
} |
221 |
|
222 |
ui.overlay = function() { |
223 |
$('[data-overlay-id]').click(function(e){ |
224 |
e.preventDefault(); |
225 |
var el = $(this); |
226 |
|
227 |
// main-actions a need to be active to trigger overlay
|
228 |
if ( (el.parents('.main-actions').find('li a.active').length == 0) && (el.parents('.main-actions').length > 0) ) { |
229 |
return false; |
230 |
} |
231 |
var id = el.data('overlay-id'); |
232 |
$('.overlay-area').show(); |
233 |
$(id).slideDown('slow'); |
234 |
|
235 |
|
236 |
}); |
237 |
|
238 |
|
239 |
} |
240 |
|
241 |
|
242 |
|
243 |
$(document).ready(function(){ |
244 |
|
245 |
|
246 |
ui.closeDiv($('.info .close'), '.info'); |
247 |
ui.closeDiv($('.dummy-navigation .close'), '.dummy-navigation'); |
248 |
|
249 |
$('.dummy-navigation .our').click(function(e){ |
250 |
e.preventDefault(); |
251 |
$('.ours.'+$(this).data('our')).toggle(); |
252 |
$(this).toggleClass('open'); |
253 |
}); |
254 |
|
255 |
ui.setSidebarHeight(); |
256 |
$('.select-os li').click(function(e){ |
257 |
$('.select-os li').removeClass('selected'); |
258 |
$(this).addClass('selected'); |
259 |
}) |
260 |
|
261 |
|
262 |
if ($('.overlay').length >0 ){ |
263 |
$('body').addClass('with-overlay'); |
264 |
} |
265 |
|
266 |
$('.new-btn a.current').click(function(e){ |
267 |
e.preventDefault(); |
268 |
}) |
269 |
|
270 |
ui.entitiesActionsInit(); |
271 |
ui.editable(); |
272 |
ui.overlay(); |
273 |
|
274 |
$('.main-actions li a').click(function(e){ |
275 |
if (!($(this).hasClass('active'))) { |
276 |
e.preventDefault(); |
277 |
} |
278 |
}) |
279 |
$('.scroll-pane').jScrollPane(); |
280 |
|
281 |
|
282 |
|
283 |
|
284 |
|
285 |
$('.main .items-list .title em').each(function(){ |
286 |
$(this).html( ui.trimChars($(this).html(), 22) ); |
287 |
|
288 |
}) |
289 |
|
290 |
$('.main-actions li a').click(function(e){ |
291 |
if (!($(this).hasClass('active'))) { |
292 |
e.preventDefault(); |
293 |
} |
294 |
}) |
295 |
$('.overlay-area .close').click(function(e){ |
296 |
e.preventDefault(); |
297 |
$(this).parents('.overlay-area').hide(); |
298 |
$(this).parents('.overlay-area').find($('[data-overlay-id]')).hide(); |
299 |
}) |
300 |
|
301 |
$('.browse-files').click(function(e){ |
302 |
e.preventDefault(); |
303 |
}) |
304 |
|
305 |
Dropzone.options.myAwesomeDropzone = { |
306 |
dictDefaultMessage:'', |
307 |
clickable: '.browse-files', |
308 |
}; |
309 |
|
310 |
}) |
311 |
|
312 |
|
313 |
$(window).resize(function(e){ |
314 |
ui.setSidebarHeight(); |
315 |
$('.scroll-pane').jScrollPane(); |
316 |
}) |