5 * This script makes the Sphinx sidebar collapsible.
7 * .sphinxsidebar contains .sphinxsidebarwrapper. This script adds
8 * in .sphixsidebar, after .sphinxsidebarwrapper, the #sidebarbutton
9 * used to collapse and expand the sidebar.
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).
19 * :copyright: Copyright 2007-2020 by the Sphinx team, see AUTHORS.
20 * :license: BSD, see LICENSE for details.
33 // global elements used by the functions.
34 // the 'sidebarbutton' element is defined as global after its
35 // creation, in the add_sidebar_button function
36 var bodywrapper = $('.bodywrapper');
37 var sidebar = $('.sphinxsidebar');
38 var sidebarwrapper = $('.sphinxsidebarwrapper');
40 // for some reason, the document has no sidebar; do not run into errors
41 if (!sidebar.length) return;
43 // original margin-left of the bodywrapper and width of the sidebar
44 // with the sidebar expanded
45 var bw_margin_expanded = bodywrapper.css('margin-left');
46 var ssb_width_expanded = sidebar.width();
48 // margin-left of the bodywrapper and width of the sidebar
49 // with the sidebar collapsed
50 var bw_margin_collapsed = '.8em';
51 var ssb_width_collapsed = '.8em';
53 // colors used by the current theme
54 var dark_color = $('.related').css('background-color');
55 var light_color = $('.document').css('background-color');
57 function sidebar_is_collapsed() {
58 return sidebarwrapper.is(':not(:visible)');
61 function toggle_sidebar() {
62 if (sidebar_is_collapsed())
68 function collapse_sidebar() {
69 sidebarwrapper.hide();
70 sidebar.css('width', ssb_width_collapsed);
71 bodywrapper.css('margin-left', bw_margin_collapsed);
74 'height': bodywrapper.height()
76 sidebarbutton.find('span').text('»');
77 sidebarbutton.attr('title', _('Expand sidebar'));
78 document.cookie = 'sidebar=collapsed';
81 function expand_sidebar() {
82 bodywrapper.css('margin-left', bw_margin_expanded);
83 sidebar.css('width', ssb_width_expanded);
84 sidebarwrapper.show();
86 'margin-left': ssb_width_expanded-12,
87 'height': bodywrapper.height()
89 sidebarbutton.find('span').text('«');
90 sidebarbutton.attr('title', _('Collapse sidebar'));
91 document.cookie = 'sidebar=expanded';
94 function add_sidebar_button() {
98 'width': ssb_width_expanded - 28
102 '<div id="sidebarbutton"><span>«</span></div>'
104 var sidebarbutton = $('#sidebarbutton');
105 light_color = sidebarbutton.css('background-color');
106 // find the height of the viewport to center the '<<' in the page
108 if (window.innerHeight)
109 viewport_height = window.innerHeight;
111 viewport_height = $(window).height();
112 sidebarbutton.find('span').css({
114 'margin-top': (viewport_height - sidebar.position().top - 20) / 2
117 sidebarbutton.click(toggle_sidebar);
118 sidebarbutton.attr('title', _('Collapse sidebar'));
121 'border-left': '1px solid ' + dark_color,
122 'font-size': '1.2em',
124 'height': bodywrapper.height(),
125 'padding-top': '1px',
126 'margin-left': ssb_width_expanded - 12
131 $(this).css('background-color', dark_color);
134 $(this).css('background-color', light_color);
139 function set_position_from_cookie() {
140 if (!document.cookie)
142 var items = document.cookie.split(';');
143 for(var k=0; k<items.length; k++) {
144 var key_val = items[k].split('=');
145 var key = key_val[0].replace(/ /, ""); // strip leading spaces
146 if (key == 'sidebar') {
147 var value = key_val[1];
148 if ((value == 'collapsed') && (!sidebar_is_collapsed()))
150 else if ((value == 'expanded') && (sidebar_is_collapsed()))
156 add_sidebar_button();
157 var sidebarbutton = $('#sidebarbutton');
158 set_position_from_cookie();