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