81 lines
2.1 KiB
HTML
81 lines
2.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<body>
|
||
|
|
<form action="javascript:updateDom()">
|
||
|
|
<label for="typer">New label text:</label>
|
||
|
|
<input name="typer" type="text"/>
|
||
|
|
<br/>
|
||
|
|
<label for="color">Select label color:</label>
|
||
|
|
<input name="color" id="red" value="red" type="radio"/>Red
|
||
|
|
<input name="color" id="green" value="green" type="radio"/>Green
|
||
|
|
<br/>
|
||
|
|
<input name="submit" type="submit" value="Add Label"/>
|
||
|
|
</form>
|
||
|
|
<div id="update_butter" style="display:none"></div>
|
||
|
|
<script>
|
||
|
|
var butter = document.getElementById('update_butter');
|
||
|
|
|
||
|
|
var textProperty = butter['innerText'] ? 'innerText' : 'textContent';
|
||
|
|
|
||
|
|
var listeners = [];
|
||
|
|
function registerListener(fn) {
|
||
|
|
listeners.push(fn);
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateDom() {
|
||
|
|
butter.style.display = 'block';
|
||
|
|
butter[textProperty] = 'Updating';
|
||
|
|
disableForm();
|
||
|
|
tick();
|
||
|
|
}
|
||
|
|
|
||
|
|
function disableForm() {
|
||
|
|
var inputs = document.getElementsByTagName('input');
|
||
|
|
for (var i = 0, input; input = inputs[i]; ++i) {
|
||
|
|
input.disabled = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function enableForm() {
|
||
|
|
var inputs = document.getElementsByTagName('input');
|
||
|
|
for (var i = 0, input; input = inputs[i]; ++i) {
|
||
|
|
input.disabled = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function tick() {
|
||
|
|
var length = butter[textProperty].substring('Updating'.length).length;
|
||
|
|
if (length != 10) {
|
||
|
|
butter[textProperty] += '.';
|
||
|
|
window.setTimeout(tick, 500);
|
||
|
|
} else {
|
||
|
|
enableForm();
|
||
|
|
var div = document.createElement('div');
|
||
|
|
var colors = document.forms[0].color;
|
||
|
|
for (var i = 0, color; color = colors[i]; ++i) {
|
||
|
|
if (color.checked) {
|
||
|
|
div.style.backgroundColor = color.value;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
div[textProperty] = document.forms[0].typer.value;
|
||
|
|
div.className = 'label';
|
||
|
|
document.forms[0].typer.value = '';
|
||
|
|
document.body.appendChild(div);
|
||
|
|
|
||
|
|
butter[textProperty] = 'Done!';
|
||
|
|
|
||
|
|
window.setTimeout(function() {
|
||
|
|
while (listeners.length) {
|
||
|
|
try {
|
||
|
|
listeners.shift()(div[textProperty]);
|
||
|
|
} catch (e) {
|
||
|
|
butter[textProperty] = "Exception seen: " + e;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, 500);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|