blob: a45e1926addf0b96c1cf0180287763bbece82960 [file] [log] [blame]
Alexander Afanasyev508269a2012-07-28 13:59:54 -07001/*
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-2011 by the Sphinx team, see AUTHORS.
20 * :license: BSD, see LICENSE for details.
21 *
22 */
23
24$(function() {
25 // global elements used by the functions.
26 // the 'sidebarbutton' element is defined as global after its
27 // creation, in the add_sidebar_button function
28 var bodywrapper = $('.bodywrapper');
29 var sidebar = $('.sphinxsidebar');
30 var sidebarwrapper = $('.sphinxsidebarwrapper');
31
32 // for some reason, the document has no sidebar; do not run into errors
33 if (!sidebar.length) return;
34
35 // original margin-left of the bodywrapper and width of the sidebar
36 // with the sidebar expanded
37 var bw_margin_expanded = bodywrapper.css('margin-left');
38 var ssb_width_expanded = sidebar.width();
39
40 // margin-left of the bodywrapper and width of the sidebar
41 // with the sidebar collapsed
42 var bw_margin_collapsed = '.8em';
43 var ssb_width_collapsed = '.8em';
44
45 // colors used by the current theme
46 var dark_color = $('.related').css('background-color');
47 var light_color = $('.document').css('background-color');
48
49 function sidebar_is_collapsed() {
50 return sidebarwrapper.is(':not(:visible)');
51 }
52
53 function toggle_sidebar() {
54 if (sidebar_is_collapsed())
55 expand_sidebar();
56 else
57 collapse_sidebar();
58 }
59
60 function collapse_sidebar() {
61 sidebarwrapper.hide();
62 sidebar.css('width', ssb_width_collapsed);
63 bodywrapper.css('margin-left', bw_margin_collapsed);
64 sidebarbutton.css({
65 'margin-left': '0',
66 'height': bodywrapper.height()
67 });
68 sidebarbutton.find('span').text('»');
69 sidebarbutton.attr('title', _('Expand sidebar'));
70 document.cookie = 'sidebar=collapsed';
71 }
72
73 function expand_sidebar() {
74 bodywrapper.css('margin-left', bw_margin_expanded);
75 sidebar.css('width', ssb_width_expanded);
76 sidebarwrapper.show();
77 sidebarbutton.css({
78 'margin-left': ssb_width_expanded-12,
79 'height': bodywrapper.height()
80 });
81 sidebarbutton.find('span').text('«');
82 sidebarbutton.attr('title', _('Collapse sidebar'));
83 document.cookie = 'sidebar=expanded';
84 }
85
86 function add_sidebar_button() {
87 sidebarwrapper.css({
88 'float': 'left',
89 'margin-right': '0',
90 'width': ssb_width_expanded - 28
91 });
92 // create the button
93 sidebar.append(
94 '<div id="sidebarbutton"><span>&laquo;</span></div>'
95 );
96 var sidebarbutton = $('#sidebarbutton');
97 light_color = sidebarbutton.css('background-color');
98 // find the height of the viewport to center the '<<' in the page
99 var viewport_height;
100 if (window.innerHeight)
101 viewport_height = window.innerHeight;
102 else
103 viewport_height = $(window).height();
104 sidebarbutton.find('span').css({
105 'display': 'block',
106 'margin-top': (viewport_height - sidebar.position().top - 20) / 2
107 });
108
109 sidebarbutton.click(toggle_sidebar);
110 sidebarbutton.attr('title', _('Collapse sidebar'));
111 sidebarbutton.css({
112 'color': '#FFFFFF',
113 'border-left': '1px solid ' + dark_color,
114 'font-size': '1.2em',
115 'cursor': 'pointer',
116 'height': bodywrapper.height(),
117 'padding-top': '1px',
118 'margin-left': ssb_width_expanded - 12
119 });
120
121 sidebarbutton.hover(
122 function () {
123 $(this).css('background-color', dark_color);
124 },
125 function () {
126 $(this).css('background-color', light_color);
127 }
128 );
129 }
130
131 function set_position_from_cookie() {
132 if (!document.cookie)
133 return;
134 var items = document.cookie.split(';');
135 for(var k=0; k<items.length; k++) {
136 var key_val = items[k].split('=');
137 var key = key_val[0];
138 if (key == 'sidebar') {
139 var value = key_val[1];
140 if ((value == 'collapsed') && (!sidebar_is_collapsed()))
141 collapse_sidebar();
142 else if ((value == 'expanded') && (sidebar_is_collapsed()))
143 expand_sidebar();
144 }
145 }
146 }
147
148 add_sidebar_button();
149 var sidebarbutton = $('#sidebarbutton');
150 set_position_from_cookie();
151});