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. | |
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) { | |
mtklein
2014/04/21 16:19:01
This may be me being rusty on the DOM, but is this
jcgregorio
2014/04/21 16:26:24
A node can only be owned by one parent, when the n
mtklein
2014/04/21 16:31:14
Ah, duh, clearly rusty.
| |
21 content.appendChild(templates[i].firstChild); | |
22 } | |
23 templates[i].content = content; | |
24 } | |
25 })(); | |
26 | |
27 /** | |
7 * All the functionality is wrapped up in this anonymous closure, but we need | 28 * All the functionality is wrapped up in this anonymous closure, but we need |
8 * to be told if we are on the workspace page or a normal try page, so the | 29 * to be told if we are on the workspace page or a normal try page, so the |
9 * workspaceName is passed into the closure, it must be set in the global | 30 * workspaceName is passed into the closure, it must be set in the global |
10 * namespace. If workspaceName is the empty string then we know we aren't | 31 * namespace. If workspaceName is the empty string then we know we aren't |
11 * running on a workspace page. | 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. | |
12 */ | 38 */ |
13 (function(workspaceName) { | 39 (function(workspaceName) { |
14 var run = document.getElementById('run'); | 40 var run = document.getElementById('run'); |
15 var permalink = document.getElementById('permalink'); | 41 var permalink = document.getElementById('permalink'); |
16 var embed = document.getElementById('embed'); | 42 var embed = document.getElementById('embed'); |
17 var embedButton = document.getElementById('embedButton'); | 43 var embedButton = document.getElementById('embedButton'); |
18 var code = document.getElementById('code'); | 44 var code = document.getElementById('code'); |
19 var output = document.getElementById('output'); | 45 var output = document.getElementById('output'); |
20 var img = document.getElementById('img'); | 46 var img = document.getElementById('img'); |
21 var tryHistory = document.getElementById('tryHistory'); | 47 var tryHistory = document.getElementById('tryHistory'); |
22 var parser = new DOMParser(); | 48 var parser = new DOMParser(); |
49 var tryTemplate = document.getElementById('tryTemplate'); | |
50 | |
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 } | |
23 | 58 |
24 | 59 |
25 function beginWait() { | 60 function beginWait() { |
26 document.body.classList.add('waiting'); | 61 document.body.classList.add('waiting'); |
27 run.disabled = true; | 62 run.disabled = true; |
28 } | 63 } |
29 | 64 |
30 | 65 |
31 function endWait() { | 66 function endWait() { |
32 document.body.classList.remove('waiting'); | 67 document.body.classList.remove('waiting'); |
(...skipping 18 matching lines...) Expand all Loading... | |
51 console.log(e.target.response); | 86 console.log(e.target.response); |
52 body = JSON.parse(e.target.response); | 87 body = JSON.parse(e.target.response); |
53 output.innerText = body.message; | 88 output.innerText = body.message; |
54 if (body.hasOwnProperty('img')) { | 89 if (body.hasOwnProperty('img')) { |
55 img.src = 'data:image/png;base64,' + body.img; | 90 img.src = 'data:image/png;base64,' + body.img; |
56 } else { | 91 } else { |
57 img.src = ''; | 92 img.src = ''; |
58 } | 93 } |
59 // Add the image to the history if we are on a workspace page. | 94 // Add the image to the history if we are on a workspace page. |
60 if (tryHistory) { | 95 if (tryHistory) { |
61 var newHistoryStr = '<div class=tries>' + | 96 addToHistory(body.hash, 'data:image/png;base64,' + body.img); |
62 '<a href="/c/' + body.hash + '">' + | |
63 ' <img width=64 height=64 src="' + img.src + '">' + | |
64 '</a></div>'; | |
65 | |
66 var newHistory = parser.parseFromString(newHistoryStr, "text/html"); | |
67 tryHistory.insertBefore(newHistory.body.firstChild, tryHistory.firstChil d); | |
68 } else { | 97 } else { |
69 window.history.pushState(null, null, "./" + body.hash); | 98 window.history.pushState(null, null, "./" + body.hash); |
70 } | 99 } |
71 if (permalink) { | 100 if (permalink) { |
72 permalink.href = "/c/" + body.hash; | 101 permalink.href = "/c/" + body.hash; |
73 } | 102 } |
74 if (embed) { | 103 if (embed) { |
75 var url = document.URL; | 104 var url = document.URL; |
76 url = url.replace('/c/', '/iframe/'); | 105 url = url.replace('/c/', '/iframe/'); |
77 embed.value = '<iframe src="' + url + '" width="740" height="550" style= "border: solid #00a 5px; border-radius: 5px;"/>' | 106 embed.value = '<iframe src="' + url + '" width="740" height="550" style= "border: solid #00a 5px; border-radius: 5px;"/>' |
(...skipping 28 matching lines...) Expand all Loading... | |
106 | 135 |
107 | 136 |
108 function onEmbedClick() { | 137 function onEmbedClick() { |
109 embed.style.display='inline'; | 138 embed.style.display='inline'; |
110 } | 139 } |
111 | 140 |
112 if (embedButton) { | 141 if (embedButton) { |
113 embedButton.addEventListener('click', onEmbedClick); | 142 embedButton.addEventListener('click', onEmbedClick); |
114 } | 143 } |
115 | 144 |
145 | |
146 // Add the images to the history if we are on a workspace page. | |
147 if (tryHistory && history) { | |
148 for (var i=0; i<history.length; i++) { | |
149 addToHistory(history[i].hash, '/i/'+history[i].hash+'.png'); | |
150 } | |
151 } | |
152 | |
116 })(workspaceName); | 153 })(workspaceName); |
OLD | NEW |