Revision ff529368
b/snf-cyclades-app/synnefo/ui/new_ui/ui/app/common.js | ||
---|---|---|
2 | 2 |
* These functions are used throughout ember |
3 | 3 |
*/ |
4 | 4 |
|
5 |
_.mixin({ |
|
6 |
capitalize: function(string) { |
|
7 |
return string.charAt(0).toUpperCase() + string.substring(1).toLowerCase(); |
|
8 |
} |
|
9 |
}); |
|
10 |
|
|
11 |
|
|
12 |
em = {}; |
|
13 |
|
|
5 | 14 |
|
6 | 15 |
|
7 | 16 |
|
... | ... | |
31 | 40 |
e.preventDefault(); |
32 | 41 |
$(this).parents(divToCloseClass).slideUp('slow'); |
33 | 42 |
}); |
34 |
} |
|
43 |
};
|
|
35 | 44 |
|
36 | 45 |
|
37 | 46 |
ui.trimChars = function( str, chars) { |
... | ... | |
40 | 49 |
} else { |
41 | 50 |
return str; |
42 | 51 |
} |
43 |
} |
|
52 |
};
|
|
44 | 53 |
|
45 | 54 |
|
46 | 55 |
/* Sets element min-height |
... | ... | |
52 | 61 |
var actions = $('.actions-bar').height(); |
53 | 62 |
var h1= WindowHeight - (header+actions); |
54 | 63 |
el.css('min-height', h1); |
55 |
} |
|
64 |
};
|
|
56 | 65 |
|
57 | 66 |
/* Sets element height |
58 | 67 |
* Used for .details, .lt-bar divs |
... | ... | |
63 | 72 |
var actions = $('.actions-bar').height(); |
64 | 73 |
var h1= WindowHeight - (header+actions); |
65 | 74 |
el.css('height', h1); |
66 |
} |
|
75 |
};
|
|
67 | 76 |
|
68 | 77 |
/* Sets element max-height |
69 | 78 |
* Used for div.storage-progress |
... | ... | |
74 | 83 |
var actions = $('.actions-bar').height(); |
75 | 84 |
var h1= WindowHeight - (header+actions); |
76 | 85 |
el.css('max-height', h1); |
77 |
} |
|
86 |
};
|
|
78 | 87 |
|
79 | 88 |
/* |
80 | 89 |
* Logic for Entities actions. Present in items_list pages |
... | ... | |
126 | 135 |
$('.lt-actions li.single a').removeClass('active'); |
127 | 136 |
} |
128 | 137 |
} |
129 |
} |
|
138 |
};
|
|
130 | 139 |
|
131 | 140 |
ui.inactiveActions = function() { |
132 | 141 |
|
... | ... | |
147 | 156 |
var el = '.' + key + ' .' + value; |
148 | 157 |
$(el).addClass('inactive'); |
149 | 158 |
}); |
150 |
}) |
|
151 |
} |
|
159 |
});
|
|
160 |
};
|
|
152 | 161 |
|
153 | 162 |
ui.detailsCustom = function(area) { |
154 | 163 |
// position last connected item |
... | ... | |
157 | 166 |
var moveY = el.find('.connections >li').last().outerHeight(true) - 2; |
158 | 167 |
el.css('top',moveY); |
159 | 168 |
el.css('marginTop', -moveY); |
160 |
} |
|
169 |
};
|
|
161 | 170 |
|
162 | 171 |
ui.firewallSetup = function(){ |
163 | 172 |
$('.firewall').each(function(){ |
... | ... | |
169 | 178 |
$(this).find('p').first().find('em').html('on'); |
170 | 179 |
} |
171 | 180 |
}); |
172 |
} |
|
173 |
|
|
174 |
|
|
175 |
|
|
176 |
/* |
|
177 |
* In order for the editable value functionality to work, the html markup |
|
178 |
* should be: |
|
179 |
<div class="editable"> |
|
180 |
<span class="input-txt">editable value</span> |
|
181 |
<input type="text"> |
|
182 |
<a href="#" class="edit">edit</a> |
|
183 |
<a href="#" class="save">save</a> |
|
184 |
<a href="#" class="cancel">cancel</a> |
|
185 |
</div> |
|
186 |
*/ |
|
187 |
ui.editable = function(){ |
|
188 |
|
|
189 |
/* |
|
190 |
* resetForm hides save and cancel buttons, |
|
191 |
* text input and shows input-txt. resetForm does not alter |
|
192 |
* input-txt content. |
|
193 |
*/ |
|
194 |
|
|
195 |
function resetForm(e, elem) { |
|
196 |
var el = elem.parents('.editable'); |
|
197 |
el.find('input[type="text"]').hide(); |
|
198 |
el.find('a.cancel, a.save').hide(); |
|
199 |
el.find('a.edit, .input-txt').show(); |
|
200 |
} |
|
201 |
|
|
202 |
/* |
|
203 |
* showForm hides input-txt, shows save and cancel buttons and |
|
204 |
* sets input value to input-txt content. |
|
205 |
*/ |
|
206 |
function showForm(e,elem) { |
|
207 |
e.stopPropagation(); |
|
208 |
e.preventDefault(); |
|
209 |
var el = elem.parents('.editable'); |
|
210 |
el.find('input[type="text"]').val(el.find('.input-txt').html()); |
|
211 |
el.find('input[type="text"]').show().focus(); |
|
212 |
el.find('a.cancel, a.save').show(); |
|
213 |
elem.hide(); |
|
214 |
el.find('.input-txt').hide(); |
|
215 |
} |
|
216 |
|
|
217 |
/* |
|
218 |
setValue sets input-txt value to the input value. |
|
219 |
Makes sure that the input value is not empty. |
|
220 |
TODO: |
|
221 |
Ajax request to submit form |
|
222 |
*/ |
|
223 |
|
|
224 |
function setValue(elem) { |
|
225 |
var el = elem.parents('.editable'); |
|
226 |
if( el.find('input[type="text"]').val() ) { |
|
227 |
el.find('.input-txt').html(el.find('input[type="text"]').val()); |
|
228 |
} |
|
229 |
} |
|
230 |
|
|
231 |
|
|
232 |
$('.editable .edit').click(function(e){ |
|
233 |
showForm(e, $(this)); |
|
234 |
}) |
|
235 |
|
|
236 |
$('.editable .cancel').click(function(e){ |
|
237 |
e.stopPropagation(); |
|
238 |
e.preventDefault(); |
|
239 |
resetForm(e, $(this)); |
|
240 |
}) |
|
241 |
|
|
242 |
$('.editable .save').click(function(e){ |
|
243 |
e.stopPropagation(); |
|
244 |
e.preventDefault(); |
|
245 |
setValue($(this)); |
|
246 |
resetForm(e, $(this)); |
|
181 |
}; |
|
247 | 182 |
|
248 |
}) |
|
249 | 183 |
|
250 | 184 |
|
251 |
$('.editable input[type="text"]').click(function(e){ |
|
252 |
e.stopPropagation(); |
|
253 |
}) |
|
254 |
|
|
255 |
$('.editable input[type="text"]').keyup(function(e){ |
|
256 |
if(e.keyCode == 13) { |
|
257 |
setValue($(this)); |
|
258 |
resetForm(e, $(this)); |
|
259 |
|
|
260 |
} |
|
261 |
|
|
262 |
}) |
|
263 |
|
|
264 |
$('html').click(function(e) { |
|
265 |
resetForm(e, $('.editable a.cancel')); |
|
266 |
}); |
|
267 |
|
|
268 |
} |
|
269 | 185 |
|
270 | 186 |
/* TODO: better overlay functionality */ |
271 | 187 |
ui.overlay = function() { |
... | ... | |
283 | 199 |
} |
284 | 200 |
$(id).find('a').first().focus(); |
285 | 201 |
}); |
286 |
} |
|
202 |
};
|
|
287 | 203 |
|
288 | 204 |
function goToByScroll(id){ |
289 | 205 |
// Remove "link" from the ID |
... | ... | |
298 | 214 |
// toggle expand arrrow and area |
299 | 215 |
// todo: one function for all the areas we reveal |
300 | 216 |
ui.expandDownArea = function(arrow_link, area) { |
301 |
var arrow_link = $(arrow_link); |
|
302 |
var area = $(area); |
|
303 |
arrow_link.find('span.snf-arrow-up, span.snf-arrow-down').toggleClass('snf-arrow-up snf-arrow-down'); |
|
304 |
// $('.wizard-content').removeAttr('style'); |
|
305 |
area.stop().slideToggle(600, function() { |
|
306 |
if (area.is(':visible')) { |
|
307 |
arrow_link.find('.snf-arrow-down .snf-arrow-up').removeClass('snf-arrow-down').addClass('snf-arrow-up'); |
|
308 |
} else { |
|
309 |
arrow_link.find('.snf-arrow-down .snf-arrow-up').addClass('snf-arrow-down'); |
|
310 |
} |
|
217 |
var arrow = $(arrow_link); |
|
218 |
arrow.find('span.snf-arrow-up, span.snf-arrow-down').toggleClass('snf-arrow-up snf-arrow-down'); |
|
219 |
// $('.wizard-content').removeAttr('style'); |
|
220 |
$(area).stop().slideToggle(600, function() { |
|
221 |
if ($(area).is(':visible')) { |
|
222 |
arrow.find('.snf-arrow-down .snf-arrow-up').removeClass('snf-arrow-down').addClass('snf-arrow-up'); |
|
223 |
} else { |
|
224 |
arrow.find('.snf-arrow-down .snf-arrow-up').addClass('snf-arrow-down'); |
|
225 |
} |
|
311 | 226 |
|
312 |
});
|
|
313 |
} |
|
227 |
}); |
|
228 |
};
|
|
314 | 229 |
|
315 | 230 |
// toggle checkbox and area |
316 | 231 |
ui.slideHiddenArea = function(checkbox_link, area) { |
... | ... | |
322 | 237 |
} |
323 | 238 |
}); |
324 | 239 |
}; |
325 |
/* Tabs functionality |
|
326 |
* tabsEl is the div/ul with the links to the sections and the sections that |
|
327 |
* with toggle have class sectionEl. |
|
328 |
* Markup needed is an href to each a with the id of the relative section. |
|
329 |
*/ |
|
330 | 240 |
|
331 |
/*ui.tabsSection = function(link, sectionEl) { |
|
332 |
sectionEl.hide(); |
|
333 |
var el = $(link.attr('href')); |
|
334 |
el.stop(true, true).show(0); |
|
335 |
el.css('opacity',0); |
|
336 |
ui.detailsCustom(el); |
|
337 |
el.animate({ |
|
338 |
'opacity':1, |
|
339 |
}, 500) |
|
340 |
} |
|
341 |
|
|
342 |
ui.tabs = function(tabsEl, sectionEl) { |
|
343 |
var tabLink = tabsEl.find('a'); |
|
344 |
ui.replaceClass(tabLink.find('.active'), 'outline', 'full', 'snf-'); |
|
345 |
function href(a) { |
|
346 |
return a.attr('href'); |
|
347 |
} |
|
348 |
tabLink.click(function(e){ |
|
349 |
e.preventDefault(); |
|
350 |
if ( $(this).hasClass('active')){ |
|
351 |
return false; |
|
352 |
} else { |
|
353 |
window.location.hash = $(this).attr('href'); |
|
354 |
ui.replaceClass($(this).parents(tabsEl).find('.active'), 'full', 'outline', 'snf-'); |
|
355 |
$(this).parents(tabsEl).find('a').removeClass('active'); |
|
356 |
$(this).addClass('active'); |
|
357 |
ui.replaceClass($(this), 'outline', 'full', 'snf-'); |
|
358 |
ui.tabsSection( $(this), sectionEl); |
|
359 |
} |
|
360 |
}) |
|
361 |
}*/ |
|
362 | 241 |
|
363 | 242 |
// the function replaces part of the class of a span that is placed inside an a element |
364 | 243 |
// the class is a word with the form : firstSubStr+*+str1 and it will be converted to: firstSubStr+*+str2 |
... | ... | |
368 | 247 |
$.each($(elements), function() { |
369 | 248 |
var classOld = $(this).find('span').attr('class'); |
370 | 249 |
var classNew; |
371 |
if(classOld != undefined && classOld.indexOf(str1) != -1) { |
|
250 |
if(classOld !== undefined && classOld.indexOf(str1) != -1) {
|
|
372 | 251 |
if(classOld.indexOf(' ') == -1) { |
373 | 252 |
classNew = classOld.replace(str1, str2); |
374 | 253 |
$(this).find('.'+classOld).removeClass(classOld).addClass(classNew); |
... | ... | |
386 | 265 |
// spaces all over the string |
387 | 266 |
var spacesExp = new RegExp('\\s+', 'g'); |
388 | 267 |
|
389 |
if(classOld.match(expr1) != null) { |
|
268 |
if(classOld.match(expr1) !== null) {
|
|
390 | 269 |
classToReplace = classOld.match(expr1); |
391 | 270 |
} |
392 |
else if(classOld.match(expr2) != null) { |
|
271 |
else if(classOld.match(expr2) !== null) {
|
|
393 | 272 |
classToReplace = classOld.match(expr2); |
394 | 273 |
} |
395 |
else if (classOld.match(expr3) != null) { |
|
274 |
else if (classOld.match(expr3) !== null) {
|
|
396 | 275 |
classToReplace = classOld.match(expr3); |
397 | 276 |
} |
398 | 277 |
classToReplace = classToReplace.toString().replace(spacesExp,""); |
... | ... | |
401 | 280 |
} |
402 | 281 |
} |
403 | 282 |
}); |
404 |
} |
|
405 |
|
|
406 |
// in a page with tabs, allow navigation with hash tags |
|
407 |
ui.hashTabs = function(tabsEl, sectionEl){ |
|
408 |
/* var hash = window.location.hash; |
|
409 |
if ($(hash).length<=0){ |
|
410 |
return; |
|
411 |
} |
|
412 |
tabsEl.find('a').removeClass('active'); |
|
413 |
var link = tabsEl.find('a[href="'+hash+'"]'); |
|
414 |
link.addClass('active'); |
|
415 |
ui.tabsSection(link, sectionEl); |
|
416 |
*/ |
|
417 |
} |
|
418 |
|
|
419 |
// in a page with tabs, allow navigation with hash tags |
|
420 |
ui.hashViews = function(viewsEl, sectionEl){ |
|
421 |
/*var hash = window.location.hash; |
|
422 |
if (!(hash)){ |
|
423 |
return; |
|
424 |
} |
|
425 |
var link = viewsEl.find('a[href="'+hash+'"]'); |
|
426 |
console.log('link', link); |
|
427 |
if (link.length<=0){ |
|
428 |
return; |
|
429 |
} |
|
430 |
viewsEl.find('a span').removeClass('current'); |
|
431 |
link.find('span').addClass('current'); |
|
432 |
sectionEl.removeClass('grid-view list-view'); |
|
433 |
var sectionClass = hash.slice(1) + '-view'; |
|
434 |
sectionEl.addClass(sectionClass);*/ |
|
435 |
} |
|
436 |
|
|
437 |
|
|
438 |
|
|
439 |
|
|
440 |
ui.setCustomScrollBar = function() { |
|
441 |
} |
|
283 |
}; |
|
442 | 284 |
|
443 | 285 |
function bytesToSize(bytes) { |
444 | 286 |
var sizes = [ 'n/a', 'bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; |
... | ... | |
464 | 306 |
a_p = "pm"; |
465 | 307 |
} |
466 | 308 |
|
467 |
if (curr_hour == 0) { |
|
309 |
if (curr_hour === 0) {
|
|
468 | 310 |
curr_hour = 12; |
469 | 311 |
} |
470 | 312 |
if (curr_hour > 12){ |
... | ... | |
487 | 329 |
}; |
488 | 330 |
console.log(mimetype); |
489 | 331 |
return mimeExt[mimetype] || 'unknown'; |
490 |
} |
|
332 |
};
|
|
491 | 333 |
|
492 | 334 |
$(document).ready(function(){ |
493 | 335 |
|
... | ... | |
498 | 340 |
} |
499 | 341 |
}); |
500 | 342 |
|
501 |
if($('.vms.entities').length!=0){ |
|
343 |
if($('.vms.entities').length!==0){
|
|
502 | 344 |
ui.inactiveActions(); |
503 |
};
|
|
345 |
} |
|
504 | 346 |
ui.setElminHeight($('.main > .details')); |
505 | 347 |
ui.setElminHeight($('.lt-bar')); |
506 | 348 |
ui.setElmaxHeight($('.storage-progress')); |
... | ... | |
512 | 354 |
} else { |
513 | 355 |
$(that).parents('.hd-search').find('input[type="search"]').val(''); |
514 | 356 |
} |
515 |
}) |
|
357 |
});
|
|
516 | 358 |
|
517 | 359 |
$('.header .login').mouseenter(function(e){ |
518 | 360 |
$(this).find('ul').stop(true, true).slideDown(200); |
... | ... | |
540 | 382 |
|
541 | 383 |
$('.lt-actions a:not(.active)').click(function(e){ |
542 | 384 |
e.preventDefault(); |
543 |
}) |
|
385 |
});
|
|
544 | 386 |
|
545 | 387 |
if ($('.entities .items-list >li').length == 1) { |
546 | 388 |
$('.body-wrapper').addClass('no-vm'); |
547 |
}; |
|
389 |
} |
|
390 |
|
|
548 | 391 |
$('.entities li .more').each(function(){ |
549 | 392 |
var width = $(this).parent('li').outerWidth() + 20; |
550 | 393 |
$(this).css('width', width); |
... | ... | |
570 | 413 |
$(that).find('.more').fadeOut(200, function() { |
571 | 414 |
$(this).siblings('.container').fadeIn('fast'); |
572 | 415 |
}); |
573 |
},50) |
|
416 |
},50);
|
|
574 | 417 |
}); |
575 | 418 |
|
576 | 419 |
ui.closeDiv($('.info .close'), '.info'); |
577 |
//ui.editable(); |
|
420 |
|
|
578 | 421 |
ui.overlay(); |
579 | 422 |
ui.colorPickerVisible = 0; |
580 | 423 |
|
... | ... | |
603 | 446 |
$(this).parents('.overlay-area-custom').hide(); |
604 | 447 |
$(this).parents('.overlay-area-custom').find($('.overlay-div')).hide(); |
605 | 448 |
$('body').removeClass('with-overlay'); |
606 |
}) |
|
449 |
});
|
|
607 | 450 |
|
608 | 451 |
$('.browse-files').click(function(e){ |
609 | 452 |
e.preventDefault(); |
... | ... | |
611 | 454 |
|
612 | 455 |
if($('#picker-1').length>0) { |
613 | 456 |
$('#picker-1').farbtastic('#color-1'); |
614 |
};
|
|
457 |
} |
|
615 | 458 |
if($('#picker-2').length>0) { |
616 | 459 |
$('#picker-2').farbtastic('#color-2'); |
617 |
};
|
|
460 |
} |
|
618 | 461 |
if($('#sb-search').length>0) { |
619 | 462 |
new UISearch( document.getElementById( 'sb-search' ) ); |
620 | 463 |
} |
... | ... | |
651 | 494 |
$('[data-status="rebooting"] .btn5.temp').click(function(e) { |
652 | 495 |
e.preventDefault(); |
653 | 496 |
$(this).siblings('.container').find('.snf-pc-full').toggleClass('reboot-progress'); |
654 |
}) |
|
497 |
});
|
|
655 | 498 |
|
656 | 499 |
// //temp function to preventDefault of links in modal |
657 | 500 |
// $('.reveal-modal a:not(".close-reveal-modal, .generate-key-btn, .import-key-btn")').click(function(e){ |
... | ... | |
687 | 530 |
}); |
688 | 531 |
|
689 | 532 |
$('.hide-add-tag').click(function(e) { |
690 |
e.preventDefault(); |
|
691 |
$(this).parents('.tags-area, .tags').find('.snf-color-picker').slideUp(400, function() { |
|
692 |
$('.show-add-tag').first().scrollintoview({ |
|
693 |
'duration': 'slow' |
|
533 |
e.preventDefault(); |
|
534 |
$(this).parents('.tags-area, .tags').find('.snf-color-picker').slideUp(400, function() { |
|
535 |
$('.show-add-tag').first().scrollintoview({ |
|
536 |
'duration': 'slow' |
|
537 |
}); |
|
538 |
ui.colorPickerVisible = 0; |
|
694 | 539 |
}); |
695 |
ui.colorPickerVisible = 0; |
|
696 |
}); |
|
697 | 540 |
}); |
698 | 541 |
|
699 | 542 |
// connected details js |
... | ... | |
710 | 553 |
$(this).css('z-index',1); |
711 | 554 |
$(this).find('.more').stop(true, true).slideUp(200); |
712 | 555 |
}); |
713 |
//ui.tabs($('.tabs'), $('.content')); |
|
714 |
ui.hashTabs($('.tabs'), $('.content')); |
|
715 |
ui.hashViews($('.actions-bar .rt-actions'), $('.entities')); |
|
556 |
|
|
557 |
|
|
716 | 558 |
|
717 | 559 |
$('.act').click(function(e) { |
718 | 560 |
$(this).addClass('pending last'); |
... | ... | |
759 | 601 |
$('.containers .project').mouseleave(function(e){ |
760 | 602 |
$(this).find('ul').fadeOut(); |
761 | 603 |
$(this).find('.btn-more').removeClass('clicked'); |
762 |
}) |
|
604 |
});
|
|
763 | 605 |
|
764 | 606 |
if ($('.containers .btn-more').length>0) { |
765 | 607 |
$('body').click(function(e){ |
766 | 608 |
$('.btn-more').removeClass('clicked'); |
767 | 609 |
$('.btn-more').siblings('ul').fadeOut(); |
768 |
}) |
|
610 |
});
|
|
769 | 611 |
} |
770 | 612 |
|
771 | 613 |
// add a <span> element inside the content of each a.wrap-a element |
... | ... | |
781 | 623 |
$('.side-actions ul.options').mouseleave(function(e){ |
782 | 624 |
$(this).hide(); |
783 | 625 |
$(this).siblings('ul').removeAttr('style'); |
784 |
}) |
|
626 |
});
|
|
785 | 627 |
|
786 |
}) |
|
628 |
});
|
|
787 | 629 |
|
788 | 630 |
|
789 | 631 |
$(window).resize(function(e){ |
790 | 632 |
ui.setElminHeight($('.main > .details')); |
791 | 633 |
ui.setElminHeight($('.lt-bar')); |
792 | 634 |
ui.setElHeight($('.scroll-wrap')); |
793 |
ui.setCustomScrollBar(); |
|
794 | 635 |
ui.setElmaxHeight($('.storage-progress')); |
795 | 636 |
|
796 | 637 |
}); |
797 | 638 |
|
798 |
|
|
799 |
_.mixin({ |
|
800 |
capitalize: function(string) { |
|
801 |
return string.charAt(0).toUpperCase() + string.substring(1).toLowerCase(); |
|
802 |
} |
|
803 |
}); |
Also available in: Unified diff