thebelab.html

<!-- Include Thebelab for interactive code if it's enabled -->
{% if site.use_thebelab_button %}
<script type="text/x-thebe-config">
    {
      requestKernel: true,
      binderOptions: {
        repo: '{{ site.binder_repo_org }}/{{ site.binder_repo_name }}',
        ref: '{{ site.binder_repo_branch }}',
      }
    }
</script>
<script src="https://unpkg.com/thebelab@0.3.3/lib/index.js"></script>
<script>
    /**
     * Add attributes to Thebelab blocks
     */
    
    const initThebelab = () => {
        const addThebelabToCodeCells = () => {
            console.log("Adding thebelab to code cells...");
            // If Thebelab hasn't loaded, wait a bit and try again. This
            // happens because we load ClipboardJS asynchronously.
            if (window.thebelab === undefined) {
                setTimeout(addThebelabToCodeCells, 250)
            return
            }
    
            // If we already detect a Thebelab cell, don't re-run
            if (document.querySelectorAll('div.thebelab-cell').length > 0) {
                return;
            }
            
            // Find all code cells, replace with Thebelab interactive code cells
            const codeCells = document.querySelectorAll('.input_area pre')
            codeCells.forEach((codeCell, index) => {
                const id = codeCellId(index)
                codeCell.setAttribute('data-executable', 'true')

                // Figure out the language it uses and add this too
                var parentDiv = codeCell.parentElement.parentElement;
                var arrayLength = parentDiv.classList.length;
                for (var ii = 0; ii < arrayLength; ii++) {
                    var parts = parentDiv.classList[ii].split('language-');
                    if (parts.length === 2) {
                        // If found, assign dataLanguage and break the loop
                        var dataLanguage = parts[1];
                        break;
                    }
                }
                codeCell.setAttribute('data-language', dataLanguage)

                // If the code cell is hidden, show it
                var inputCheckbox = document.querySelector(`input#hidebtn${codeCell.id}`);
                if (inputCheckbox !== null) {
                    setCodeCellVisibility(inputCheckbox, 'visible');
                }
            });

            // Init thebelab
            thebelab.bootstrap();
    
            // Remove copy buttons since they won't work anymore
            const copyButtons = document.querySelectorAll('.copybtn')
            copyButtons.forEach((copyButton, index) => {
                copyButton.remove();
            });

            // Remove outputs since they'll be stale
            const outputs = document.querySelectorAll('.output *, .output')
            outputs.forEach((output, index) => {
                output.remove();
            });
        }
    
        // Add event listener for the function to modify code cells
        const thebelabButton = document.getElementById('interact-button-thebelab');
        if (thebelabButton === null) {
            setTimeout(initThebelab, 250)
        return
        };
        thebelabButton.addEventListener('click', addThebelabToCodeCells);
    }
    
    // Initialize Thebelab
    initFunction(initThebelab);
</script>
{% endif %}