testing custom launch button

Author: MarkMelotto

book/_static/custom_launch_button.js

@@ -1,45 +1,24 @@
 window.addEventListener("DOMContentLoaded", () => {
-  // Create modal HTML
-  const modalHTML = `
-    <div id="customModal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index:1000;">
-      <div style="background:white; padding:20px; max-width:400px; margin:100px auto; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,0.3);">
-        <h3>Enter your JupyterHub URL</h3>
-        <input type="text" id="jupyterUrlInput" placeholder="https://yourhub.domain" style="width:100%; padding:8px; margin-top:10px;"/>
-        <div style="margin-top:15px; text-align:right;">
-          <button id="launchBtn" style="padding:8px 12px; margin-right:10px;">Launch</button>
-          <button id="cancelBtn" style="padding:8px 12px;">Cancel</button>
-        </div>
-      </div>
-    </div>
-  `;
-  document.body.insertAdjacentHTML("beforeend", modalHTML);
+  const targetContainer = document.querySelector(".launch-buttons");
 
-  const launchButton = document.querySelector(".jb-button.launch-button");
-  const modal = document.getElementById("customModal");
-  const input = document.getElementById("jupyterUrlInput");
-  const launchBtn = document.getElementById("launchBtn");
-  const cancelBtn = document.getElementById("cancelBtn");
+  if (targetContainer) {
+    // Create the new button
+    const customButton = document.createElement("a");
+    customButton.textContent = "Launch Custom JupyterHub";
+    customButton.className = "jb-button custom-launch-button";
+    customButton.style.marginLeft = "10px";
+    customButton.style.backgroundColor = "#007ACC";
+    customButton.style.color = "white";
+    customButton.style.padding = "6px 12px";
+    customButton.style.borderRadius = "4px";
+    customButton.style.textDecoration = "none";
 
-  if (launchButton) {
-    launchButton.addEventListener("click", (event) => {
-      event.preventDefault();
-      modal.style.display = "block";
-    });
-  }
-
-  launchBtn.addEventListener("click", () => {
-    const url = input.value.trim();
-    if (url.startsWith("https://")) {
-      window.open(`${url}/lab`, "_blank");
-      modal.style.display = "none";
-      input.value = "";
-    } else {
-      alert("Please enter a valid HTTPS URL.");
-    }
-  });
+    // Set your custom URL here
+    const customUrl = "https://your-custom-jupyterhub-url/lab";
+    customButton.href = customUrl;
+    customButton.target = "_blank";
 
-  cancelBtn.addEventListener("click", () => {
-    modal.style.display = "none";
-    input.value = "";
-  });
+    // Add the button to the page
+    targetContainer.appendChild(customButton);
+  }
 });

book/_static/custom_launch_button_old.js

@@ -0,0 +1,45 @@
+window.addEventListener("DOMContentLoaded", () => {
+  // Create modal HTML
+  const modalHTML = `
+    <div id="customModal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index:1000;">
+      <div style="background:white; padding:20px; max-width:400px; margin:100px auto; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,0.3);">
+        <h3>Enter your JupyterHub URL</h3>
+        <input type="text" id="jupyterUrlInput" placeholder="https://yourhub.domain" style="width:100%; padding:8px; margin-top:10px;"/>
+        <div style="margin-top:15px; text-align:right;">
+          <button id="launchBtn" style="padding:8px 12px; margin-right:10px;">Launch</button>
+          <button id="cancelBtn" style="padding:8px 12px;">Cancel</button>
+        </div>
+      </div>
+    </div>
+  `;
+  document.body.insertAdjacentHTML("beforeend", modalHTML);
+
+  const launchButton = document.querySelector(".jb-button.launch-button");
+  const modal = document.getElementById("customModal");
+  const input = document.getElementById("jupyterUrlInput");
+  const launchBtn = document.getElementById("launchBtn");
+  const cancelBtn = document.getElementById("cancelBtn");
+
+  if (launchButton) {
+    launchButton.addEventListener("click", (event) => {
+      event.preventDefault();
+      modal.style.display = "block";
+    });
+  }
+
+  launchBtn.addEventListener("click", () => {
+    const url = input.value.trim();
+    if (url.startsWith("https://")) {
+      window.open(`${url}/lab`, "_blank");
+      modal.style.display = "none";
+      input.value = "";
+    } else {
+      alert("Please enter a valid HTTPS URL.");
+    }
+  });
+
+  cancelBtn.addEventListener("click", () => {
+    modal.style.display = "none";
+    input.value = "";
+  });
+});