Drop jQuery in sidebars.js

AA-Turner · AA-Turner · commit 40a3de3352d8 · 2023-04-11T16:47:10.000+01:00
diff --git a/python_docs_theme/static/pydoctheme.css b/python_docs_theme/static/pydoctheme.css
@@ -104,10 +104,12 @@ div.sphinxsidebar h4 {
 }
 
 div.sphinxsidebarwrapper {
+    width: 217px;
     box-sizing: border-box;
     height: 100%;
     overflow-x: hidden;
     overflow-y: auto;
+    float: left;
 }
 
 div.sphinxsidebarwrapper > h3:first-child {
@@ -135,6 +137,33 @@ div.sphinxsidebar input[type='text'] {
     max-width: 150px;
 }
 
+#sidebarbutton {
+    /* Sphinx 4.x and earlier compat */
+    height: 100%;
+    background-color: #CCCCCC;
+    margin-left: 0;
+    color: #444444;
+    font-size: 1.2em;
+    cursor: pointer;
+    padding-top: 1px;
+    float: right;
+    display: table;
+    /* after Sphinx 4.x and earlier is dropped, only the below is needed */
+    width: 12px;
+    border-radius: 0 5px 5px 0;
+    border-left: none;
+}
+
+#sidebarbutton span {
+    /* Sphinx 4.x and earlier compat */
+    display: table-cell;
+    vertical-align: middle;
+}
+
+#sidebarbutton:hover {
+    background-color: #AAAAAA;
+}
+
 div.body {
     padding: 0 0 0 1.2em;
 }
diff --git a/python_docs_theme/static/sidebar.js b/python_docs_theme/static/sidebar.js
@@ -2,142 +2,88 @@
  * sidebar.js
  * ~~~~~~~~~~
  *
- * This script makes the Sphinx sidebar collapsible. This is a slightly
- * modified version of Sphinx's own sidebar.js.
+ * This file is functionally identical to "sidebar.js" in Sphinx 5.0.
+ * When support for Sphinx 4 and earlier is dropped from the theme,
+ * this file can be removed.
  *
- * .sphinxsidebar contains .sphinxsidebarwrapper.  This script adds in
- * .sphixsidebar, after .sphinxsidebarwrapper, the #sidebarbutton used to
- * collapse and expand the sidebar.
+ * This script makes the Sphinx sidebar collapsible.
  *
- * When the sidebar is collapsed the .sphinxsidebarwrapper is hidden and the
- * width of the sidebar and the margin-left of the document are decreased.
- * When the sidebar is expanded the opposite happens.  This script saves a
- * per-browser/per-session cookie used to remember the position of the sidebar
- * among the pages.  Once the browser is closed the cookie is deleted and the
- * position reset to the default (expanded).
+ * .sphinxsidebar contains .sphinxsidebarwrapper.  This script adds
+ * in .sphinxsidebar, after .sphinxsidebarwrapper, the #sidebarbutton
+ * used to collapse and expand the sidebar.
  *
- * :copyright: Copyright 2007-2011 by the Sphinx team, see AUTHORS.
+ * When the sidebar is collapsed the .sphinxsidebarwrapper is hidden
+ * and the width of the sidebar and the margin-left of the document
+ * are decreased. When the sidebar is expanded the opposite happens.
+ * This script saves a per-browser/per-session cookie used to
+ * remember the position of the sidebar among the pages.
+ * Once the browser is closed the cookie is deleted and the position
+ * reset to the default (expanded).
+ *
+ * :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]
 
-  // 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();
+  // exit early if the document has no sidebar for some reason
+  if (typeof sidebar === "undefined") {
+    return
+  }
 
-  // margin-left of the bodywrapper and width of the sidebar
-  // with the sidebar collapsed
-  var bw_margin_collapsed = '.8em';
-  var ssb_width_collapsed = '.8em';
+  // create the sidebar button element
+  const sidebarButton = document.createElement("div")
+  sidebarButton.id = "sidebarbutton"
+  // create the sidebar button arrow element
+  const sidebarArrow = document.createElement("span")
+  sidebarArrow.innerText =  "«"
+  sidebarButton.appendChild(sidebarArrow)
+  sidebar.appendChild(sidebarButton)
 
-  // colors used by the current theme
-  var dark_color = '#AAAAAA';
-  var light_color = '#CCCCCC';
+  const flipArrow = element => element.innerText = (element.innerText === "»") ? "«" : "»"
 
-  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',
-        'border-radius': '5px'
-    });
-    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,
-        'border-radius': '0 5px 5px 0'
-    });
-    sidebarbutton.find('span').text('«');
-    sidebarbutton.attr('title', _('Collapse sidebar'));
-    document.cookie = 'sidebar=expanded';
+  if (!window.localStorage.getItem("sidebar")) {
+    return
   }
-
-  function add_sidebar_button() {
-    sidebarwrapper.css({
-        'float': 'left',
-        'margin-right': '0',
-        'width': ssb_width_expanded - 13
-    });
-    // create the button
-    sidebar.append(
-      '<div id="sidebarbutton"><span>&laquo;</span></div>'
-    );
-    var sidebarbutton = $('#sidebarbutton');
-    sidebarbutton.find('span').css({
-        'display': 'block',
-        'position': 'fixed',
-        'top': '50%'
-    });
-
-    sidebarbutton.click(toggle_sidebar);
-    sidebarbutton.attr('title', _('Collapse sidebar'));
-    sidebarbutton.css({
-        'border-radius': '0 5px 5px 0',
-        'color': '#444444',
-        'background-color': '#CCCCCC',
-        'font-size': '1.2em',
-        'cursor': 'pointer',
-        'height': '100%',
-        'padding-left': '1px',
-        'margin-left': ssb_width_expanded - 12
-    });
-
-    sidebarbutton.hover(
-      function () {
-          $(this).css('background-color', dark_color);
-      },
-      function () {
-          $(this).css('background-color', light_color);
-      }
-    );
+  const value = window.localStorage.getItem("sidebar")
+  if (value === "collapsed") {
+    collapse_sidebar()
   }
-
-  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];
-      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();
-      }
-    }
+  else if (value === "expanded") {
+    expand_sidebar()
   }
+}
 
-  add_sidebar_button();
-  var sidebarbutton = $('#sidebarbutton');
-  set_position_from_cookie();
-});
+if (document.readyState !== "loading") {
+  initialiseSidebar()
+}
+else {
+  document.addEventListener("DOMContentLoaded", initialiseSidebar)
+}
diff --git a/python_docs_theme/theme.conf b/python_docs_theme/theme.conf
@@ -15,6 +15,7 @@ relbarlinkcolor = #444444
 sidebarbgcolor = white
 sidebartextcolor = #444444
 sidebarlinkcolor = #444444
+sidebarbtncolor = #cccccc
 bgcolor = white
 textcolor = #222222
 linkcolor = #0090c0
