Updated manual and documentation

docs/manual/_static/sidebar.js

@@ -16,144 +16,55 @@
  * Once the browser is closed the cookie is deleted and the position
  * reset to the default (expanded).
  *
- * :copyright: Copyright 2007-2021 by the Sphinx team, see AUTHORS.
+ * :copyright: Copyright 2007-2022 by the Sphinx team, see AUTHORS.
  * :license: BSD, see LICENSE for details.
  *
  */
 
-$(function() {
-  
-  
-  
-  
-  
+const initialiseSidebar = () => {
   
+    
   
 
   // global elements used by the functions.
-  // the 'sidebarbutton' element is defined as global after its
-  // creation, in the add_sidebar_button function
-  var bodywrapper = $('.bodywrapper');
-  var sidebar = $('.sphinxsidebar');
-  var sidebarwrapper = $('.sphinxsidebarwrapper');
+  const bodyWrapper = document.getElementsByClassName("bodywrapper")[0]
+  const sidebar = document.getElementsByClassName("sphinxsidebar")[0]
+  const sidebarWrapper = document.getElementsByClassName('sphinxsidebarwrapper')[0]
+  const sidebarButton = document.getElementById("sidebarbutton")
+  const sidebarArrow = sidebarButton.querySelector('span')
 
   // for some reason, the document has no sidebar; do not run into errors
-  if (!sidebar.length) return;
+  if (typeof sidebar === "undefined") return;
 
-  // original margin-left of the bodywrapper and width of the sidebar
-  // with the sidebar expanded
-  var bw_margin_expanded = bodywrapper.css('margin-left');
-  var ssb_width_expanded = sidebar.width();
+  const flipArrow = element => element.innerText = (element.innerText === "»") ? "«" : "»"
 
-  // margin-left of the bodywrapper and width of the sidebar
-  // with the sidebar collapsed
-  var bw_margin_collapsed = '.8em';
-  var ssb_width_collapsed = '.8em';
-
-  // colors used by the current theme
-  var dark_color = $('.related').css('background-color');
-  var light_color = $('.document').css('background-color');
-
-  function sidebar_is_collapsed() {
-    return sidebarwrapper.is(':not(:visible)');
+  const collapse_sidebar = () => {
+    bodyWrapper.style.marginLeft = ".8em";
+    sidebar.style.width = ".8em"
+    sidebarWrapper.style.display = "none"
+    flipArrow(sidebarArrow)
+    sidebarButton.title = _('Expand sidebar')
+    window.localStorage.setItem("sidebar", "collapsed")
   }
 
-  function toggle_sidebar() {
-    if (sidebar_is_collapsed())
-      expand_sidebar();
-    else
-      collapse_sidebar();
+  const expand_sidebar = () => {
+    bodyWrapper.style.marginLeft = ""
+    sidebar.style.removeProperty("width")
+    sidebarWrapper.style.display = ""
+    flipArrow(sidebarArrow)
+    sidebarButton.title = _('Collapse sidebar')
+    window.localStorage.setItem("sidebar", "expanded")
   }
 
-  function collapse_sidebar() {
-    sidebarwrapper.hide();
-    sidebar.css('width', ssb_width_collapsed);
-    bodywrapper.css('margin-left', bw_margin_collapsed);
-    sidebarbutton.css({
-        'margin-left': '0',
-        'height': bodywrapper.height()
-    });
-    sidebarbutton.find('span').text('»');
-    sidebarbutton.attr('title', _('Expand sidebar'));
-    document.cookie = 'sidebar=collapsed';
-  }
+  sidebarButton.addEventListener("click", () => {
+    (sidebarWrapper.style.display === "none") ? expand_sidebar() : collapse_sidebar()
+  })
 
-  function expand_sidebar() {
-    bodywrapper.css('margin-left', bw_margin_expanded);
-    sidebar.css('width', ssb_width_expanded);
-    sidebarwrapper.show();
-    sidebarbutton.css({
-        'margin-left': ssb_width_expanded-12,
-        'height': bodywrapper.height()
-    });
-    sidebarbutton.find('span').text('«');
-    sidebarbutton.attr('title', _('Collapse sidebar'));
-    document.cookie = 'sidebar=expanded';
-  }
+  if (!window.localStorage.getItem("sidebar")) return
+  const value = window.localStorage.getItem("sidebar")
+  if (value === "collapsed") collapse_sidebar();
+  else if (value === "expanded") expand_sidebar();
+}
 
-  function add_sidebar_button() {
-    sidebarwrapper.css({
-        'float': 'left',
-        'margin-right': '0',
-        'width': ssb_width_expanded - 28
-    });
-    // create the button
-    sidebar.append(
-        '<div id="sidebarbutton"><span>&laquo;</span></div>'
-    );
-    var sidebarbutton = $('#sidebarbutton');
-    light_color = sidebarbutton.css('background-color');
-    // find the height of the viewport to center the '<<' in the page
-    var viewport_height;
-    if (window.innerHeight)
- 	  viewport_height = window.innerHeight;
-    else
-	  viewport_height = $(window).height();
-    sidebarbutton.find('span').css({
-        'display': 'block',
-        'margin-top': (viewport_height - sidebar.position().top - 20) / 2
-    });
-
-    sidebarbutton.click(toggle_sidebar);
-    sidebarbutton.attr('title', _('Collapse sidebar'));
-    sidebarbutton.css({
-        'color': '#FFFFFF',
-        'border-left': '1px solid ' + dark_color,
-        'font-size': '1.2em',
-        'cursor': 'pointer',
-        'height': bodywrapper.height(),
-        'padding-top': '1px',
-        'margin-left': ssb_width_expanded - 12
-    });
-
-    sidebarbutton.hover(
-      function () {
-          $(this).css('background-color', dark_color);
-      },
-      function () {
-          $(this).css('background-color', light_color);
-      }
-    );
-  }
-
-  function set_position_from_cookie() {
-    if (!document.cookie)
-      return;
-    var items = document.cookie.split(';');
-    for(var k=0; k<items.length; k++) {
-      var key_val = items[k].split('=');
-      var key = key_val[0].replace(/ /, "");  // strip leading spaces
-      if (key == 'sidebar') {
-        var value = key_val[1];
-        if ((value == 'collapsed') && (!sidebar_is_collapsed()))
-          collapse_sidebar();
-        else if ((value == 'expanded') && (sidebar_is_collapsed()))
-          expand_sidebar();
-      }
-    }
-  }
-
-  add_sidebar_button();
-  var sidebarbutton = $('#sidebarbutton');
-  set_position_from_cookie();
-});
+if (document.readyState !== "loading") initialiseSidebar()
+else document.addEventListener("DOMContentLoaded", initialiseSidebar)