sidebar.js_t

/*
 * 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.
 *
 * This script makes the Sphinx sidebar collapsible.
 *
 * .sphinxsidebar contains .sphinxsidebarwrapper.  This script adds
 * in .sphinxsidebar, after .sphinxsidebarwrapper, the #sidebarbutton
 * used to collapse and expand the sidebar.
 *
 * 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.
 *
 */

const initialiseSidebar = () => {
  const ngettext = Documentation.ngettext
  // global elements used by the functions.
  const bodyWrapper = document.querySelector(".bodywrapper")
  const sidebar = document.querySelector(".sphinxsidebar")
  const sidebarWrapper = document.querySelector(".sphinxsidebarwrapper")

  // exit early if the document has no sidebar for some reason
  if (!sidebar) {
    return
  }

{# Check if we need to dynamically insert the sidebar button.
 # We prefer the ``sphinx_version_tuple`` variable, and if it is undefined we
 # know we are running a Sphinx version older than 4.2.
 #
 # See: https://www.sphinx-doc.org/en/master/development/templating.html#sphinx_version_tuple
 #}
{% if sphinx_version_tuple is defined and sphinx_version_tuple[0] >= 5 %}
  const sidebarButton = document.getElementById("sidebarbutton")
{% else %}
  // create the sidebar button element
  const sidebarButton = document.createElement("div")
  sidebarButton.id = "sidebarbutton"
{% endif %}
  const sidebarMinWidth = 200
  const sidebarMaxWidth = Math.round(0.5 * window.innerWidth)

  sidebarbutton.innerHTML = ""
  sidebarbutton.tabindex = "0"  // make it focusable
  sidebarbutton.role = "slider"
  sidebarbutton.title = _("Resize sidebar")
  sidebarbutton.style.cursor = "col-resize" // Set the cursor only if JS is enabled
  sidebarbutton.setAttribute("aria-label", _("Resize sidebar by dragging"))
  sidebarbutton.setAttribute(
    "aria-valuetext",
    ngettext(
      "Sidebar width {count} pixel",
      "Sidebar width {count} pixels",
      sidebar.offsetWidth
    ).replace("{count}", sidebar.offsetWidth)
  )
  let clientX;

  function onMouseMove(e) {
    e.preventDefault()
    const sidebarWidth = sidebar.offsetWidth
    const newWidth = Math.max(
      sidebarMinWidth,
      Math.min(sidebarMaxWidth, sidebarWidth + e.clientX - clientX)
    )
    clientX = e.clientX
    sidebar.style.width = `${newWidth}px`
    bodyWrapper.style.marginLeft = `${newWidth}px`
    window.localStorage.setItem("sidebar-width", newWidth)
  }

  sidebarButton.addEventListener("mousedown", e => {
    e.preventDefault()
    clientX = e.clientX
    document.addEventListener("mousemove", onMouseMove)
    document.addEventListener("mouseup", () => {
      document.removeEventListener("mousemove", onMouseMove)
      sidebarbutton.setAttribute(
        "aria-valuetext",
        ngettext(
          "Sidebar width {count} pixel",
          "Sidebar width {count} pixels",
          sidebar.offsetWidth
        ).replace("{count}", sidebar.offsetWidth)
      )
    })
  })

  const sidebarWidth = parseInt(window.localStorage.getItem("sidebar-width"), 10)
  if(Number.isFinite(sidebarWidth)) {
    sidebar.style.width = `${sidebarWidth}px`
    bodyWrapper.style.marginLeft = `${sidebarWidth}px`
  }
}

if (document.readyState !== "loading") {
  initialiseSidebar()
}
else {
  document.addEventListener("DOMContentLoaded", initialiseSidebar)
}