Skip to content

Commit d666f48

Browse files
MarkMelottoMarkMelotto
committed
testing custom launch button
1 parent da55e45 commit d666f48

File tree

2 files changed

+60
-45
lines changed

2 files changed

+60
-45
lines changed

‎book/_static/custom_launch_button.js‎

Lines changed: 43 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,24 @@
11
window.addEventListener("DOMContentLoaded", () => {
2-
const header = document.querySelector("header");
2+
// Create the modal HTML
3+
const modalHTML = `
4+
<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;">
5+
<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);">
6+
<h3 style="margin-top:0;">Enter your JupyterHub URL</h3>
7+
<input type="text" id="jupyterUrlInput" placeholder="https://yourhub.domain" style="width:100%; padding:8px; margin-top:10px;"/>
8+
<div style="margin-top:15px; text-align:right;">
9+
<button id="launchBtn" style="padding:8px 12px; margin-right:10px;">Launch</button>
10+
<button id="cancelBtn" style="padding:8px 12px;">Cancel</button>
11+
</div>
12+
</div>
13+
</div>
14+
`;
15+
document.body.insertAdjacentHTML("beforeend", modalHTML);
316

17+
// Create the custom button
18+
const header = document.querySelector("header");
419
if (header) {
520
const customButton = document.createElement("a");
6-
customButton.textContent = "Launch Custom JupyterHub";
21+
customButton.textContent = "🚀 Launch eWaterCycle JupyterHub";
722
customButton.className = "custom-launch-button";
823
customButton.style.backgroundColor = "#007ACC";
924
customButton.style.color = "white";
@@ -12,11 +27,34 @@ window.addEventListener("DOMContentLoaded", () => {
1227
customButton.style.borderRadius = "4px";
1328
customButton.style.textDecoration = "none";
1429
customButton.style.fontWeight = "bold";
30+
customButton.style.cursor = "pointer";
1531

16-
// Set your custom URL here
17-
customButton.href = "https://your-custom-jupyterhub-url/lab";
18-
customButton.target = "_blank";
32+
customButton.addEventListener("click", () => {
33+
document.getElementById("customModal").style.display = "block";
34+
});
1935

2036
header.appendChild(customButton);
2137
}
38+
39+
// Modal button logic
40+
const launchBtn = document.getElementById("launchBtn");
41+
const cancelBtn = document.getElementById("cancelBtn");
42+
const input = document.getElementById("jupyterUrlInput");
43+
const modal = document.getElementById("customModal");
44+
45+
launchBtn.addEventListener("click", () => {
46+
const url = input.value.trim();
47+
if (url.startsWith("https://")) {
48+
window.open(`${url}/lab`, "_blank");
49+
modal.style.display = "none";
50+
input.value = "";
51+
} else {
52+
alert("Please enter a valid HTTPS URL.");
53+
}
54+
});
55+
56+
cancelBtn.addEventListener("click", () => {
57+
modal.style.display = "none";
58+
input.value = "";
59+
});
2260
});

‎book/_static/custom_launch_button_old.js‎

Lines changed: 17 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,22 @@
11
window.addEventListener("DOMContentLoaded", () => {
2-
// Create modal HTML
3-
const modalHTML = `
4-
<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;">
5-
<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);">
6-
<h3>Enter your JupyterHub URL</h3>
7-
<input type="text" id="jupyterUrlInput" placeholder="https://yourhub.domain" style="width:100%; padding:8px; margin-top:10px;"/>
8-
<div style="margin-top:15px; text-align:right;">
9-
<button id="launchBtn" style="padding:8px 12px; margin-right:10px;">Launch</button>
10-
<button id="cancelBtn" style="padding:8px 12px;">Cancel</button>
11-
</div>
12-
</div>
13-
</div>
14-
`;
15-
document.body.insertAdjacentHTML("beforeend", modalHTML);
2+
const header = document.querySelector("header");
163

17-
const launchButton = document.querySelector(".jb-button.launch-button");
18-
const modal = document.getElementById("customModal");
19-
const input = document.getElementById("jupyterUrlInput");
20-
const launchBtn = document.getElementById("launchBtn");
21-
const cancelBtn = document.getElementById("cancelBtn");
4+
if (header) {
5+
const customButton = document.createElement("a");
6+
customButton.textContent = "Launch Custom JupyterHub";
7+
customButton.className = "custom-launch-button";
8+
customButton.style.backgroundColor = "#007ACC";
9+
customButton.style.color = "white";
10+
customButton.style.padding = "6px 12px";
11+
customButton.style.marginLeft = "10px";
12+
customButton.style.borderRadius = "4px";
13+
customButton.style.textDecoration = "none";
14+
customButton.style.fontWeight = "bold";
2215

23-
if (launchButton) {
24-
launchButton.addEventListener("click", (event) => {
25-
event.preventDefault();
26-
modal.style.display = "block";
27-
});
28-
}
29-
30-
launchBtn.addEventListener("click", () => {
31-
const url = input.value.trim();
32-
if (url.startsWith("https://")) {
33-
window.open(`${url}/lab`, "_blank");
34-
modal.style.display = "none";
35-
input.value = "";
36-
} else {
37-
alert("Please enter a valid HTTPS URL.");
38-
}
39-
});
16+
// Set your custom URL here
17+
customButton.href = "https://your-custom-jupyterhub-url/lab";
18+
customButton.target = "_blank";
4019

41-
cancelBtn.addEventListener("click", () => {
42-
modal.style.display = "none";
43-
input.value = "";
44-
});
20+
header.appendChild(customButton);
21+
}
4522
});

0 commit comments

Comments
 (0)