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