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-2014 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();