jquery.lp_minipanel.js 4.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. /*******************************************
  2. Learning Path minipanel - Chamilo 1.8.8
  3. Adding mini panel to browse Learning Paths
  4. Requirements: JQuery 1.4.4, JQuery UI 1.8.7
  5. Alberto Torreblanca @albert1t0
  6. *******************************************/
  7. (function($){
  8. $(document).ready(function() {
  9. //Adding div to hide panel
  10. $('#learning_path_right_zone').
  11. before('<div id="hide_bar" style="float: left; width: 10px; height: 100%;">' +
  12. '<table style="border: 0 none; width: 100%; height: 100%; cursor: pointer; background-color: #EEEEEE">' +
  13. '<tr> <td> </td></tr></table></div>');
  14. $('#hide_bar table').css({backgroundImage: "url(../img/hide0.png)", backgroundRepeat: "no-repeat", backgroundPosition: "center center"})
  15. //Adding effects to hide bar
  16. $('#hide_bar table').hover(function (){
  17. if($('#hide_bar').position().left == 280)
  18. $(this).css('backgroundImage','url(../img/hide1.png)').css('backgroundColor','#888888');
  19. else if($('#hide_bar').position().left == 0)
  20. $(this).css('backgroundImage','url(../img/hide3.png)').css('backgroundColor','#888888');
  21. },function (){
  22. if($('#hide_bar').position().left == 280)
  23. $(this).css('backgroundImage','url(../img/hide0.png)').css('backgroundColor','#EEEEEE');
  24. else if($('#hide_bar').position().left == 0)
  25. $(this).css('backgroundImage','url(../img/hide2.png)').css('backgroundColor','#EEEEEE');
  26. }
  27. );
  28. // Adding funcionality
  29. $('#hide_bar table').toggle(function(){
  30. // Copy little progress bar in <tr></tr>
  31. function minipb(){
  32. $('#learning_path_main #control tr').after('<tr></tr>');
  33. $('#learning_path_main #control tr:eq(1)').append($('#progress_bar').html());
  34. $('#learning_path_main #control tr:eq(1) #progress_img_limit_left').attr('height','5');
  35. $('#learning_path_main #control tr:eq(1) #progress_img_full').attr('height','5');
  36. $('#learning_path_main #control tr:eq(1) #progress_img_limit_middle').attr('height','5');
  37. $('#learning_path_main #control tr:eq(1) #progress_img_empty').attr('height','5');
  38. $('#learning_path_main #control tr:eq(1) #progress_bar_img_limit_right').attr('height','5');
  39. $('#learning_path_main #control tr:eq(1) #progress_text').remove();
  40. $('#learning_path_main #control tr:eq(1) div').css('width','');
  41. }
  42. // Construct mini panel
  43. var panel = $('#lp_navigation_elem div:first').clone();
  44. $(panel).attr('id','control');
  45. $('#learning_path_main').append(panel);
  46. minipb();
  47. $('#learning_path_main #control .buttons').attr('align','center');
  48. $('#learning_path_main #control').css(
  49. { margin: "auto",
  50. width: "132px",
  51. height: "34px",
  52. position: "absolute",
  53. top: "5px",
  54. left:"15px",
  55. backgroundColor: "white",
  56. backgroundImage: "url(../img/minipanelback.png)",
  57. paddingTop: "8px",
  58. paddingBottom: "8px",
  59. borderRadius: "4px 4px 4px 4px",
  60. opacity: "0.8",
  61. cursor: "move"
  62. });
  63. $('#learning_path_main #control table').attr('align','center');
  64. $('#learning_path_main #control').draggable(
  65. { iframeFix: true,
  66. stack: "#learning_path_right_zone",
  67. cursor: "move"
  68. });
  69. $('#learning_path_main #control .buttons img').click(function()
  70. { $('#learning_path_main #control tr:eq(1)').remove();
  71. minipb();
  72. });
  73. // Hiding navigation left zone
  74. $('#learning_path_left_zone').hide(50);
  75. $('#learning_path_right_zone').css('margin-left','10px');
  76. $('#hide_bar table').css('backgroundImage','url(../img/hide2.png)').css('backgroundColor','#EEEEEE');
  77. },function(){
  78. // Show navigation left zone
  79. $('#hide_bar table').css('backgroundImage','url(../img/hide0.png)').css('backgroundColor','#EEEEEE');
  80. $('#learning_path_right_zone').css('marginLeft','290px');
  81. $('#learning_path_left_zone').show(50);
  82. $('#learning_path_main #control').remove();
  83. });
  84. });
  85. })(jQuery);