3 |
<head> |
<head> |
4 |
<title>Demo of HTML5 Parsing Algorithm with Scripting Enabled</title> |
<title>Demo of HTML5 Parsing Algorithm with Scripting Enabled</title> |
5 |
<style> |
<style> |
6 |
|
h1, h2 { |
7 |
|
margin: 0; |
8 |
|
font-size: 100%; |
9 |
|
} |
10 |
|
p, pre { |
11 |
|
margin: 0; |
12 |
|
} |
13 |
textarea { |
textarea { |
14 |
display: block; |
width: 100%; |
15 |
width: 80%; |
-width: 99%; |
16 |
margin-left: auto; |
height: 10em; |
|
margin-right: auto; |
|
|
min-height: 20em; |
|
17 |
} |
} |
18 |
output { |
output { |
19 |
display: block; |
display: block; |
23 |
} |
} |
24 |
</style> |
</style> |
25 |
<script> |
<script> |
26 |
|
var delayedUpdater = 0; |
27 |
|
|
28 |
function update () { |
function update () { |
29 |
|
if (delayedUpdater) { |
30 |
|
clearTimeout (delayedUpdater); |
31 |
|
delayedUpdater = 0; |
32 |
|
} |
33 |
|
delayedUpdater = setTimeout (update2, 100); |
34 |
|
} // update |
35 |
|
|
36 |
|
function update2 () { |
37 |
document.logElement.textContent = ''; |
document.logElement.textContent = ''; |
38 |
var p = new Parser (new InputStream (document.sourceElement.value)); |
var v = document.sourceElement.value; |
39 |
|
var p = new Parser (new InputStream (v)); |
40 |
var doc = p.doc; |
var doc = p.doc; |
41 |
p.parse (); |
p.parse (); |
42 |
log (dumpTree (doc, '')); |
log (dumpTree (doc, '')); |
43 |
} // update |
|
44 |
|
document.links['permalink'].href |
45 |
|
= location.href + '?s=' + encodeURIComponent (v); |
46 |
|
} // update2 |
47 |
|
|
48 |
var logIndentLevel = 0; |
var logIndentLevel = 0; |
49 |
function log (s) { |
function log (s) { |
254 |
this.openElements[this.openElements.length - 1].appendChild (el); |
this.openElements[this.openElements.length - 1].appendChild (el); |
255 |
|
|
256 |
// 11. Let the insertion point have the value of the old ... |
// 11. Let the insertion point have the value of the old ... |
257 |
|
|
258 |
oldInsertionPoint += this.insertionPoint; |
oldInsertionPoint += this.insertionPoint; |
259 |
this.setInsertionPoint (oldInsertionPoint); |
this.setInsertionPoint (oldInsertionPoint); |
260 |
|
|
654 |
document.logElement = document.getElementsByTagName ('output')[0]; |
document.logElement = document.getElementsByTagName ('output')[0]; |
655 |
update (); |
update (); |
656 |
"> |
"> |
657 |
|
<h1>Live Scripting Parser</h1> |
658 |
|
|
659 |
<textarea onchange=" update () "><html> |
<h2>Markup to test |
660 |
|
(<a href=data:, id=permalink rel=bookmark>permalink</a>)</h2> |
661 |
|
<p> |
662 |
|
<textarea onkeydown=" update () " onchange=" update () " oninput=" update () "><html> |
663 |
<head></head><body> |
<head></head><body> |
664 |
<p> |
<p> |
665 |
<script> |
<script> |
668 |
<p> |
<p> |
669 |
</textarea> |
</textarea> |
670 |
|
|
671 |
<output></output> |
<h2>Log</h2> |
672 |
|
<p><output></output> |
673 |
|
|
674 |
|
<!-- TODO: short description --> |
675 |
|
|
676 |
|
<!-- TODO: permalink query -> textarea --> |
677 |
|
|
678 |
|
<!-- TODO: multiple attributes are not supported yet --> |
679 |
|
|
680 |
</body> |
</body> |
681 |
</html> |
</html> |