-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsimulator-embed.html
108 lines (94 loc) · 4.99 KB
/
simulator-embed.html
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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>simulator</title>
<link rel="stylesheet" href="styles.css">
<script src="src/ace-src-min/ace.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script src="src/mode-dfa.js" type="text/javascript" charset="utf-8"></script>
<script src="src/mode-nfa.js" type="text/javascript" charset="utf-8"></script>
<script src="src/mode-regex.js" type="text/javascript" charset="utf-8"></script>
<script src="src/mode-cfg.js" type="text/javascript" charset="utf-8"></script>
<script src="src/mode-tm.js" type="text/javascript" charset="utf-8"></script>
<script src="src/get-ace-themes.js" type="text/javascript" charset="utf-8"></script>
<!-- normally would import a javascript file compiled from Elm, but the
weird "_compile" line below means I can use elm-reactor with this file
The next script inclusion should fail in development since I keep
the JS file out of src/ and instead build it in build/ -->
<script src="src/Main.js"></script>
<!-- got the next line from https://blog.ilias.xyz/elm-reactor-and-custom-html-9e7143553807
The next script inclusion should fail in production since I don't copy
the elm file to the server. -->
<script src="/_compile/src/Main.elm"></script>
<script src="src/default_model.js" type="text/javascript" charset="utf-8"></script>
<script>
// localStorage.clear(); // this is for debugging when bad model is stored
// read model from local storage to initialize Elm Main program
const storageKey = "elm-model-embedded";
const modelString = localStorage.getItem(storageKey);
defaultModel.embedded = true;
const defaultModelString = JSON.stringify(defaultModel, null, 1);
var model;
if (modelString !== null) { // restore from localStorage if possible
try {
model = JSON.parse(modelString);
console.log("successfully loaded stored model: " + JSON.stringify(model, null, 1));
model.embedded = true;
} catch (err) {
console.log("error with trying to load stored model: " + err);
console.log("loading default model: " + defaultModelString);
model = defaultModel;
}
} else { // otherwise use default model
console.log("no model stored locally; using default model: " + defaultModelString);
model = defaultModel;
}
var app;
try {
app = Elm.Main.fullscreen(model);
} catch (err) {
console.log("error with trying to start program with stored model: " + JSON.stringify(model, null, 1));
console.log("using default model: " + defaultModelString);
model = defaultModel;
app = Elm.Main.fullscreen(model);
}
// set up port to store model in localStorage
app.ports.save.subscribe(function(model) {
const modelString = JSON.stringify(model);
localStorage.setItem(storageKey, modelString);
});
// set up communication with Kodethon
// Setup postMessage listeners
if (window.addEventListener) {
window.addEventListener("message", postMessageHandler);
} else {
window.attachEvent("onmessage", postMessageHandler);
}
// Handle when a child frame sends a message back
function postMessageHandler(event) {
console.log('event triggered, event.data: ' + JSON.stringify(event.data, null, 1));
switch(event.data.event_type) {
case 'editor.change': // when user changes editor contents
case 'editor.contents': // on initial load of editor
var new_contents = event.data.contents;
// send this to Elm through a port
app.ports.newAutomatonTextFromEditor.send(new_contents);
console.log('new_contents: ' + JSON.stringify(new_contents, null, 1));
}
}
// set up port to replace editor contents
console.log(JSON.stringify(app.ports, null, 1));
app.ports.replaceAutomatonText.subscribe(function(newText) {
window.parent.postMessage({
event_type: 'editor.contents',
contents: newText
}, '*');
console.log('Elm requesting to change editor contents to: ' + JSON.stringify(newText, null, 1));
});
</script>
<!-- set up ports to let Elm Main read uploaded file -->
<script src="src/file-upload.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>