OLD | NEW |
| (Empty) |
1 /** | |
2 * Common JS that talks XHR back to the server and runs the code and receives | |
3 * the results. | |
4 */ | |
5 | |
6 /** | |
7 * A polyfill for HTML Templates. | |
8 * | |
9 * This just adds in the content attribute, it doesn't stop scripts | |
10 * from running nor does it stop other side-effects. | |
11 */ | |
12 (function polyfillTemplates() { | |
13 if('content' in document.createElement('template')) { | |
14 return false; | |
15 } | |
16 | |
17 var templates = document.getElementsByTagName('template'); | |
18 for (var i=0; i<templates.length; i++) { | |
19 var content = document.createDocumentFragment(); | |
20 while (templates[i].firstChild) { | |
21 content.appendChild(templates[i].firstChild); | |
22 } | |
23 templates[i].content = content; | |
24 } | |
25 })(); | |
26 | |
27 /** | |
28 * All the functionality is wrapped up in this anonymous closure, but we need | |
29 * to be told if we are on the workspace page or a normal try page, so the | |
30 * workspaceName is passed into the closure, it must be set in the global | |
31 * namespace. If workspaceName is the empty string then we know we aren't | |
32 * running on a workspace page. | |
33 * | |
34 * If we are on a workspace page we also look for a 'history' | |
35 * variable in the global namespace which contains the list of tries | |
36 * that are included in this workspace. That variable is used to | |
37 * populate the history list. | |
38 */ | |
39 (function(workspaceName) { | |
40 var run = document.getElementById('run'); | |
41 var permalink = document.getElementById('permalink'); | |
42 var embed = document.getElementById('embed'); | |
43 var embedButton = document.getElementById('embedButton'); | |
44 var code = document.getElementById('code'); | |
45 var output = document.getElementById('output'); | |
46 var stdout = document.getElementById('stdout'); | |
47 var img = document.getElementById('img'); | |
48 var tryHistory = document.getElementById('tryHistory'); | |
49 var parser = new DOMParser(); | |
50 var tryTemplate = document.getElementById('tryTemplate'); | |
51 | |
52 | |
53 function beginWait() { | |
54 document.body.classList.add('waiting'); | |
55 run.disabled = true; | |
56 } | |
57 | |
58 | |
59 function endWait() { | |
60 document.body.classList.remove('waiting'); | |
61 run.disabled = false; | |
62 } | |
63 | |
64 | |
65 /** | |
66 * Callback when there's an XHR error. | |
67 * @param e The callback event. | |
68 */ | |
69 function xhrError(e) { | |
70 endWait(); | |
71 alert('Something bad happened: ' + e); | |
72 } | |
73 | |
74 function clearOutput() { | |
75 output.textContent = ""; | |
76 if (stdout) { | |
77 stdout.textContent = ""; | |
78 } | |
79 embed.style.display='none'; | |
80 } | |
81 | |
82 /** | |
83 * Called when an image in the workspace history is clicked. | |
84 */ | |
85 function historyClick() { | |
86 beginWait(); | |
87 clearOutput(); | |
88 var req = new XMLHttpRequest(); | |
89 req.addEventListener('load', historyComplete); | |
90 req.addEventListener('error', xhrError); | |
91 req.overrideMimeType('application/json'); | |
92 req.open('GET', this.getAttribute('data-try'), true); | |
93 req.send(); | |
94 } | |
95 | |
96 | |
97 /** | |
98 * Callback for when the XHR kicked off in historyClick() returns. | |
99 */ | |
100 function historyComplete(e) { | |
101 // The response is JSON of the form: | |
102 // { | |
103 // "hash": "unique id for a try", | |
104 // "code": "source code for try" | |
105 // } | |
106 endWait(); | |
107 body = JSON.parse(e.target.response); | |
108 code.value = body.code; | |
109 img.src = '/i/'+body.hash+'.png'; | |
110 if (permalink) { | |
111 permalink.href = '/c/' + body.hash; | |
112 } | |
113 } | |
114 | |
115 | |
116 /** | |
117 * Add the given try image to the history of a workspace. | |
118 */ | |
119 function addToHistory(hash, imgUrl) { | |
120 var clone = tryTemplate.content.cloneNode(true); | |
121 clone.querySelector('img').src = imgUrl; | |
122 clone.querySelector('.tries').setAttribute('data-try', '/json/' + hash); | |
123 tryHistory.insertBefore(clone, tryHistory.firstChild); | |
124 tryHistory.querySelector('.tries').addEventListener('click', historyClick,
true); | |
125 } | |
126 | |
127 | |
128 /** | |
129 * Callback for when the XHR returns after attempting to run the code. | |
130 * @param e The callback event. | |
131 */ | |
132 function codeComplete(e) { | |
133 // The response is JSON of the form: | |
134 // { | |
135 // "message": "you had an error...", | |
136 // "img": "<base64 encoded image but only on success>" | |
137 // } | |
138 // | |
139 // The img is optional and only appears if there is a valid | |
140 // image to display. | |
141 endWait(); | |
142 console.log(e.target.response); | |
143 body = JSON.parse(e.target.response); | |
144 output.textContent = body.message; | |
145 if (stdout) { | |
146 stdout.textContent = body.stdout; | |
147 } | |
148 if (body.hasOwnProperty('img')) { | |
149 img.src = 'data:image/png;base64,' + body.img; | |
150 } else { | |
151 img.src = ''; | |
152 } | |
153 // Add the image to the history if we are on a workspace page. | |
154 if (tryHistory) { | |
155 addToHistory(body.hash, 'data:image/png;base64,' + body.img); | |
156 } else { | |
157 window.history.pushState(null, null, './' + body.hash); | |
158 } | |
159 if (permalink) { | |
160 permalink.href = '/c/' + body.hash; | |
161 } | |
162 if (embed) { | |
163 var url = document.URL; | |
164 url = url.replace('/c/', '/iframe/'); | |
165 embed.value = '<iframe src="' + url + '" width="740" height="550" style=
"border: solid #00a 5px; border-radius: 5px;"/>' | |
166 } | |
167 if (embedButton && embedButton.hasAttribute('disabled')) { | |
168 embedButton.removeAttribute('disabled'); | |
169 } | |
170 } | |
171 | |
172 | |
173 function onSubmitCode() { | |
174 beginWait(); | |
175 clearOutput(); | |
176 var req = new XMLHttpRequest(); | |
177 req.addEventListener('load', codeComplete); | |
178 req.addEventListener('error', xhrError); | |
179 req.overrideMimeType('application/json'); | |
180 req.open('POST', '/', true); | |
181 req.setRequestHeader('content-type', 'application/json'); | |
182 req.send(JSON.stringify({'code': code.value, 'name': workspaceName})); | |
183 } | |
184 run.addEventListener('click', onSubmitCode); | |
185 | |
186 | |
187 function onEmbedClick() { | |
188 embed.style.display='inline'; | |
189 } | |
190 | |
191 if (embedButton) { | |
192 embedButton.addEventListener('click', onEmbedClick); | |
193 } | |
194 | |
195 | |
196 // Add the images to the history if we are on a workspace page. | |
197 if (tryHistory && history) { | |
198 for (var i=0; i<history.length; i++) { | |
199 addToHistory(history[i].hash, '/i/'+history[i].hash+'.png'); | |
200 } | |
201 } | |
202 | |
203 })(workspaceName); | |
OLD | NEW |