OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <body> | |
4 <form action="javascript:updateDom()"> | |
5 <label for="typer">New label text:</label> | |
6 <input name="typer" type="text"/> | |
7 <br/> | |
8 <label for="color">Select label color:</label> | |
9 <input name="color" id="red" value="red" type="radio"/>Red | |
10 <input name="color" id="green" value="green" type="radio"/>Green | |
11 <br/> | |
12 <input name="submit" type="submit" value="Add Label"/> | |
13 </form> | |
14 <div id="update_butter" style="display:none"></div> | |
15 <script> | |
16 var butter = document.getElementById('update_butter'); | |
17 | |
18 var textProperty = butter['innerText'] ? 'innerText' : 'textContent'; | |
19 | |
20 var listeners = []; | |
21 function registerListener(fn) { | |
22 listeners.push(fn); | |
23 } | |
24 | |
25 function updateDom() { | |
26 butter.style.display = 'block'; | |
27 butter[textProperty] = 'Updating'; | |
28 disableForm(); | |
29 tick(); | |
30 } | |
31 | |
32 function disableForm() { | |
33 var inputs = document.getElementsByTagName('input'); | |
34 for (var i = 0, input; input = inputs[i]; ++i) { | |
35 input.disabled = true; | |
36 } | |
37 } | |
38 | |
39 function enableForm() { | |
40 var inputs = document.getElementsByTagName('input'); | |
41 for (var i = 0, input; input = inputs[i]; ++i) { | |
42 input.disabled = false; | |
43 } | |
44 } | |
45 | |
46 function tick() { | |
47 var length = butter[textProperty].substring('Updating'.length).length; | |
48 if (length != 10) { | |
49 butter[textProperty] += '.'; | |
50 window.setTimeout(tick, 500); | |
51 } else { | |
52 enableForm(); | |
53 var div = document.createElement('div'); | |
54 var colors = document.forms[0].color; | |
55 for (var i = 0, color; color = colors[i]; ++i) { | |
56 if (color.checked) { | |
57 div.style.backgroundColor = color.value; | |
58 break; | |
59 } | |
60 } | |
61 div[textProperty] = document.forms[0].typer.value; | |
62 div.className = 'label'; | |
63 document.forms[0].typer.value = ''; | |
64 document.body.appendChild(div); | |
65 | |
66 butter[textProperty] = 'Done!'; | |
67 | |
68 window.setTimeout(function() { | |
69 while (listeners.length) { | |
70 try { | |
71 listeners.shift()(div[textProperty]); | |
72 } catch (e) { | |
73 butter[textProperty] = "Exception seen: " + e; | |
74 } | |
75 } | |
76 }, 500); | |
77 } | |
78 } | |
79 </script> | |
80 </body> | |
81 </html> | |
OLD | NEW |