Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
79 lines (71 sloc) 1.9 KB
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CodeMirror Movie</title>
<link rel="stylesheet" href="./node_modules/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="./lib/movie.css">
<script src="./node_modules/codemirror/lib/codemirror.js"></script>
<script src="./node_modules/codemirror/mode/css/css.js"></script>
<script src="./node_modules/codemirror/mode/xml/xml.js"></script>
<script src="./dist/movie.js"></script>
<style type="text/css">
.CodeMirror {
font-size: 12px;
/* background: #f5f5f5; */
border: 1px solid #e3e3e3;
}
</style>
</head>
<body>
<h1>CodeMirror Movie</h1>
<!--
In textarea, separate initial editor content and movie scenario
with @@@ separator.
Use | character to indicate initial caret position
-->
<textarea id="code" name="code">
&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;header&gt;
|
&lt;/header&gt;
&lt;/body&gt;
&lt;/html&gt;
@@@
# Lines started with # sign are comments and ignored by movie parser
prompt: Hello world
# Use ::: separator to create outline item for current action
type: Hello world ::: Typing “Hello world”
wait: 1000
# Passing command options as JS object
tooltip: {text: "Sample tooltip", wait: 2000}
wait: 600
# Perform CodeMirror pre-defined command
run: {command: "goWordLeft", times: 2} ::: Move word left
</textarea>
<button style="font-size: 2em;margin: 10px auto;display: block;">Play</button>
<script>
var movie = CodeMirror.movie('code');
// Create simple UI to interact with movie
var btn = document.getElementsByTagName('button')[0];
btn.onclick = function() {
if (movie.state == 'play') {
movie.pause();
this.innerHTML = 'Play';
} else {
movie.play();
this.innerHTML = 'Pause';
}
};
// Listen to events to change UI state
movie.on('stop', function(name) {
btn.innerHTML = 'Play';
});
</script>
</body>
</html>