-
Notifications
You must be signed in to change notification settings - Fork 9
/
examples.js
130 lines (122 loc) · 5.11 KB
/
examples.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
const React = require('react');
const CompLibrary = require('../../core/CompLibrary.js');
const Container = CompLibrary.Container;
const MarkdownBlock = CompLibrary.MarkdownBlock;
const EXAMPLES = [
{
title: 'Basic example',
description: 'Embed a particular notebook on an HTML page.',
html: `<div id="container"></div>`,
js: `
WolframNotebookEmbedder.embed(
'https://www.wolframcloud.com/obj/jpoeschko/Public/BasicExample.nb',
document.getElementById('container')
);
`
},
{
title: 'Seamless embedding dimensions',
description: 'By default, embedded notebooks adapt to the width available to their container node, and adjust the height of the container node so that the whole notebook fits without requiring a vertical scrollbar. You can change that by passing different values for `width` and `maxHeight` to `WolframNotebookEmbedder.embed`, e.g. to set a fixed width and maximum height.',
html: `<div id="container"></div>
<p>This text appears right after the embedded notebook content, even if the notebook does not need the full maximum height.</p>`,
js: `
WolframNotebookEmbedder.embed(
'https://www.wolframcloud.com/obj/jpoeschko/Public/BasicExample.nb',
document.getElementById('container'),
{width: 400, maxHeight: 500}
);
`
},
{
title: 'Programmatic control of Manipulate variables',
description: 'Render a notebook specified in an input field and control a [Manipulate](https://reference.wolfram.com/language/ref/Manipulate.html) variable in its last cell.',
html: `
<p>
Enter the URL of a cloud object:
<input id="path" style="width:300px" value="https://www.wolframcloud.com/obj/jpoeschko/Public/Example.nb" />
<button onclick="embedNotebook()">Embed Notebook</button>
</p>
<p>
If the notebook's last cell contains a <code>Manipulate</code> with a variable <code>x</code>, this will reset it to 0:
<button onclick="resetX()">Reset <code>x</code></button>
</p>
<div id="container"></div>
`,
js: `
let embedding = null;
function embedNotebook() {
const url = document.getElementById('path').value;
embedding = WolframNotebookEmbedder.embed(url, document.getElementById('container'), {allowInteract: true});
}
function resetX() {
if (embedding) {
embedding.then(nb => {
nb.getCells().then(({cells}) => {
if (cells) {
const lastCell = cells[cells.length - 1];
return nb.setDynamicModuleVariable({
cellId: lastCell.id,
name: 'x$$',
value: 0
});
}
})
})
}
}
`
}
];
function Example(props) {
// See
// https://blog.codepen.io/documentation/prefill-embeds/
// https://blog.codepen.io/2019/01/17/introducing-prefill-embeds/
// for details about the CodePen Prefill Embed API.
const prefill = {
title: props.title,
description: props.description,
tags: ['wolfram', 'notebook', 'embedding', 'wolfram-notebook-embedder'],
scripts: ["https://unpkg.com/wolfram-notebook-embedder@0.1/dist/wolfram-notebook-embedder.min.js"]
};
return (
<React.Fragment>
<h2>{props.title}</h2>
<MarkdownBlock>{props.description}</MarkdownBlock>
<div
className="codepen"
data-prefill={JSON.stringify(prefill)}
data-height="400"
data-editable="true"
data-default-tab="js,result"
>
<pre data-lang="html">{props.html.trim()}</pre>
<pre data-lang="js">{props.js.trim()}</pre>
</div>
</React.Fragment>
);
}
function Help(props) {
const {config: siteConfig, language = ''} = props;
const {baseUrl, docsUrl} = siteConfig;
const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;
const langPart = `${language ? `${language}/` : ''}`;
const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`;
return (
<div className="docMainWrapper wrapper">
<Container className="mainContainer documentContainer postContainer">
<div className="post">
<header className="postHeader">
<h1>Examples</h1>
</header>
<p>These examples are live demos using the Wolfram Notebook Embedder library.
They import the library from a CDN behind the scenes, which exposes the global <code>WolframNotebookEmbedder</code> JavaScript variable.
In your own project, you will probably want to install the library using npm or Yarn and import it locally,
as described in the <a href={docUrl('GettingStarted')}>Getting Started documentation</a>.</p>
{EXAMPLES.map(data => <Example key={data.title} {...data} />)}
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</div>
</Container>
</div>
);
}
module.exports = Help;