sidebar.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. /*
  2. * sidebar.js
  3. * ~~~~~~~~~~
  4. *
  5. * This file is functionally identical to "sidebar.js" in Sphinx 5.0.
  6. * When support for Sphinx 4 and earlier is dropped from the theme,
  7. * this file can be removed.
  8. *
  9. * This script makes the Sphinx sidebar collapsible.
  10. *
  11. * .sphinxsidebar contains .sphinxsidebarwrapper. This script adds
  12. * in .sphinxsidebar, after .sphinxsidebarwrapper, the #sidebarbutton
  13. * used to collapse and expand the sidebar.
  14. *
  15. * When the sidebar is collapsed the .sphinxsidebarwrapper is hidden
  16. * and the width of the sidebar and the margin-left of the document
  17. * are decreased. When the sidebar is expanded the opposite happens.
  18. * This script saves a per-browser/per-session cookie used to
  19. * remember the position of the sidebar among the pages.
  20. * Once the browser is closed the cookie is deleted and the position
  21. * reset to the default (expanded).
  22. *
  23. * :copyright: Copyright 2007-2022 by the Sphinx team, see AUTHORS.
  24. * :license: BSD, see LICENSE for details.
  25. *
  26. */
  27. const initialiseSidebar = () => {
  28. // global elements used by the functions.
  29. const bodyWrapper = document.getElementsByClassName("bodywrapper")[0]
  30. const sidebar = document.getElementsByClassName("sphinxsidebar")[0]
  31. const sidebarWrapper = document.getElementsByClassName("sphinxsidebarwrapper")[0]
  32. // exit early if the document has no sidebar for some reason
  33. if (typeof sidebar === "undefined") {
  34. return
  35. }
  36. // create the sidebar button element
  37. const sidebarButton = document.createElement("div")
  38. sidebarButton.id = "sidebarbutton"
  39. // create the sidebar button arrow element
  40. const sidebarArrow = document.createElement("span")
  41. sidebarArrow.innerText = "«"
  42. sidebarButton.appendChild(sidebarArrow)
  43. sidebar.appendChild(sidebarButton)
  44. const collapse_sidebar = () => {
  45. bodyWrapper.style.marginLeft = ".8em"
  46. sidebar.style.width = ".8em"
  47. sidebarWrapper.style.display = "none"
  48. sidebarArrow.innerText = "»"
  49. sidebarButton.title = _("Expand sidebar")
  50. window.localStorage.setItem("sidebar", "collapsed")
  51. }
  52. const expand_sidebar = () => {
  53. bodyWrapper.style.marginLeft = ""
  54. sidebar.style.removeProperty("width")
  55. sidebarWrapper.style.display = ""
  56. sidebarArrow.innerText = "«"
  57. sidebarButton.title = _("Collapse sidebar")
  58. window.localStorage.setItem("sidebar", "expanded")
  59. }
  60. sidebarButton.addEventListener("click", () => {
  61. (sidebarWrapper.style.display === "none") ? expand_sidebar() : collapse_sidebar()
  62. })
  63. const sidebar_state = window.localStorage.getItem("sidebar")
  64. if (sidebar_state === "collapsed") {
  65. collapse_sidebar()
  66. }
  67. else if (sidebar_state === "expanded") {
  68. expand_sidebar()
  69. }
  70. }
  71. if (document.readyState !== "loading") {
  72. initialiseSidebar()
  73. }
  74. else {
  75. document.addEventListener("DOMContentLoaded", initialiseSidebar)
  76. }