OLD | NEW |
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 /** | 7 /** |
8 * All the functionality is wrapped up in this anonymous closure, but we need | 8 * All the functionality is wrapped up in this anonymous closure, but we need |
9 * to be told if we are on the workspace page or a normal try page, so the | 9 * to be told if we are on the workspace page or a normal try page, so the |
10 * workspaceName is passed into the closure, it must be set in the global | 10 * workspaceName is passed into the closure, it must be set in the global |
11 * namespace. If workspaceName is the empty string then we know we aren't | 11 * namespace. If workspaceName is the empty string then we know we aren't |
12 * running on a workspace page. | 12 * running on a workspace page. |
13 * | 13 * |
14 * If we are on a workspace page we also look for a 'history_' | 14 * If we are on a workspace page we also look for a 'history_' |
15 * variable in the global namespace which contains the list of tries | 15 * variable in the global namespace which contains the list of tries |
16 * that are included in this workspace. That variable is used to | 16 * that are included in this workspace. That variable is used to |
17 * populate the history list. | 17 * populate the history list. |
18 */ | 18 */ |
19 (function() { | 19 (function() { |
20 function onLoad() { | 20 function onLoad() { |
21 var run = document.getElementById('run'); | 21 var run = document.getElementById('run'); |
22 var permalink = document.getElementById('permalink'); | 22 var permalink = document.getElementById('permalink'); |
23 var embed = document.getElementById('embed'); | 23 var embed = document.getElementById('embed'); |
24 var embedButton = document.getElementById('embedButton'); | 24 var embedButton = document.getElementById('embedButton'); |
25 var code = document.getElementById('code'); | 25 var code = document.getElementById('code'); |
26 var output = document.getElementById('output'); | 26 var output = document.getElementById('output'); |
27 var outputWrapper = document.getElementById('output-wrapper'); | 27 var outputWrapper = document.getElementById('output-wrapper'); |
28 var gpu = document.getElementById('use-gpu'); | 28 var gpu = document.getElementById('use-gpu'); |
29 var img = document.getElementById('img'); | 29 var raster = document.getElementById('use-raster'); |
| 30 var pdf = document.getElementById('use-pdf'); |
| 31 var rasterOutput = document.getElementById('raster-output'); |
| 32 var rasterImg = document.getElementById('raster-img'); |
| 33 var gpuOutput = document.getElementById('gpu-output'); |
| 34 var gpuImg = document.getElementById('gpu-img'); |
30 var imageWidth = document.getElementById('image-width'); | 35 var imageWidth = document.getElementById('image-width'); |
31 var imageHeight = document.getElementById('image-height'); | 36 var imageHeight = document.getElementById('image-height'); |
32 var tryHistory = document.getElementById('tryHistory'); | 37 var tryHistory = document.getElementById('tryHistory'); |
33 var parser = new DOMParser(); | 38 var parser = new DOMParser(); |
34 var tryTemplate = document.getElementById('tryTemplate'); | 39 var tryTemplate = document.getElementById('tryTemplate'); |
35 var sourcesTemplate = document.getElementById('sourcesTemplate'); | 40 var sourcesTemplate = document.getElementById('sourcesTemplate'); |
36 | 41 |
37 var enableSource = document.getElementById('enableSource'); | 42 var enableSource = document.getElementById('enableSource'); |
38 var selectedSource = document.getElementById('selectedSource'); | 43 var selectedSource = document.getElementById('selectedSource'); |
39 var sourceCode = document.getElementById('sourceCode'); | 44 var sourceCode = document.getElementById('sourceCode'); |
(...skipping 101 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
141 req.send(); | 146 req.send(); |
142 } else { | 147 } else { |
143 sourceId = 0; | 148 sourceId = 0; |
144 chooseSource.classList.remove('show'); | 149 chooseSource.classList.remove('show'); |
145 } | 150 } |
146 } | 151 } |
147 | 152 |
148 enableSource.addEventListener('click', sourceClick, true); | 153 enableSource.addEventListener('click', sourceClick, true); |
149 selectedSource.addEventListener('click', sourceClick, true); | 154 selectedSource.addEventListener('click', sourceClick, true); |
150 | 155 |
| 156 function configChange(e) { |
| 157 if (!(gpu.checked || raster.checked || pdf.checked)) { |
| 158 run.disabled = true; |
| 159 run.innerHTML = "Choose a configuration" |
| 160 } else { |
| 161 run.disabled = false; |
| 162 run.innerHTML = "Run" |
| 163 } |
| 164 } |
| 165 |
| 166 gpu.addEventListener('change', configChange); |
| 167 raster.addEventListener('change', configChange); |
| 168 pdf.addEventListener('change', configChange); |
| 169 |
151 | 170 |
152 var editor = CodeMirror.fromTextArea(code, { | 171 var editor = CodeMirror.fromTextArea(code, { |
153 theme: "default", | 172 theme: "default", |
154 lineNumbers: true, | 173 lineNumbers: true, |
155 matchBrackets: true, | 174 matchBrackets: true, |
156 lineWrapping: true, | 175 lineWrapping: true, |
157 mode: "text/x-c++src", | 176 mode: "text/x-c++src", |
158 indentUnit: 4, | 177 indentUnit: 4, |
159 }); | 178 }); |
160 | 179 |
(...skipping 49 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
210 function historyComplete(e) { | 229 function historyComplete(e) { |
211 // The response is JSON of the form: | 230 // The response is JSON of the form: |
212 // { | 231 // { |
213 // "hash": "unique id for a try", | 232 // "hash": "unique id for a try", |
214 // "code": "source code for try" | 233 // "code": "source code for try" |
215 // } | 234 // } |
216 endWait(); | 235 endWait(); |
217 body = JSON.parse(e.target.response); | 236 body = JSON.parse(e.target.response); |
218 code.value = body.code; | 237 code.value = body.code; |
219 editor.setValue(body.code); | 238 editor.setValue(body.code); |
220 img.src = '/i/'+body.hash+'.png'; | 239 rasterImg.src = '/i/'+body.hash+'_raster.png'; |
| 240 gpuImg.src = '/i/'+body.hash+'_gpu.png'; |
221 imageWidth.value = body.width; | 241 imageWidth.value = body.width; |
222 imageHeight.value = body.height; | 242 imageHeight.value = body.height; |
223 gpu.checked = body.gpu; | 243 gpu.checked = body.gpu; |
224 sourceSelectByID(body.source); | 244 sourceSelectByID(body.source); |
225 if (permalink) { | 245 if (permalink) { |
226 permalink.href = '/c/' + body.hash; | 246 permalink.href = '/c/' + body.hash; |
227 permalink.style.display='inline-block'; | 247 permalink.style.display='inline-block'; |
228 } | 248 } |
229 } | 249 } |
230 | 250 |
(...skipping 66 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
297 | 317 |
298 editor.addLineClass( parseInt( compileError.line ) - 1, "wrap", "err
or" ); | 318 editor.addLineClass( parseInt( compileError.line ) - 1, "wrap", "err
or" ); |
299 } | 319 } |
300 outputWrapper.style.display = 'block'; | 320 outputWrapper.style.display = 'block'; |
301 } else { | 321 } else { |
302 output.textContent = body.message; | 322 output.textContent = body.message; |
303 if (body.message) { | 323 if (body.message) { |
304 outputWrapper.style.display = 'block'; | 324 outputWrapper.style.display = 'block'; |
305 } | 325 } |
306 } | 326 } |
307 if (body.hasOwnProperty('img')) { | 327 if (body.hasOwnProperty('rasterImg') && body.rasterImg != "") { |
308 img.src = 'data:image/png;base64,' + body.img; | 328 rasterImg.src = 'data:image/png;base64,' + body.rasterImg; |
| 329 rasterOutput.style.display = "inline-block"; |
309 } else { | 330 } else { |
310 img.src = ''; | 331 rasterOutput.style.display = "none"; |
| 332 rasterImg.src = ''; |
| 333 } |
| 334 if (body.hasOwnProperty('gpuImg') && body.gpuImg != "") { |
| 335 gpuImg.src = 'data:image/png;base64,' + body.gpuImg; |
| 336 gpuOutput.style.display = "inline-block"; |
| 337 } else { |
| 338 gpuImg.src = ''; |
| 339 gpuOutput.style.display = "none"; |
311 } | 340 } |
312 // Add the image to the history if we are on a workspace page. | 341 // Add the image to the history if we are on a workspace page. |
313 if (tryHistory) { | 342 if (tryHistory) { |
314 addToHistory(body.hash, 'data:image/png;base64,' + body.img); | 343 addToHistory(body.hash, 'data:image/png;base64,' + body.rasterImg); |
315 } else { | 344 } else { |
316 window.history.pushState(null, null, '/c/' + body.hash); | 345 window.history.pushState(null, null, '/c/' + body.hash); |
317 } | 346 } |
318 if (permalink) { | 347 if (permalink) { |
319 permalink.href = '/c/' + body.hash; | 348 permalink.href = '/c/' + body.hash; |
320 permalink.style.display = 'inline-block'; | 349 permalink.style.display = 'inline-block'; |
321 } | 350 } |
322 if (embed) { | 351 if (embed) { |
323 setIFrameURL(); | 352 setIFrameURL(); |
324 } | 353 } |
325 if (embedButton) { | 354 if (embedButton) { |
326 embedButton.style.display = 'inline-block'; | 355 embedButton.style.display = 'inline-block'; |
327 } | 356 } |
328 } | 357 } |
329 | 358 |
330 | |
331 function onSubmitCode() { | 359 function onSubmitCode() { |
332 beginWait(); | 360 beginWait(); |
333 clearOutput(); | 361 clearOutput(); |
334 var req = new XMLHttpRequest(); | 362 var req = new XMLHttpRequest(); |
335 req.addEventListener('load', codeComplete); | 363 req.addEventListener('load', codeComplete); |
336 req.addEventListener('error', xhrError); | 364 req.addEventListener('error', xhrError); |
337 req.overrideMimeType('application/json'); | 365 req.overrideMimeType('application/json'); |
338 req.open('POST', '/', true); | 366 req.open('POST', '/', true); |
339 req.setRequestHeader('content-type', 'application/json'); | 367 req.setRequestHeader('content-type', 'application/json'); |
340 req.send(JSON.stringify({ | 368 req.send(JSON.stringify({ |
341 'code': editor.getValue(), | 369 'code': editor.getValue(), |
342 'width': parseInt(imageWidth.value), | 370 'width': parseInt(imageWidth.value), |
343 'height': parseInt(imageHeight.value), | 371 'height': parseInt(imageHeight.value), |
344 'name': workspaceName, | 372 'name': workspaceName, |
345 'source': sourceId, | 373 'source': sourceId, |
346 'gpu': gpu.checked | 374 'gpu': gpu.checked, |
| 375 'raster': raster.checked, |
| 376 'pdf': pdf.checked |
347 })); | 377 })); |
348 } | 378 } |
349 run.addEventListener('click', onSubmitCode); | 379 run.addEventListener('click', onSubmitCode); |
350 | 380 |
351 | 381 |
352 function onEmbedClick() { | 382 function onEmbedClick() { |
353 embed.style.display='inline'; | 383 embed.style.display='inline'; |
354 } | 384 } |
355 | 385 |
356 if (embedButton) { | 386 if (embedButton) { |
(...skipping 11 matching lines...) Expand all Loading... |
368 } | 398 } |
369 | 399 |
370 // If loaded via HTML Imports then DOMContentLoaded will be long done. | 400 // If loaded via HTML Imports then DOMContentLoaded will be long done. |
371 if (document.readyState != "loading") { | 401 if (document.readyState != "loading") { |
372 onLoad(); | 402 onLoad(); |
373 } else { | 403 } else { |
374 this.addEventListener('load', onLoad); | 404 this.addEventListener('load', onLoad); |
375 } | 405 } |
376 | 406 |
377 })(); | 407 })(); |
| 408 |
| 409 // TODO (humper) -- move the following functions out of the global |
| 410 // namespace as part of a web-components based fiddle frontend rewrite. |
| 411 |
| 412 function collectionHas(a, b) { //helper function (see below) |
| 413 for(var i = 0, len = a.length; i < len; i ++) { |
| 414 if(a[i] == b) return true; |
| 415 } |
| 416 return false; |
| 417 } |
| 418 function findParentBySelector(elm, selector) { |
| 419 var all = document.querySelectorAll(selector); |
| 420 var cur = elm.parentNode; |
| 421 while(cur && !collectionHas(all, cur)) { //keep going up until you find a ma
tch |
| 422 cur = cur.parentNode; //go up |
| 423 } |
| 424 return cur; //will return null if not found |
| 425 } |
| 426 |
| 427 function onLoadImage(img) { |
| 428 var wrapper = findParentBySelector(img, ".image-wrapper"); |
| 429 wrapper.style.display = "inline-block"; |
| 430 } |
OLD | NEW |