c81d1c40de
Once we get a response from our XHR request update the URL to a permalink to that code. This CL comes after https://codereview.chromium.org/235373002/ BUG=skia: R=mtklein@google.com Author: jcgregorio@google.com Review URL: https://codereview.chromium.org/235323006 git-svn-id: http://skia.googlecode.com/svn/trunk@14187 2bbb7eff-a529-9590-31e7-b0007b416f81
94 lines
2.4 KiB
HTML
94 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Skia WebTry</title>
|
|
<meta charset='utf-8' />
|
|
<style type="text/css" media="screen">
|
|
.waiting, .waiting * {
|
|
cursor: wait;
|
|
}
|
|
textarea {
|
|
margin-left: 0;
|
|
border: solid 1px #ccc;
|
|
color: green;
|
|
}
|
|
pre, code {
|
|
padding: 0;
|
|
color: green;
|
|
}
|
|
#output {
|
|
color: #333;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<pre><code>#include "SkCanvas.h"
|
|
|
|
void draw(SkCanvas* canvas) {
|
|
<textarea name='code' id='code' rows='15' cols='80'>{{.UserCode}}</textarea>
|
|
}
|
|
</code></pre>
|
|
|
|
<input type='button' value='Run' id='run'>
|
|
|
|
<p>Image appears here:</p>
|
|
<img id='img' src=''/>
|
|
|
|
<pre><code id='output'></code></pre>
|
|
|
|
<script type='text/javascript' charset='utf-8'>
|
|
var run = document.getElementById('run');
|
|
var code = document.getElementById('code');
|
|
var output = document.getElementById('output');
|
|
var img = document.getElementById('img');
|
|
|
|
function beginWait() {
|
|
document.body.classList.add('waiting');
|
|
run.disabled = true;
|
|
}
|
|
|
|
function endWait() {
|
|
document.body.classList.remove('waiting');
|
|
run.disabled = false;
|
|
}
|
|
|
|
function codeComplete(e) {
|
|
// The response is JSON of the form:
|
|
// {
|
|
// "message": "you had an error...",
|
|
// "img": "<base64 encoded image but only on success>"
|
|
// }
|
|
//
|
|
// The img is optional and only appears if there is a valid
|
|
// image to display.
|
|
endWait();
|
|
console.log(e.target.response);
|
|
body = JSON.parse(e.target.response);
|
|
output.innerText = body.message;
|
|
if (body.hasOwnProperty('img')) {
|
|
img.src = 'data:image/png;base64,' + body.img;
|
|
} else {
|
|
img.src = '';
|
|
}
|
|
window.history.pushState(null, null, "/c/" + body.hash);
|
|
}
|
|
|
|
function codeError(e) {
|
|
endWait();
|
|
alert('Something bad happened: ' + e);
|
|
}
|
|
|
|
run.addEventListener('click', onSubmitCode);
|
|
function onSubmitCode() {
|
|
beginWait();
|
|
var req = new XMLHttpRequest();
|
|
req.addEventListener('load', codeComplete);
|
|
req.addEventListener('error', codeError);
|
|
req.overrideMimeType('application/json');
|
|
req.open('POST', '.', true);
|
|
req.send(code.value);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|