123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127 |
- /**
- * Add attributes to Thebe blocks to initialize thebe properly
- */
- 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];
- // 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) => {
- button.innerHTML = `
- <div class="spinner">
- <div class="rect1"></div>
- <div class="rect2"></div>
- <div class="rect3"></div>
- <div class="rect4"></div>
- </div>
- <span class="loading-text"></span>`;
- });
- // Set thebe event hooks
- var thebeStatus;
- 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>"
- );
- // Now update our thebe status
- thebeStatus = data.status;
- // Find any cells with an initialization tag and ask thebe to run them when ready
- if (data.status === "ready") {
- var thebeInitCells = document.querySelectorAll(
- ".thebe-init, .tag_thebe-init"
- );
- thebeInitCells.forEach((cell) => {
- console.log("Initializing Thebe with cell: " + cell.id);
- cell.querySelector(".thebelab-run-button").click();
- });
- }
- });
- };
- /**
- * Update the page DOM to use Thebe elements
- */
- var modifyDOMForThebe = () => {
- // Find all code cells, replace with Thebe interactive code cells
- const codeCells = document.querySelectorAll(thebe_selector);
- codeCells.forEach((codeCell, index) => {
- const codeCellId = (index) => `codecell${index}`;
- codeCell.id = codeCellId(index);
- codeCellText = codeCell.querySelector(thebe_selector_input);
- codeCellOutput = codeCell.querySelector(thebe_selector_output);
- // Clean up the language to make it work w/ CodeMirror and add it to the cell
- dataLanguage = detectLanguage(kernelName);
- // Re-arrange the cell and add metadata
- if (codeCellText) {
- codeCellText.setAttribute("data-language", dataLanguage);
- codeCellText.setAttribute("data-executable", "true");
- // If we had an output, insert it just after the `pre` cell
- if (codeCellOutput) {
- $(codeCellOutput).attr("data-output", "");
- $(codeCellOutput).insertAfter(codeCellText);
- }
- }
- // Remove sphinx-copybutton blocks, which are common in Sphinx
- codeCell.querySelectorAll("button.copybtn").forEach((el) => {
- el.remove();
- });
- });
- };
- 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...");
- const script = document.createElement("script");
- script.src = `${THEBE_JS_URL}`;
- document.head.appendChild(script);
- // Runs once the script has finished loading
- script.addEventListener("load", () => {
- console.log("[sphinx-thebe]: Finished loading thebe from CDN...");
- configureThebe();
- modifyDOMForThebe();
- thebelab.bootstrap();
- });
- } else {
- console.log(
- "[sphinx-thebe]: thebe already loaded, not loading from CDN..."
- );
- configureThebe();
- modifyDOMForThebe();
- thebelab.bootstrap();
- }
- };
- // Helper function to munge the language name
- var detectLanguage = (language) => {
- if (language.indexOf("python") > -1) {
- language = "python";
- } else if (language === "ir") {
- language = "r";
- }
- return language;
- };
|