sidebar.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. /*
  2. * sidebar.js
  3. * ~~~~~~~~~~
  4. *
  5. * This script makes the Sphinx sidebar collapsible.
  6. *
  7. * .sphinxsidebar contains .sphinxsidebarwrapper. This script adds
  8. * in .sphixsidebar, after .sphinxsidebarwrapper, the #sidebarbutton
  9. * used to collapse and expand the sidebar.
  10. *
  11. * When the sidebar is collapsed the .sphinxsidebarwrapper is hidden
  12. * and the width of the sidebar and the margin-left of the document
  13. * are decreased. When the sidebar is expanded the opposite happens.
  14. * This script saves a per-browser/per-session cookie used to
  15. * remember the position of the sidebar among the pages.
  16. * Once the browser is closed the cookie is deleted and the position
  17. * reset to the default (expanded).
  18. *
  19. * :copyright: Copyright 2007-2021 by the Sphinx team, see AUTHORS.
  20. * :license: BSD, see LICENSE for details.
  21. *
  22. */
  23. $(function() {
  24. // global elements used by the functions.
  25. // the 'sidebarbutton' element is defined as global after its
  26. // creation, in the add_sidebar_button function
  27. var bodywrapper = $('.bodywrapper');
  28. var sidebar = $('.sphinxsidebar');
  29. var sidebarwrapper = $('.sphinxsidebarwrapper');
  30. // for some reason, the document has no sidebar; do not run into errors
  31. if (!sidebar.length) return;
  32. // original margin-left of the bodywrapper and width of the sidebar
  33. // with the sidebar expanded
  34. var bw_margin_expanded = bodywrapper.css('margin-left');
  35. var ssb_width_expanded = sidebar.width();
  36. // margin-left of the bodywrapper and width of the sidebar
  37. // with the sidebar collapsed
  38. var bw_margin_collapsed = '.8em';
  39. var ssb_width_collapsed = '.8em';
  40. // colors used by the current theme
  41. var dark_color = $('.related').css('background-color');
  42. var light_color = $('.document').css('background-color');
  43. function sidebar_is_collapsed() {
  44. return sidebarwrapper.is(':not(:visible)');
  45. }
  46. function toggle_sidebar() {
  47. if (sidebar_is_collapsed())
  48. expand_sidebar();
  49. else
  50. collapse_sidebar();
  51. }
  52. function collapse_sidebar() {
  53. sidebarwrapper.hide();
  54. sidebar.css('width', ssb_width_collapsed);
  55. bodywrapper.css('margin-left', bw_margin_collapsed);
  56. sidebarbutton.css({
  57. 'margin-left': '0',
  58. 'height': bodywrapper.height()
  59. });
  60. sidebarbutton.find('span').text('»');
  61. sidebarbutton.attr('title', _('Expand sidebar'));
  62. document.cookie = 'sidebar=collapsed';
  63. }
  64. function expand_sidebar() {
  65. bodywrapper.css('margin-left', bw_margin_expanded);
  66. sidebar.css('width', ssb_width_expanded);
  67. sidebarwrapper.show();
  68. sidebarbutton.css({
  69. 'margin-left': ssb_width_expanded-12,
  70. 'height': bodywrapper.height()
  71. });
  72. sidebarbutton.find('span').text('«');
  73. sidebarbutton.attr('title', _('Collapse sidebar'));
  74. document.cookie = 'sidebar=expanded';
  75. }
  76. function add_sidebar_button() {
  77. sidebarwrapper.css({
  78. 'float': 'left',
  79. 'margin-right': '0',
  80. 'width': ssb_width_expanded - 28
  81. });
  82. // create the button
  83. sidebar.append(
  84. '<div id="sidebarbutton"><span>&laquo;</span></div>'
  85. );
  86. var sidebarbutton = $('#sidebarbutton');
  87. light_color = sidebarbutton.css('background-color');
  88. // find the height of the viewport to center the '<<' in the page
  89. var viewport_height;
  90. if (window.innerHeight)
  91. viewport_height = window.innerHeight;
  92. else
  93. viewport_height = $(window).height();
  94. sidebarbutton.find('span').css({
  95. 'display': 'block',
  96. 'margin-top': (viewport_height - sidebar.position().top - 20) / 2
  97. });
  98. sidebarbutton.click(toggle_sidebar);
  99. sidebarbutton.attr('title', _('Collapse sidebar'));
  100. sidebarbutton.css({
  101. 'color': '#FFFFFF',
  102. 'border-left': '1px solid ' + dark_color,
  103. 'font-size': '1.2em',
  104. 'cursor': 'pointer',
  105. 'height': bodywrapper.height(),
  106. 'padding-top': '1px',
  107. 'margin-left': ssb_width_expanded - 12
  108. });
  109. sidebarbutton.hover(
  110. function () {
  111. $(this).css('background-color', dark_color);
  112. },
  113. function () {
  114. $(this).css('background-color', light_color);
  115. }
  116. );
  117. }
  118. function set_position_from_cookie() {
  119. if (!document.cookie)
  120. return;
  121. var items = document.cookie.split(';');
  122. for(var k=0; k<items.length; k++) {
  123. var key_val = items[k].split('=');
  124. var key = key_val[0].replace(/ /, ""); // strip leading spaces
  125. if (key == 'sidebar') {
  126. var value = key_val[1];
  127. if ((value == 'collapsed') && (!sidebar_is_collapsed()))
  128. collapse_sidebar();
  129. else if ((value == 'expanded') && (sidebar_is_collapsed()))
  130. expand_sidebar();
  131. }
  132. }
  133. }
  134. add_sidebar_button();
  135. var sidebarbutton = $('#sidebarbutton');
  136. set_position_from_cookie();
  137. });