MAINT: Fix the javascript and add a tox file

Author: choldgraf

setup.py

@@ -27,6 +27,6 @@
         "sphinx_togglebutton": ["_static/togglebutton.css_t", "_static/togglebutton.js"]
     },
     install_requires=["setuptools", "wheel", "sphinx", "docutils"],
-    extras_require={"sphinx": ["myst_nb", "sphinx_book_theme"]},
+    extras_require={"sphinx": ["matplotlib", "myst_nb", "sphinx_book_theme", "sphinx_design"]},
     classifiers=["License :: OSI Approved :: MIT License"],
 )

sphinx_togglebutton/_static/togglebutton.js

@@ -1,40 +1,47 @@
 var initToggleItems = () => {
   var itemsToToggle = document.querySelectorAll(togglebuttonSelector);
-  console.log(itemsToToggle, togglebuttonSelector)
+  console.log(`[togglebutton]: Adding toggle buttons to ${itemsToToggle.length} items`)
   // Add the button to each admonition and hook up a callback to toggle visibility
   itemsToToggle.forEach((item, index) => {
+    // Generate unique IDs for this item
     var toggleID = `toggle-${index}`;
     var buttonID = `button-${toggleID}`;
-    var collapseButton = `
-      <button id="${buttonID}" class="toggle-button" data-target="${toggleID}" data-button="${buttonID}">
-          <div class="bar horizontal" data-button="${buttonID}"></div>
-          <div class="bar vertical" data-button="${buttonID}"></div>
-      </button>`;
 
     item.setAttribute('id', toggleID);
-
     if (!item.classList.contains("toggle")){
       item.classList.add("toggle");
     }
 
-    // If it's an admonition block, then we'll add the button inside
+    // This is the button that will be added to each item to trigger the toggle
+    var collapseButton = `
+      <button id="${buttonID}" class="toggle-button" data-target="${toggleID}" data-button="${buttonID}">
+          <div class="bar horizontal" data-button="${buttonID}"></div>
+          <div class="bar vertical" data-button="${buttonID}"></div>
+      </button>`;
+
+    // Add the button HTML to this element and assign it as a variable to use later
     if (item.classList.contains("admonition")) {
+      // If it's an admonition block, then we'll add the button inside
       item.insertAdjacentHTML("afterbegin", collapseButton);
     } else {
       item.insertAdjacentHTML('beforebegin', collapseButton);
     }
-
     thisButton = document.getElementById(buttonID);
-    thisButton.on('click', toggleClickHandler);
+    
+    // Add click handlers for the button + admonition title (if admonition)
+    thisButton.addEventListener('click', toggleClickHandler);
+
     // If admonition has a single direct-child title make it clickable.
     admonitionTitle = document.querySelector(`#${toggleID} > .admonition-title`)
     if (admonitionTitle) {
-      admonitionTitle.on('click', toggleClickHandler);
+      admonitionTitle.addEventListener('click', toggleClickHandler);
       admonitionTitle.dataset.target = toggleID
       admonitionTitle.dataset.button = buttonID
     }
+
+    // Now hide the item for this toggle button unless explicitly noted to show
     if (!item.classList.contains("toggle-shown")) {
-      toggleHidden(thisButton[0]);
+      toggleHidden(thisButton);
     }
   })
 };

tox.ini

@@ -0,0 +1,29 @@
+# To use tox, see https://tox.readthedocs.io
+
+[tox]
+envlist = py39-sphinx3
+
+[testenv]
+# only recreate the environment when we use `tox -r`
+recreate = false
+
+[testenv:docs]
+description = Build the documentation
+extras =
+    sphinx
+commands =
+    sphinx-build \
+        -n -b {posargs:html} docs/ docs/_build/{posargs:html}
+
+[testenv:docs-live]
+description = Auto-build and preview the documentation in the browser
+deps =
+    sphinx-autobuild
+extras =
+    sphinx
+commands =
+    sphinx-autobuild \
+        --re-ignore _build/.* \
+        --watch sphinx_togglebutton \
+        --port 0 --open-browser \
+        -n -b {posargs:html} docs/ docs/_build/{posargs:html}