8 éve · c4df324038
--- a/spine-ts/webgl/example/js/ace.js
+++ b/spine-ts/webgl/example/js/ace.js
--- a/spine-ts/webgl/example/js/mode-html.js
+++ b/spine-ts/webgl/example/js/mode-html.js
--- a/spine-ts/webgl/example/js/mode-javascript.js
+++ b/spine-ts/webgl/example/js/mode-javascript.js
--- a/spine-ts/webgl/example/js/theme-monokai.js
+++ b/spine-ts/webgl/example/js/theme-monokai.js
--- a/spine-ts/webgl/example/js/worker-html.js
+++ b/spine-ts/webgl/example/js/worker-html.js
--- a/spine-ts/webgl/example/js/worker-javascript.js
+++ b/spine-ts/webgl/example/js/worker-javascript.js
--- a/spine-ts/webgl/example/tutorial.html
+++ b/spine-ts/webgl/example/tutorial.html
@@ -0,0 +1,77 @@
 
				+<html>
			
 
				+<script src="../../build/spine-webgl.js"></script>
			
 
				+<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
			
 
				+<style>
			
 
				+	/* Dead Simple Grid (c) 2015 Vladimir Agafonkin */
			
 
				+
			
 
				+	.row .row { margin:  0 -1.5em; }
			
 
				+	.col      { padding: 0  1.5em; }
			
 
				+
			
 
				+	.row:after {
			
 
				+		content: "";
			
 
				+		clear: both;
			
 
				+		display: table;
			
 
				+	}
			
 
				+
			
 
				+	@media only screen { .col {
			
 
				+		float: left;
			
 
				+		width: 100%;
			
 
				+		box-sizing: border-box;
			
 
				+	}}
			
 
				+
			
 
				+	@media only screen and (min-width: 30em) {
			
 
				+		.content { width: 60%; height: 100%; padding: 0 }
			
 
				+		.sidebar { width: 40%; height: 100%; padding: 0 }
			
 
				+	}
			
 
				+	body {
			
 
				+		margin: 0;
			
 
				+	}
			
 
				+	iframe {
			
 
				+		width: 100%;
			
 
				+		height: 100%;
			
 
				+		border:none;
			
 
				+	}
			
 
				+	.panel {
			
 
				+		width: 100%;
			
 
				+		height: 50%;
			
 
				+	}
			
 
				+	.buttons {
			
 
				+		position: absolute;
			
 
				+		top: 5; left: 5;
			
 
				+	}
			
 
				+</style>
			
 
				+<body>
			
 
				+<div class="buttons">
			
 
				+	<button id="playButton">Run</button>
			
 
				+	<button id="stopButton">Stop</button>
			
 
				+</div>
			
 
				+
			
 
				+<div class="row">
			
 
				+	<div class="col content">
			
 
				+		<iframe id="iframe"></iframe>
			
 
				+	</div>
			
 
				+	<div class="col sidebar">
			
 
				+		<div id="codeJs" class="panel"></div>
			
 
				+		<div id="codeHtml" class="panel"></div>
			
 
				+	</div>
			
 
				+</div>
			
 
				+</body>
			
 
				+
			
 
				+<script src="js/ace.js" type="text/javascript" charset="utf-8"></script>
			
 
				+<script>
			
 
				+	var editorJs = ace.edit("codeJs");
			
 
				+	editorJs.setTheme("ace/theme/monokai");
			
 
				+	editorJs.getSession().setMode("ace/mode/javascript");
			
 
				+	editorJs.setValue("");
			
 
				+
			
 
				+	var editorHtml = ace.edit("codeHtml");
			
 
				+	editorHtml.setTheme("ace/theme/monokai");
			
 
				+	editorHtml.getSession().setMode("ace/mode/html");
			
 
				+	editorHtml.setValue('<canvas style="background: #cccccc; width: 100%; height: 100%;"></canvas><');
			
 
				+
			
 
				+	$("#playButton").click(function() {
			
 
				+		var iframe = document.getElementById("iframe");
			
 
				+		iframe.srcdoc = '<html><body>' + editorHtml.getValue() + '<script>' + editorJs.getValue() + "</script></body></html>";
			
 
				+	});
			
 
				+</script>
			
 
				+</html>