root / snf-cyclades-app / synnefo / ui / new_ui / ui / javascripts / common.js @ db1f3b94
History | View | Annotate | Download (9 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 |
$('.entities li .details').mouseenter(function (e) { |
135 |
$(this).parents('.container').find('.info-box').show(); |
136 |
}) |
137 |
|
138 |
$('.entities li .details').mouseleave(function (e) { |
139 |
$(this).parents('.container').find('.info-box').hide(); |
140 |
}) |
141 |
$('.entities li .container').mouseleave( |
142 |
function(e){
|
143 |
$(this).stop(true, true).removeClass('set-border'); |
144 |
$(this).find('.options').stop(true, true).fadeOut(200); |
145 |
$(this).find('.img').stop(true, true).fadeIn('slow'); |
146 |
$(this).find('.custom_checkbox:not(.checkbox-checked)').parents('.check').stop(true, true).removeClass('active'); |
147 |
$(this).find('.visible-info em').stop(true, true).each(function(){ |
148 |
$(this).animate({ |
149 |
left: 0, |
150 |
}, 300);
|
151 |
}) |
152 |
} |
153 |
); |
154 |
|
155 |
} |
156 |
|
157 |
ui.editable = function(){ |
158 |
|
159 |
/*
|
160 |
resetForm hides save and cancel buttons,
|
161 |
text input and shows input-txt. resetForm does not alter
|
162 |
input-txt content.
|
163 |
*/
|
164 |
|
165 |
function resetForm(e, elem) { |
166 |
var el = elem.parents('.editable'); |
167 |
el.find('input[type="text"]').hide();
|
168 |
el.find('a.cancel, a.save').hide();
|
169 |
el.find('a.edit').show();
|
170 |
el.find('.input-txt').show();
|
171 |
} |
172 |
|
173 |
/*
|
174 |
showForm hides input-txt, shows save and cancel buttons and
|
175 |
set input value to input-txt content.
|
176 |
*/
|
177 |
function showForm(e,elem) { |
178 |
e.stopPropagation(); |
179 |
e.preventDefault(); |
180 |
var el = elem.parents('.editable'); |
181 |
el.find('input[type="text"]').val(el.find('.input-txt').html()); |
182 |
el.find('input[type="text"]').show();
|
183 |
el.find('a.cancel, a.save').show();
|
184 |
elem.hide(); |
185 |
el.find('.input-txt').hide();
|
186 |
|
187 |
} |
188 |
|
189 |
/*
|
190 |
setValue sets input-txt value to the input value.
|
191 |
Makes sure that the input value is not empty.
|
192 |
TODO:
|
193 |
Ajax request to submit form
|
194 |
*/
|
195 |
|
196 |
function setValue(elem) { |
197 |
var el = elem.parents('.editable'); |
198 |
if( el.find('input[type="text"]').val() ) { |
199 |
el.find('.input-txt').html(el.find('input[type="text"]').val()); |
200 |
} |
201 |
} |
202 |
|
203 |
|
204 |
$('.editable .edit').click(function(e){ |
205 |
showForm(e, $(this)); |
206 |
}) |
207 |
|
208 |
$('.editable .cancel').click(function(e){ |
209 |
e.stopPropagation(); |
210 |
e.preventDefault(); |
211 |
resetForm(e, $(this)); |
212 |
}) |
213 |
|
214 |
$('.editable .save').click(function(e){ |
215 |
e.stopPropagation(); |
216 |
e.preventDefault(); |
217 |
setValue($(this)); |
218 |
resetForm(e, $(this)); |
219 |
|
220 |
}) |
221 |
|
222 |
|
223 |
$('.editable input[type="text"]').click(function(e){ |
224 |
e.stopPropagation(); |
225 |
}) |
226 |
|
227 |
$('.editable input[type="text"]').keyup(function(e){ |
228 |
if(e.keyCode == 13) { |
229 |
setValue($(this)); |
230 |
resetForm(e, $(this)); |
231 |
|
232 |
} |
233 |
|
234 |
}) |
235 |
|
236 |
$('html').click(function(e) { |
237 |
resetForm(e, $('.editable a.cancel')); |
238 |
}); |
239 |
|
240 |
} |
241 |
|
242 |
ui.overlay = function() { |
243 |
$('[data-overlay-id]').click(function(e){ |
244 |
e.preventDefault(); |
245 |
var el = $(this); |
246 |
|
247 |
// main-actions a need to be active to trigger overlay
|
248 |
if ( (el.parents('.main-actions').find('li a.active').length == 0) && (el.parents('.main-actions').length > 0) ) { |
249 |
return false; |
250 |
} |
251 |
var id = el.data('overlay-id'); |
252 |
$('.overlay-area').show(); |
253 |
$(id).slideDown('slow'); |
254 |
|
255 |
|
256 |
}); |
257 |
|
258 |
|
259 |
} |
260 |
|
261 |
|
262 |
|
263 |
$(document).ready(function(){ |
264 |
|
265 |
|
266 |
ui.closeDiv($('.info .close'), '.info'); |
267 |
ui.closeDiv($('.dummy-navigation .close'), '.dummy-navigation'); |
268 |
|
269 |
$('.dummy-navigation .our').click(function(e){ |
270 |
e.preventDefault(); |
271 |
$('.ours.'+$(this).data('our')).toggle(); |
272 |
$(this).toggleClass('open'); |
273 |
}); |
274 |
|
275 |
ui.setSidebarHeight(); |
276 |
$('.select-os li').click(function(e){ |
277 |
$('.select-os li').removeClass('selected'); |
278 |
$(this).addClass('selected'); |
279 |
}) |
280 |
|
281 |
|
282 |
if ($('.overlay').length >0 ){ |
283 |
$('body').addClass('with-overlay'); |
284 |
} |
285 |
|
286 |
$('.new-btn a.current').click(function(e){ |
287 |
e.preventDefault(); |
288 |
}) |
289 |
|
290 |
ui.entitiesActionsInit(); |
291 |
ui.editable(); |
292 |
ui.overlay(); |
293 |
|
294 |
$('.main-actions li a').click(function(e){ |
295 |
if (!($(this).hasClass('active'))) { |
296 |
e.preventDefault(); |
297 |
} |
298 |
}) |
299 |
$('.scroll-pane').jScrollPane(); |
300 |
|
301 |
|
302 |
|
303 |
|
304 |
|
305 |
$('.main .items-list .title em').each(function(){ |
306 |
$(this).html( ui.trimChars($(this).html(), 22) ); |
307 |
|
308 |
}) |
309 |
|
310 |
$('.main-actions li a').click(function(e){ |
311 |
if (!($(this).hasClass('active'))) { |
312 |
e.preventDefault(); |
313 |
} |
314 |
}) |
315 |
$('.overlay-area .close').click(function(e){ |
316 |
e.preventDefault(); |
317 |
$(this).parents('.overlay-area').hide(); |
318 |
$(this).parents('.overlay-area').find($('[data-overlay-id]')).hide(); |
319 |
}) |
320 |
|
321 |
$('.browse-files').click(function(e){ |
322 |
e.preventDefault(); |
323 |
}) |
324 |
|
325 |
Dropzone.options.filesDropzone = { |
326 |
dictDefaultMessage:'', |
327 |
clickable: '.browse-files', |
328 |
previewsContainer: '.dropzone-files', |
329 |
createImageThumbnails: false, |
330 |
dictRemoveFile: "snf-Remove file", |
331 |
}; |
332 |
|
333 |
}) |
334 |
|
335 |
|
336 |
$(window).resize(function(e){ |
337 |
ui.setSidebarHeight(); |
338 |
$('.scroll-pane').jScrollPane(); |
339 |
}) |