examples/dimensions.html

<html>
<head>
    <title>Dimensions examples</title>
    <style>
        #path {
            width: 500px;
        }
        #containerFixedCSS {
            width: 500px;
            height: 400px;
        }
        #containerRelativeCSS {
            width: 100%;
            height: 75%;
        }
    </style>
</head>
<body>

<h1>Dimensions examples</h1>
<p>
    Enter the URL of a cloud object:
    <input id="path" value="https://www.wolframcloud.com/obj/jpoeschko/Public/Example.nb" />
    <button onclick="embedNotebooks()">Embed Notebook</button>
</p>

<h2>Infinite height granted to the notebook, width adapting to container node (the default)</h2>
<p>Current dimensions: <span id="dimensionsInfiniteNB"></span></p>
<div id="containerInfiniteNB"></div>

<h2>Fixed maximum dimensions granted to the notebook</h2>
<p>
    Width: <input onchange="updateNBDimensions()" oninput="updateNBDimensions()" id="nbWidth" value="300" />
    Maximum height: <input onchange="updateNBDimensions()" oninput="updateNBDimensions()" id="nbHeight" value="300" />
</p>
<p>Current dimensions: <span id="dimensionsFixedNB"></span></p>
<div id="containerFixedNB"></div>

<h2>Fixed dimensions set in CSS, notebook adapting accordingly</h2>
<p>Current dimensions: <span id="dimensionsFixedCSS"></span></p>
<div id="containerFixedCSS"></div>

<h2>Relative dimensions set in CSS, notebook adapting accordingly</h2>
<p>Current dimensions: <span id="dimensionsRelativeCSS"></span></p>
<div id="containerRelativeCSS"></div>

<script src="./dist/wolfram-notebook-embedder.js"></script>
<script>
    let fixedEmbedding = null;
    let fixedWidth = 300;
    let fixedHeight = 300;

    function embedNotebooks() {
        embedNotebook('containerInfiniteNB', 'dimensionsInfiniteNB', null, Infinity, true);
        fixedEmbedding = embedNotebook('containerFixedNB', 'dimensionsFixedNB', fixedWidth, fixedHeight, true);
        embedNotebook('containerFixedCSS', 'dimensionsFixedCSS', null, null, true);
        embedNotebook('containerRelativeCSS', 'dimensionsRelativeCSS', null, null, true);
    }

    function embedNotebook(containerID, dimensionsID, width, maxHeight, showBorder) {
        const url = document.getElementById('path').value;
        return WolframNotebookEmbedder.embed(url, document.getElementById(containerID), {
            width: width,
            maxHeight: maxHeight,
            showBorder: showBorder
        }).then(nb => {
            nb.addEventListener('resize', dimensions => {
                const span = document.getElementById(dimensionsID);
                span.innerHTML = dimensions.width + ' x ' + dimensions.height;
            });
            return nb;
        });
    }

    function updateNBDimensions() {
        const width = Number.parseInt(document.getElementById('nbWidth').value, 10);
        if (width !== Number.NaN) {
            fixedWidth = width;
        }
        const height = Number.parseInt(document.getElementById('nbHeight').value, 10);
        if (height !== Number.NaN) {
            fixedHeight = height;
        }
        fixedEmbedding.then(nb => {
            nb.setAttributes({width: fixedWidth, maxHeight: fixedHeight});
        });
    }
</script>

</body>
</html>