jquery.lp_minipanel.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  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 toogle_minipanel() {
  11. // Construct mini panel
  12. var panel = $('#lp_navigation_elem div:first').clone();
  13. $(panel).attr('id', 'control');
  14. $('#learning_path_main').append(panel);
  15. $('#learning_path_main #control tr').after('<tr></tr>');
  16. $('#learning_path_main #control tr:eq(1)').append($('#progress_bar').html());
  17. $('#learning_path_main #control tr:eq(1) #progress_img_limit_left').attr('height','5');
  18. $('#learning_path_main #control tr:eq(1) #progress_img_full').attr('height','5');
  19. $('#learning_path_main #control tr:eq(1) #progress_img_limit_middle').attr('height','5');
  20. $('#learning_path_main #control tr:eq(1) #progress_img_empty').attr('height','5');
  21. $('#learning_path_main #control tr:eq(1) #progress_bar_img_limit_right').attr('height','5');
  22. $('#learning_path_main #control tr:eq(1) #progress_text').remove();
  23. $('#learning_path_main #control tr:eq(1) div').css('width','');
  24. $('#learning_path_main #control .buttons').attr('text-align','center');
  25. $('#content_id').css({ height: $('#content_id').height() - ($('#control').height() + 10) });
  26. $('#learning_path_main #control .buttons img').click(function(){
  27. $('#learning_path_main #control tr:eq(1)').remove();
  28. toogle_minipanel();
  29. });
  30. // Hiding navigation left zone
  31. $('#learning_path_left_zone').hide(50);
  32. $('#learning_path_right_zone').css('margin-left','10px');
  33. $('#hide_bar table').css('backgroundImage','url(../img/hide2.png)').css('backgroundColor','#EEEEEE');
  34. }
  35. var left_width_mini = 20; // (relative) hide_bar position
  36. $(document).ready(function() {
  37. var left_width = $('#learning_path_left_zone').width();
  38. //Adding div to hide panel
  39. $('#learning_path_right_zone').before('<div id="hide_bar" style="float: left; width: 10px; height: 1000px;">' +
  40. '<table style="border: 0 none; width: 100%; height: 100%; cursor: pointer; background-color: #EEEEEE">' +
  41. '<tr><td></td></tr></table></div>');
  42. $('#hide_bar table').css({backgroundImage: "url(../img/hide0.png)", backgroundRepeat: "no-repeat", backgroundPosition: "center center"});
  43. //Adding effects to hide bar
  44. $('#hide_bar table').hover(function () {
  45. if ($('#hide_bar').position().left >= left_width)
  46. $(this).css('backgroundImage','url(../img/hide1.png)').css('backgroundColor','#888888');
  47. else if($('#hide_bar').position().left <= left_width_mini)
  48. $(this).css('backgroundImage','url(../img/hide3.png)').css('backgroundColor','#888888');
  49. },function (){
  50. if($('#hide_bar').position().left >= left_width)
  51. $(this).css('backgroundImage','url(../img/hide0.png)').css('backgroundColor','#EEEEEE');
  52. else if($('#hide_bar').position().left <= left_width_mini)
  53. $(this).css('backgroundImage','url(../img/hide2.png)').css('backgroundColor','#EEEEEE');
  54. }
  55. );
  56. var original = $('#content_id').height();
  57. // Adding functionality
  58. $('#hide_bar table').toggle(function(){
  59. if ($('#hide_bar').position().left >= left_width) {
  60. toogle_minipanel();
  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 + 25 + '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. });