jquery.lp_minipanel.js 3.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. /* For licensing terms, see /license.txt */
  2. /*
  3. Learning Path minipanel - Chamilo 1.8.8
  4. Adding mini panel to browse Learning Paths
  5. Requirements: JQuery 1.4.4, JQuery UI 1.8.7
  6. @author Alberto Torreblanca @albert1t0
  7. @author Julio Montoya Cleaning/fixing some code
  8. **/
  9. // Copy little progress bar in <tr></tr>
  10. function minipb() {
  11. $('#learning_path_main #control tr').after('<tr></tr>');
  12. $('#learning_path_main #control tr:eq(1)').append($('#progress_bar').html());
  13. $('#learning_path_main #control tr:eq(1) #progress_img_limit_left').attr('height','5');
  14. $('#learning_path_main #control tr:eq(1) #progress_img_full').attr('height','5');
  15. $('#learning_path_main #control tr:eq(1) #progress_img_limit_middle').attr('height','5');
  16. $('#learning_path_main #control tr:eq(1) #progress_img_empty').attr('height','5');
  17. $('#learning_path_main #control tr:eq(1) #progress_bar_img_limit_right').attr('height','5');
  18. $('#learning_path_main #control tr:eq(1) #progress_text').remove();
  19. $('#learning_path_main #control tr:eq(1) div').css('width','');
  20. }
  21. var left_width = 292;
  22. $(document).ready(function() {
  23. //Adding div to hide panel
  24. $('#learning_path_right_zone').before('<div id="hide_bar" style="float: left; width: 10px; height: 100%;">' +
  25. '<table style="border: 0 none; width: 100%; height: 100%; cursor: pointer; background-color: #EEEEEE">' +
  26. '<tr><td></td></tr></table></div>');
  27. $('#hide_bar table').css({backgroundImage: "url(../img/hide0.png)", backgroundRepeat: "no-repeat", backgroundPosition: "center center"});
  28. //Adding effects to hide bar
  29. $('#hide_bar table').hover(function () {
  30. if ($('#hide_bar').position().left == 292)
  31. $(this).css('backgroundImage','url(../img/hide1.png)').css('backgroundColor','#888888');
  32. else if($('#hide_bar').position().left == 0)
  33. $(this).css('backgroundImage','url(../img/hide3.png)').css('backgroundColor','#888888');
  34. },function (){
  35. if($('#hide_bar').position().left == left_width)
  36. $(this).css('backgroundImage','url(../img/hide0.png)').css('backgroundColor','#EEEEEE');
  37. else if($('#hide_bar').position().left == 0)
  38. $(this).css('backgroundImage','url(../img/hide2.png)').css('backgroundColor','#EEEEEE');
  39. }
  40. );
  41. var original = $('#content_id').height();
  42. // Adding funcionality
  43. $( "#hide_bar" ).click(function() {
  44. $('#hide_bar table').toggle(function() {
  45. if ($('#hide_bar').position().left == left_width) {
  46. // Construct mini panel
  47. var panel = $('#lp_navigation_elem div:first').clone();
  48. $(panel).attr('id', 'control');
  49. $('#learning_path_main').append(panel);
  50. minipb();
  51. $('#learning_path_main #control .buttons').attr('text-align','center');
  52. $('#content_id').css({ height: $('#content_id').height() - ($('#control').height() + 10) });
  53. $('#learning_path_main #control .buttons img').click(function(){
  54. $('#learning_path_main #control tr:eq(1)').remove();
  55. minipb();
  56. });
  57. // Hiding navigation left zone
  58. $('#learning_path_left_zone').hide(50);
  59. $('#learning_path_right_zone').css('margin-left','10px');
  60. $('#hide_bar table').css('backgroundImage','url(../img/hide2.png)').css('backgroundColor','#EEEEEE');
  61. }
  62. },
  63. function(){
  64. // Show navigation left zone
  65. $('#learning_path_left_zone').show(50);
  66. $('#learning_path_right_zone').css('marginLeft', left_width + 10 + 'px');
  67. $('#hide_bar table').css('backgroundImage','url(../img/hide0.png)').css('backgroundColor','#EEEEEE');
  68. $('#learning_path_main #control').remove();
  69. $('#content_id').css({ height: original});
  70. }
  71. );
  72. });
  73. });