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 * 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 Loading... | |
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); |
OLD | NEW |