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

Side by Side Diff: experimental/webtry/js/run.js

Issue 246393002: Adding the ability to click on the images in the history and have that load (Closed) Base URL: https://skia.googlesource.com/skia.git@history
Patch Set: 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 | « no previous file | experimental/webtry/templates/index.html » ('j') | experimental/webtry/webtry.go » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 /** 1 /**
2 * Common JS that talks XHR back to the server and runs the code and receives 2 * Common JS that talks XHR back to the server and runs the code and receives
3 * the results. 3 * the results.
4 */ 4 */
5 5
6 /** 6 /**
7 * A polyfill for HTML Templates. 7 * A polyfill for HTML Templates.
8 * 8 *
9 * This just adds in the content attribute, it doesn't stop scripts 9 * This just adds in the content attribute, it doesn't stop scripts
10 * from running nor does it stop other side-effects. 10 * from running nor does it stop other side-effects.
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after
42 var embed = document.getElementById('embed'); 42 var embed = document.getElementById('embed');
43 var embedButton = document.getElementById('embedButton'); 43 var embedButton = document.getElementById('embedButton');
44 var code = document.getElementById('code'); 44 var code = document.getElementById('code');
45 var output = document.getElementById('output'); 45 var output = document.getElementById('output');
46 var img = document.getElementById('img'); 46 var img = document.getElementById('img');
47 var tryHistory = document.getElementById('tryHistory'); 47 var tryHistory = document.getElementById('tryHistory');
48 var parser = new DOMParser(); 48 var parser = new DOMParser();
49 var tryTemplate = document.getElementById('tryTemplate'); 49 var tryTemplate = document.getElementById('tryTemplate');
50 50
51 51
52 function addToHistory(hash, imgUrl) {
53 var clone = tryTemplate.content.cloneNode(true);
54 clone.querySelector('a').href = '/c/' + hash;
55 clone.querySelector('img').src = imgUrl;
56 tryHistory.insertBefore(clone, tryHistory.firstChild);
57 }
58
59
60 function beginWait() { 52 function beginWait() {
61 document.body.classList.add('waiting'); 53 document.body.classList.add('waiting');
62 run.disabled = true; 54 run.disabled = true;
63 } 55 }
64 56
65 57
66 function endWait() { 58 function endWait() {
67 document.body.classList.remove('waiting'); 59 document.body.classList.remove('waiting');
68 run.disabled = false; 60 run.disabled = false;
69 } 61 }
70 62
71 63
72 /** 64 /**
65 * Callback when there's an XHR error.
66 * @param e The callback event.
67 */
68 function xhrError(e) {
69 endWait();
70 alert('Something bad happened: ' + e);
71 }
72
73 /**
74 * Called when an image in the workspace history is clicked.
75 */
76 function historyClick() {
77 beginWait();
78 var req = new XMLHttpRequest();
79 req.addEventListener('load', historyComplete);
80 req.addEventListener('error', xhrError);
81 req.overrideMimeType('application/json');
82 req.open('GET', this.getAttribute('data-try'), true);
83 req.send();
84 }
85
86
87 /**
88 * Callback for when the XHR kicked off in historyClick() returns.
89 */
90 function historyComplete(e) {
91 // The response is JSON of the form:
mtklein 2014/04/22 17:24:18 I love this kind of note. Thank you.
92 // {
93 // "hash": "unique id for a try",
94 // "code": "source code for try"
95 // }
96 endWait();
97 console.log(e.target.response);
mtklein 2014/04/22 17:24:18 Intentionally leaving the console.log in there?
jcgregorio 2014/04/22 18:02:08 Done.
98 body = JSON.parse(e.target.response);
99 code.value = body.code;
100 img.src = '/i/'+body.hash+'.png';
101 if (permalink) {
102 permalink.href = '/c/' + body.hash;
103 }
104 }
105
106
107 /**
108 * Add the given try image to the history of a workspace.
109 */
110 function addToHistory(hash, imgUrl) {
111 var clone = tryTemplate.content.cloneNode(true);
112 clone.querySelector('img').src = imgUrl;
113 clone.querySelector('.tries').setAttribute('data-try', '/json/' + hash);
114 tryHistory.insertBefore(clone, tryHistory.firstChild);
115 tryHistory.querySelector('.tries').addEventListener('click', historyClick, true);
116 }
117
118
119 /**
73 * Callback for when the XHR returns after attempting to run the code. 120 * Callback for when the XHR returns after attempting to run the code.
74 * @param e The callback event. 121 * @param e The callback event.
75 */ 122 */
76 function codeComplete(e) { 123 function codeComplete(e) {
77 // The response is JSON of the form: 124 // The response is JSON of the form:
78 // { 125 // {
79 // "message": "you had an error...", 126 // "message": "you had an error...",
80 // "img": "<base64 encoded image but only on success>" 127 // "img": "<base64 encoded image but only on success>"
81 // } 128 // }
82 // 129 //
83 // The img is optional and only appears if there is a valid 130 // The img is optional and only appears if there is a valid
84 // image to display. 131 // image to display.
85 endWait(); 132 endWait();
86 console.log(e.target.response); 133 console.log(e.target.response);
87 body = JSON.parse(e.target.response); 134 body = JSON.parse(e.target.response);
88 output.innerText = body.message; 135 output.innerText = body.message;
89 if (body.hasOwnProperty('img')) { 136 if (body.hasOwnProperty('img')) {
90 img.src = 'data:image/png;base64,' + body.img; 137 img.src = 'data:image/png;base64,' + body.img;
91 } else { 138 } else {
92 img.src = ''; 139 img.src = '';
93 } 140 }
94 // Add the image to the history if we are on a workspace page. 141 // Add the image to the history if we are on a workspace page.
95 if (tryHistory) { 142 if (tryHistory) {
96 addToHistory(body.hash, 'data:image/png;base64,' + body.img); 143 addToHistory(body.hash, 'data:image/png;base64,' + body.img);
97 } else { 144 } else {
98 window.history.pushState(null, null, "./" + body.hash); 145 window.history.pushState(null, null, './' + body.hash);
99 } 146 }
100 if (permalink) { 147 if (permalink) {
101 permalink.href = "/c/" + body.hash; 148 permalink.href = '/c/' + body.hash;
102 } 149 }
103 if (embed) { 150 if (embed) {
104 var url = document.URL; 151 var url = document.URL;
105 url = url.replace('/c/', '/iframe/'); 152 url = url.replace('/c/', '/iframe/');
106 embed.value = '<iframe src="' + url + '" width="740" height="550" style= "border: solid #00a 5px; border-radius: 5px;"/>' 153 embed.value = '<iframe src="' + url + '" width="740" height="550" style= "border: solid #00a 5px; border-radius: 5px;"/>'
107 } 154 }
108 if (embedButton && embedButton.hasAttribute('disabled')) { 155 if (embedButton && embedButton.hasAttribute('disabled')) {
109 embedButton.removeAttribute('disabled'); 156 embedButton.removeAttribute('disabled');
110 } 157 }
111 } 158 }
112 159
113 160
114 /**
115 * Callback where there's an XHR error.
116 * @param e The callback event.
117 */
118 function codeError(e) {
119 endWait();
120 alert('Something bad happened: ' + e);
121 }
122
123
124 function onSubmitCode() { 161 function onSubmitCode() {
125 beginWait(); 162 beginWait();
126 var req = new XMLHttpRequest(); 163 var req = new XMLHttpRequest();
127 req.addEventListener('load', codeComplete); 164 req.addEventListener('load', codeComplete);
128 req.addEventListener('error', codeError); 165 req.addEventListener('error', xhrError);
129 req.overrideMimeType('application/json'); 166 req.overrideMimeType('application/json');
130 req.open('POST', '/', true); 167 req.open('POST', '/', true);
131 req.setRequestHeader('content-type', 'application/json'); 168 req.setRequestHeader('content-type', 'application/json');
132 req.send(JSON.stringify({"code": code.value, "name": workspaceName})); 169 req.send(JSON.stringify({'code': code.value, 'name': workspaceName}));
133 } 170 }
134 run.addEventListener('click', onSubmitCode); 171 run.addEventListener('click', onSubmitCode);
135 172
136 173
137 function onEmbedClick() { 174 function onEmbedClick() {
138 embed.style.display='inline'; 175 embed.style.display='inline';
139 } 176 }
140 177
141 if (embedButton) { 178 if (embedButton) {
142 embedButton.addEventListener('click', onEmbedClick); 179 embedButton.addEventListener('click', onEmbedClick);
143 } 180 }
144 181
145 182
146 // Add the images to the history if we are on a workspace page. 183 // Add the images to the history if we are on a workspace page.
147 if (tryHistory && history) { 184 if (tryHistory && history) {
148 for (var i=0; i<history.length; i++) { 185 for (var i=0; i<history.length; i++) {
149 addToHistory(history[i].hash, '/i/'+history[i].hash+'.png'); 186 addToHistory(history[i].hash, '/i/'+history[i].hash+'.png');
150 } 187 }
151 } 188 }
152 189
153 })(workspaceName); 190 })(workspaceName);
OLDNEW
« no previous file with comments | « no previous file | experimental/webtry/templates/index.html » ('j') | experimental/webtry/webtry.go » ('J')

Powered by Google App Engine
This is Rietveld 408576698