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-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>«</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}); 152