Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(834)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: experimental/webtry/templates/workspace.html

Issue 231853002: Cleaned up the start page, added wait cursor, disabled Run button while waiting for results. (Closed) Base URL: https://skia.googlesource.com/skia.git@master
Patch Set: first pass at workspaces Created 6 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « experimental/webtry/templates/recent.html ('k') | experimental/webtry/webtry.go » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <title>Skia WebTry</title> 4 <title>Workspace</title>
5 <meta charset='utf-8' /> 5 <meta charset='utf-8' />
6 <link rel="stylesheet" href="/css/" type="text/css" media="screen"> 6 <link rel="stylesheet" href="/css/" type="text/css" media="screen">
7 </head> 7 </head>
8 <body> 8 <body>
9 <section id=title> 9 <section id=title>
10 <a href="/">Home</a> 10 <a href="/">Home</a>
11 <a href="/recent">Recent</a> 11 <a href="/recent/">Recent</a>
12 <a href="/w/">Workspace</a>
12 <a href="https://github.com/google/skia/tree/master/experimental/webtry">Cod e</a> 13 <a href="https://github.com/google/skia/tree/master/experimental/webtry">Cod e</a>
13 </section> 14 </section>
14 <section id=content> 15 <section id=content>
16 <h1>Create</h1>
17 {{if .Name}}
15 <pre><code>#include "SkCanvas.h" 18 <pre><code>#include "SkCanvas.h"
16 19
17 void draw(SkCanvas* canvas) { 20 void draw(SkCanvas* canvas) {
18 <textarea name='code' id='code' rows='15' cols='80'>{{.UserCode}}</textarea> 21 <textarea name='code' id='code' rows='15' cols='80'>{{.Code}}</textarea>
19 } 22 }
20 </code></pre> 23 </code></pre>
21 24
22 <input type='button' value='Run' id='run'> 25 <input type='button' value='Run' id='run'>
23 26
24 <p>Image appears here:</p> 27 <p>Image appears here:</p>
25 <img id='img' src=''/> 28 <img id='img' src=''/>
26 29
27 <pre><code id='output'></code></pre> 30 <pre><code id='output'></code></pre>
31 </section>
32 <section>
28 33
29 </section> 34 <section id=tryHistory>
35 {{range .Tries}}
36 <div class=tries>
37 <h2><a href="/c/{{.Hash}}">{{.CreateTS}}</a></h2>
38 <a href="/c/{{.Hash}}">
39 <img width=100 height=100 src="/i/{{.Hash}}.png">
40 </a>
41 </div>
42 {{end}}
43 </section>
44
30 <script type='text/javascript' charset='utf-8'> 45 <script type='text/javascript' charset='utf-8'>
31 var run = document.getElementById('run'); 46 var run = document.getElementById('run');
32 var code = document.getElementById('code'); 47 var code = document.getElementById('code');
33 var output = document.getElementById('output'); 48 var output = document.getElementById('output');
34 var img = document.getElementById('img'); 49 var img = document.getElementById('img');
50 var tryHistory = document.getElementById('tryHistory');
51 var parser = new DOMParser();
52 var workspaceName = "{{.Name}}";
35 53
36 function beginWait() { 54 function beginWait() {
37 document.body.classList.add('waiting'); 55 document.body.classList.add('waiting');
38 run.disabled = true; 56 run.disabled = true;
39 } 57 }
40 58
41 function endWait() { 59 function endWait() {
42 document.body.classList.remove('waiting'); 60 document.body.classList.remove('waiting');
43 run.disabled = false; 61 run.disabled = false;
44 } 62 }
45 63
46 function codeComplete(e) { 64 function codeComplete(e) {
47 // The response is JSON of the form: 65 // The response is JSON of the form:
48 // { 66 // {
49 // "message": "you had an error...", 67 // "message": "you had an error...",
50 // "img": "<base64 encoded image but only on success>" 68 // "img": "<base64 encoded image but only on success>"
51 // } 69 // }
52 // 70 //
53 // The img is optional and only appears if there is a valid 71 // The img is optional and only appears if there is a valid
54 // image to display. 72 // image to display.
55 endWait(); 73 endWait();
56 console.log(e.target.response); 74 console.log(e.target.response);
57 body = JSON.parse(e.target.response); 75 body = JSON.parse(e.target.response);
58 output.innerText = body.message; 76 output.innerText = body.message;
59 if (body.hasOwnProperty('img')) { 77 if (body.hasOwnProperty('img')) {
60 img.src = 'data:image/png;base64,' + body.img; 78 img.src = 'data:image/png;base64,' + body.img;
61 } else { 79 } else {
62 img.src = ''; 80 img.src = '';
63 } 81 }
64 window.history.pushState(null, null, "/c/" + body.hash); 82 // Add the image to the history.
83
84 var newHistoryStr = '<div class=tries><h2><a href="/c/' + body.hash + '" >CreateTS</a></h2>' +
85 '<a href="/c/' + body.hash + '">' +
86 ' <img width=100 height=100 src="/i/' + body.hash + '.png">' +
87 '</a></div>';
88
89 var newHistory = parser.parseFromString(newHistoryStr, "text/html");
90 tryHistory.insertBefore(newHistory.body.firstChild, tryHistory.firstChil d);
65 } 91 }
66 92
67 function codeError(e) { 93 function codeError(e) {
68 endWait(); 94 endWait();
69 alert('Something bad happened: ' + e); 95 alert('Something bad happened: ' + e);
70 } 96 }
71 97
72 run.addEventListener('click', onSubmitCode); 98 run.addEventListener('click', onSubmitCode);
73 function onSubmitCode() { 99 function onSubmitCode() {
74 beginWait(); 100 beginWait();
75 var req = new XMLHttpRequest(); 101 var req = new XMLHttpRequest();
76 req.addEventListener('load', codeComplete); 102 req.addEventListener('load', codeComplete);
77 req.addEventListener('error', codeError); 103 req.addEventListener('error', codeError);
78 req.overrideMimeType('application/json'); 104 req.overrideMimeType('application/json');
79 req.open('POST', '.', true); 105 req.open('POST', '/', true);
80 req.send(code.value); 106 req.setRequestHeader('content-type', 'application/json');
107 req.send(JSON.stringify({"code": code.value, "name": workspaceName}));
81 } 108 }
82 </script> 109 </script>
110 {{else}}
111 Create a new workspace:
112 <form action="." method="POST" accept-charset="utf-8">
113 <p><input type="submit" value="Create"></p>
114 </form>
115 {{end}}
116 </section>
83 </body> 117 </body>
84 </html> 118 </html>
OLDNEW
« no previous file with comments | « experimental/webtry/templates/recent.html ('k') | experimental/webtry/webtry.go » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698