phpmyadmin/doc/html/_static/sidebar.js

   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>&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 });