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: |
| 92 // { |
| 93 // "hash": "unique id for a try", |
| 94 // "code": "source code for try" |
| 95 // } |
| 96 endWait(); |
| 97 body = JSON.parse(e.target.response); |
| 98 code.value = body.code; |
| 99 img.src = '/i/'+body.hash+'.png'; |
| 100 if (permalink) { |
| 101 permalink.href = '/c/' + body.hash; |
| 102 } |
| 103 } |
| 104 |
| 105 |
| 106 /** |
| 107 * Add the given try image to the history of a workspace. |
| 108 */ |
| 109 function addToHistory(hash, imgUrl) { |
| 110 var clone = tryTemplate.content.cloneNode(true); |
| 111 clone.querySelector('img').src = imgUrl; |
| 112 clone.querySelector('.tries').setAttribute('data-try', '/json/' + hash); |
| 113 tryHistory.insertBefore(clone, tryHistory.firstChild); |
| 114 tryHistory.querySelector('.tries').addEventListener('click', historyClick,
true); |
| 115 } |
| 116 |
| 117 |
| 118 /** |
73 * Callback for when the XHR returns after attempting to run the code. | 119 * Callback for when the XHR returns after attempting to run the code. |
74 * @param e The callback event. | 120 * @param e The callback event. |
75 */ | 121 */ |
76 function codeComplete(e) { | 122 function codeComplete(e) { |
77 // The response is JSON of the form: | 123 // The response is JSON of the form: |
78 // { | 124 // { |
79 // "message": "you had an error...", | 125 // "message": "you had an error...", |
80 // "img": "<base64 encoded image but only on success>" | 126 // "img": "<base64 encoded image but only on success>" |
81 // } | 127 // } |
82 // | 128 // |
83 // The img is optional and only appears if there is a valid | 129 // The img is optional and only appears if there is a valid |
84 // image to display. | 130 // image to display. |
85 endWait(); | 131 endWait(); |
86 console.log(e.target.response); | 132 console.log(e.target.response); |
87 body = JSON.parse(e.target.response); | 133 body = JSON.parse(e.target.response); |
88 output.innerText = body.message; | 134 output.innerText = body.message; |
89 if (body.hasOwnProperty('img')) { | 135 if (body.hasOwnProperty('img')) { |
90 img.src = 'data:image/png;base64,' + body.img; | 136 img.src = 'data:image/png;base64,' + body.img; |
91 } else { | 137 } else { |
92 img.src = ''; | 138 img.src = ''; |
93 } | 139 } |
94 // Add the image to the history if we are on a workspace page. | 140 // Add the image to the history if we are on a workspace page. |
95 if (tryHistory) { | 141 if (tryHistory) { |
96 addToHistory(body.hash, 'data:image/png;base64,' + body.img); | 142 addToHistory(body.hash, 'data:image/png;base64,' + body.img); |
97 } else { | 143 } else { |
98 window.history.pushState(null, null, "./" + body.hash); | 144 window.history.pushState(null, null, './' + body.hash); |
99 } | 145 } |
100 if (permalink) { | 146 if (permalink) { |
101 permalink.href = "/c/" + body.hash; | 147 permalink.href = '/c/' + body.hash; |
102 } | 148 } |
103 if (embed) { | 149 if (embed) { |
104 var url = document.URL; | 150 var url = document.URL; |
105 url = url.replace('/c/', '/iframe/'); | 151 url = url.replace('/c/', '/iframe/'); |
106 embed.value = '<iframe src="' + url + '" width="740" height="550" style=
"border: solid #00a 5px; border-radius: 5px;"/>' | 152 embed.value = '<iframe src="' + url + '" width="740" height="550" style=
"border: solid #00a 5px; border-radius: 5px;"/>' |
107 } | 153 } |
108 if (embedButton && embedButton.hasAttribute('disabled')) { | 154 if (embedButton && embedButton.hasAttribute('disabled')) { |
109 embedButton.removeAttribute('disabled'); | 155 embedButton.removeAttribute('disabled'); |
110 } | 156 } |
111 } | 157 } |
112 | 158 |
113 | 159 |
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() { | 160 function onSubmitCode() { |
125 beginWait(); | 161 beginWait(); |
126 var req = new XMLHttpRequest(); | 162 var req = new XMLHttpRequest(); |
127 req.addEventListener('load', codeComplete); | 163 req.addEventListener('load', codeComplete); |
128 req.addEventListener('error', codeError); | 164 req.addEventListener('error', xhrError); |
129 req.overrideMimeType('application/json'); | 165 req.overrideMimeType('application/json'); |
130 req.open('POST', '/', true); | 166 req.open('POST', '/', true); |
131 req.setRequestHeader('content-type', 'application/json'); | 167 req.setRequestHeader('content-type', 'application/json'); |
132 req.send(JSON.stringify({"code": code.value, "name": workspaceName})); | 168 req.send(JSON.stringify({'code': code.value, 'name': workspaceName})); |
133 } | 169 } |
134 run.addEventListener('click', onSubmitCode); | 170 run.addEventListener('click', onSubmitCode); |
135 | 171 |
136 | 172 |
137 function onEmbedClick() { | 173 function onEmbedClick() { |
138 embed.style.display='inline'; | 174 embed.style.display='inline'; |
139 } | 175 } |
140 | 176 |
141 if (embedButton) { | 177 if (embedButton) { |
142 embedButton.addEventListener('click', onEmbedClick); | 178 embedButton.addEventListener('click', onEmbedClick); |
143 } | 179 } |
144 | 180 |
145 | 181 |
146 // Add the images to the history if we are on a workspace page. | 182 // Add the images to the history if we are on a workspace page. |
147 if (tryHistory && history) { | 183 if (tryHistory && history) { |
148 for (var i=0; i<history.length; i++) { | 184 for (var i=0; i<history.length; i++) { |
149 addToHistory(history[i].hash, '/i/'+history[i].hash+'.png'); | 185 addToHistory(history[i].hash, '/i/'+history[i].hash+'.png'); |
150 } | 186 } |
151 } | 187 } |
152 | 188 |
153 })(workspaceName); | 189 })(workspaceName); |
OLD | NEW |