jquery.lp_minipanel.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  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. @todo this doesn't work due recent changes in this file I partially fixed now we can see the vertical bar
  9. but the minipanel was removed
  10. **/
  11. // Copy little progress bar in <tr></tr>
  12. function minipb() {
  13. $('#learning_path_main #control tr').after('<tr></tr>');
  14. $('#learning_path_main #control tr:eq(1)').append($('#progress_bar').html());
  15. $('#learning_path_main #control tr:eq(1) #progress_img_limit_left').attr('height','5');
  16. $('#learning_path_main #control tr:eq(1) #progress_img_full').attr('height','5');
  17. $('#learning_path_main #control tr:eq(1) #progress_img_limit_middle').attr('height','5');
  18. $('#learning_path_main #control tr:eq(1) #progress_img_empty').attr('height','5');
  19. $('#learning_path_main #control tr:eq(1) #progress_bar_img_limit_right').attr('height','5');
  20. $('#learning_path_main #control tr:eq(1) #progress_text').remove();
  21. $('#learning_path_main #control tr:eq(1) div').css('width','');
  22. }
  23. var left_width = 292;
  24. $(document).ready(function() {
  25. //Adding div to hide panel
  26. $('#learning_path_right_zone').before('<div id="hide_bar" style="float: left; width: 10px; height: 100%;">' +
  27. '<table style="border: 0 none; width: 100%; height: 100%; cursor: pointer; background-color: #EEEEEE">' +
  28. '<tr><td></td></tr></table></div>');
  29. $('#hide_bar table').css({backgroundImage: "url(../img/hide0.png)", backgroundRepeat: "no-repeat", backgroundPosition: "center center"});
  30. //Adding effects to hide bar
  31. $('#hide_bar table').hover(function () {
  32. if ($('#hide_bar').position().left == 292)
  33. $(this).css('backgroundImage','url(../img/hide1.png)').css('backgroundColor','#888888');
  34. else if($('#hide_bar').position().left == 0)
  35. $(this).css('backgroundImage','url(../img/hide3.png)').css('backgroundColor','#888888');
  36. },function (){
  37. if($('#hide_bar').position().left == left_width)
  38. $(this).css('backgroundImage','url(../img/hide0.png)').css('backgroundColor','#EEEEEE');
  39. else if($('#hide_bar').position().left == 0)
  40. $(this).css('backgroundImage','url(../img/hide2.png)').css('backgroundColor','#EEEEEE');
  41. }
  42. );
  43. // Adding funcionality
  44. $( "#hide_bar" ).click(function() {
  45. $('#hide_bar table').toggle(function() {
  46. if ($('#hide_bar').position().left == left_width) {
  47. // Construct mini panel
  48. var panel = $('#lp_navigation_elem div:first').clone();
  49. $(panel).attr('id','control');
  50. $('#learning_path_main').append(panel);
  51. minipb();
  52. $('#learning_path_main #control .buttons').attr('text-align','center');
  53. $('#learning_path_main #control').css({
  54. margin: "auto",
  55. width: "132px",
  56. height: "34px",
  57. position: "absolute",
  58. top: "5px",
  59. right:"15px",
  60. backgroundColor: "white",
  61. backgroundImage: "url(../img/minipanelback.png)",
  62. paddingTop: "8px",
  63. paddingBottom: "8px",
  64. borderRadius: "4px 4px 4px 4px",
  65. opacity: "0.8",
  66. cursor: "move",
  67. });
  68. //$('#learning_path_main #control').css("text-align", "center");
  69. $('#learning_path_main #control table').attr('align','center');
  70. $('#learning_path_main #control').draggable({
  71. iframeFix: true,
  72. stack: "#learning_path_right_zone",
  73. cursor: "move"
  74. });
  75. $('#learning_path_main #control .buttons img').click(function(){
  76. $('#learning_path_main #control tr:eq(1)').remove();
  77. minipb();
  78. });
  79. // Hiding navigation left zone
  80. $('#learning_path_left_zone').hide(50);
  81. $('#learning_path_right_zone').css('margin-left','10px');
  82. $('#hide_bar table').css('backgroundImage','url(../img/hide2.png)').css('backgroundColor','#EEEEEE');
  83. }
  84. },
  85. function(){
  86. // Show navigation left zone
  87. $('#hide_bar table').css('backgroundImage','url(../img/hide0.png)').css('backgroundColor','#EEEEEE');
  88. $('#learning_path_right_zone').css('marginLeft','290px');
  89. $('#learning_path_left_zone').show(50);
  90. $('#learning_path_main #control').remove();
  91. }
  92. );
  93. });
  94. });