|
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-2014 by the Sphinx team, see AUTHORS. |
|
20 * :license: BSD, see LICENSE for details. |
|
21 * |
|
22 */ |
|
23 |
|
24 $(function() { |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
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'); |
|
39 |
|
40 // for some reason, the document has no sidebar; do not run into errors |
|
41 if (!sidebar.length) return; |
|
42 |
|
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(); |
|
47 |
|
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'; |
|
52 |
|
53 // colors used by the current theme |
|
54 var dark_color = $('.related').css('background-color'); |
|
55 var light_color = $('.document').css('background-color'); |
|
56 |
|
57 function sidebar_is_collapsed() { |
|
58 return sidebarwrapper.is(':not(:visible)'); |
|
59 } |
|
60 |
|
61 function toggle_sidebar() { |
|
62 if (sidebar_is_collapsed()) |
|
63 expand_sidebar(); |
|
64 else |
|
65 collapse_sidebar(); |
|
66 } |
|
67 |
|
68 function collapse_sidebar() { |
|
69 sidebarwrapper.hide(); |
|
70 sidebar.css('width', ssb_width_collapsed); |
|
71 bodywrapper.css('margin-left', bw_margin_collapsed); |
|
72 sidebarbutton.css({ |
|
73 'margin-left': '0', |
|
74 'height': bodywrapper.height() |
|
75 }); |
|
76 sidebarbutton.find('span').text('»'); |
|
77 sidebarbutton.attr('title', _('Expand sidebar')); |
|
78 document.cookie = 'sidebar=collapsed'; |
|
79 } |
|
80 |
|
81 function expand_sidebar() { |
|
82 bodywrapper.css('margin-left', bw_margin_expanded); |
|
83 sidebar.css('width', ssb_width_expanded); |
|
84 sidebarwrapper.show(); |
|
85 sidebarbutton.css({ |
|
86 'margin-left': ssb_width_expanded-12, |
|
87 'height': bodywrapper.height() |
|
88 }); |
|
89 sidebarbutton.find('span').text('«'); |
|
90 sidebarbutton.attr('title', _('Collapse sidebar')); |
|
91 document.cookie = 'sidebar=expanded'; |
|
92 } |
|
93 |
|
94 function add_sidebar_button() { |
|
95 sidebarwrapper.css({ |
|
96 'float': 'left', |
|
97 'margin-right': '0', |
|
98 'width': ssb_width_expanded - 28 |
|
99 }); |
|
100 // create the button |
|
101 sidebar.append( |
|
102 '<div id="sidebarbutton"><span>«</span></div>' |
|
103 ); |
|
104 var sidebarbutton = $('#sidebarbutton'); |
|
105 light_color = sidebarbutton.css('background-color'); |
|
106 // find the height of the viewport to center the '<<' in the page |
|
107 var viewport_height; |
|
108 if (window.innerHeight) |
|
109 viewport_height = window.innerHeight; |
|
110 else |
|
111 viewport_height = $(window).height(); |
|
112 sidebarbutton.find('span').css({ |
|
113 'display': 'block', |
|
114 'margin-top': (viewport_height - sidebar.position().top - 20) / 2 |
|
115 }); |
|
116 |
|
117 sidebarbutton.click(toggle_sidebar); |
|
118 sidebarbutton.attr('title', _('Collapse sidebar')); |
|
119 sidebarbutton.css({ |
|
120 'color': '#FFFFFF', |
|
121 'border-left': '1px solid ' + dark_color, |
|
122 'font-size': '1.2em', |
|
123 'cursor': 'pointer', |
|
124 'height': bodywrapper.height(), |
|
125 'padding-top': '1px', |
|
126 'margin-left': ssb_width_expanded - 12 |
|
127 }); |
|
128 |
|
129 sidebarbutton.hover( |
|
130 function () { |
|
131 $(this).css('background-color', dark_color); |
|
132 }, |
|
133 function () { |
|
134 $(this).css('background-color', light_color); |
|
135 } |
|
136 ); |
|
137 } |
|
138 |
|
139 function set_position_from_cookie() { |
|
140 if (!document.cookie) |
|
141 return; |
|
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())) |
|
149 collapse_sidebar(); |
|
150 else if ((value == 'expanded') && (sidebar_is_collapsed())) |
|
151 expand_sidebar(); |
|
152 } |
|
153 } |
|
154 } |
|
155 |
|
156 add_sidebar_button(); |
|
157 var sidebarbutton = $('#sidebarbutton'); |
|
158 set_position_from_cookie(); |
|
159 }); |