fix: update usage of JQuery etc. (#70)

* fix: separate JS lines by ; * fix: do not use JQuery
executablebooks · Feb 7, 2024 · 60aa219 · 60aa219
1 parent ec207f8
commit 60aa219
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 20 deletions.
diff --git a/src/sphinx_thebe/__init__.py b/src/sphinx_thebe/__init__.py
@@ -73,13 +73,13 @@ def init_thebe_core(app, env, docnames):
 
     # Add configuration variables
     THEBE_JS_URL = f"https://unpkg.com/thebe@{THEBE_VERSION}/lib/index.js"
-    thebe_config = f"""\
-        const THEBE_JS_URL = "{ THEBE_JS_URL }"
-        const thebe_selector = "{ app.config.thebe_config['selector'] }"
-        const thebe_selector_input = "{ app.config.thebe_config['selector_input'] }"
-        const thebe_selector_output = "{ app.config.thebe_config['selector_output'] }"
-    """
-    app.add_js_file(None, body=dedent(thebe_config))
+    thebe_config_lines = [
+        f"const THEBE_JS_URL = \"{ THEBE_JS_URL }\"",
+        f"const thebe_selector = \"{ app.config.thebe_config['selector'] }\"",
+        f"const thebe_selector_input = \"{ app.config.thebe_config['selector_input'] }\"",
+        f"const thebe_selector_output = \"{ app.config.thebe_config['selector_output'] }\""
+    ]
+    app.add_js_file(None, body='; '.join(thebe_config_lines))
     app.add_js_file(filename="sphinx-thebe.js", **{"async": "async"})
 
     if config_thebe.get("always_load") is True:

diff --git a/src/sphinx_thebe/_static/sphinx-thebe.js b/src/sphinx_thebe/_static/sphinx-thebe.js
@@ -4,15 +4,15 @@
 var configureThebe = () => {
   // Load thebe config in case we want to update it as some point
   console.log("[sphinx-thebe]: Loading thebe config...");
-  thebe_config = $('script[type="text/x-thebe-config"]')[0];
+  thebe_config = document.querySelector("script[type=\"text/x-thebe-config\"]");
 
   // If we already detect a Thebe cell, don't re-run
   if (document.querySelectorAll("div.thebe-cell").length > 0) {
     return;
   }
 
   // Update thebe buttons with loading message
-  $(".thebe-launch-button").each((ii, button) => {
+  document.querySelectorAll(".thebe-launch-button").forEach((button) => {
     button.innerHTML = `
         <div class="spinner">
             <div class="rect1"></div>
@@ -28,14 +28,15 @@ var configureThebe = () => {
   thebelab.on("status", function (evt, data) {
     console.log("Status changed:", data.status, data.message);
 
-    $(".thebe-launch-button ")
-      .removeClass("thebe-status-" + thebeStatus)
-      .addClass("thebe-status-" + data.status)
-      .find(".loading-text")
-      .html(
-        "<span class='launch_msg'>Launching from mybinder.org: </span><span class='status'>" +
-          data.status +
-          "</span>"
+    const button = document.querySelector(".thebe-launch-button ");
+    button.classList.replace(
+	    `thebe-status-${thebeStatus}`, 
+	    `thebe-status-${data.status}`
+    )
+    button.querySelector(".loading-text")
+      .innerHTML = (
+        `<span class='launch_msg'>Launching from mybinder.org: </span>
+	 <span class='status'>${data.status}</span>`
       );
 
     // Now update our thebe status
@@ -76,8 +77,8 @@ var modifyDOMForThebe = () => {
 
       // If we had an output, insert it just after the `pre` cell
       if (codeCellOutput) {
-        $(codeCellOutput).attr("data-output", "");
-        $(codeCellOutput).insertAfter(codeCellText);
+        codeCellOutput.setAttribute("data-output", "");
+        codeCellText.insertAdjacentElement('afterend', codeCellOutput);
       }
     }
 
@@ -92,7 +93,7 @@ var initThebe = () => {
   // Load thebe dynamically if it's not already loaded
   if (typeof thebelab === "undefined") {
     console.log("[sphinx-thebe]: Loading thebe from CDN...");
-    $(".thebe-launch-button ").text("Loading thebe from CDN...");
+    document.querySelector(".thebe-launch-button ").innerText = "Loading thebe from CDN...";
 
     const script = document.createElement("script");
     script.src = `${THEBE_JS_URL}`;