ares-ide
Version:
A browser-based code editor and UI designer for Enyo 2 projects
153 lines (150 loc) • 4.29 kB
HTML
<html>
<head>
<title>Analyzer Example</title>
<!-- -->
<script src="../../../../enyo/enyo.js" type="text/javascript"></script>
<!-- -->
<script src="../Lexer.js" type="text/javascript"></script>
<script src="../Iterator.js" type="text/javascript"></script>
<script src="../Parser.js" type="text/javascript"></script>
<script src="../Documentor.js" type="text/javascript"></script>
<!-- -->
<style>
i {
color: Blue;
}
group {
color: Orange;
}
</style>
</head>
<body>
<script id="test">
components = [
{name: "progressAnimator", kind: "Animator", onStep: "progressAnimatorStep", onEnd: "progressAnimatorComplete"},
{name: "bar", classes: "onyx-progress-bar-bar onyx-progress-button-bar"},
{name: "client", classes: "onyx-progress-button-client"},
{kind: "onyx.Icon", src: "$lib/onyx/images/progress-button-cancel.png", classes: "onyx-progress-button-icon", ontap: "cancelTap"}
];
</script>
<script>
w = function(h) {document.write(h);};
//
dumpTokens = function(inTokens) {
w("<pre>");
for (var i=0, t; t=inTokens[i]; i++) {
w("<i>" + t.kind + "</i>: ");
w("<blockquote><span style='background-color:lightblue; padding: 1px;'>");
w(t.token.replace(/\</g, "<").replace(/\>/g, ">"));
w("</span></blockquote>");
}
w("</pre>");
}
//
dumpNodes = function(inNodes) {
var it = new analyzer.Iterator(inNodes);
while (it.next()) {
//console.log(it.value);
w("<i>" + it.value.kind + "</i>: ");
w(it.value.token);
w("<br/>");
if (it.value.children) {
w("<blockquote>");
dumpNodes(it.value.children);
w("</blockquote><-<br/>");
}
}
}
//
dumpObjects = function(inObjects) {
var it = new analyzer.Iterator(inObjects);
while (it.next()) {
var o = it.value;
w("<i>" + o.type + "</i>: ");
if (o.comment) {
w("<blockquote><i style='background-color:#eee; padding: 4px;'>");
w(o.comment);
w("</i></blockquote>");
}
w("<blockquote><span style='background-color:lightblue; padding: 4px; white-space: nowrap;'>");
w(o.token.replace(/\</g, "<").replace(/\>/g, ">"));
w("</span></blockquote>");
//
if (o.properties) {
w("<blockquote>");
dumpObjects(o.properties);
w("</blockquote><-<br/>");
}
//
if (o.value) {
w("<blockquote>");
dumpObjects(o.value);
w("</blockquote><-<br/>");
}
}
}
//
getByType = function(inObjects, inType) {
var result = [];
for (var i=0, o; o=inObjects[i]; i++) {
if (o.type == inType) {
result.push(o);
}
}
return result;
}
presentObjects = function(inObjects) {
w("<h3>Kinds</h3>");
var objs = getByType(inObjects, "kind");
for (var i=0, o; o=objs[i]; i++) {
w("<i>name:</i> <label>" + o.name + "</label><br/>");
}
w("<h3>Functions</h3>");
var objs = getByType(inObjects, "function");
for (var i=0, o; o=objs[i]; i++) {
w("<i>name:</i> <label>" + o.name + "</label><br/>");
}
w("<h3>Variables</h3>");
var objs = getByType(inObjects, "global");
for (var i=0, o; o=objs[i]; i++) {
w("<i>name:</i> <label>" + o.name + "</label><br/>");
}
}
//
var s = document.getElementById("test");
//
var tokens = new analyzer.Lexer(s.text);
w('Lexer: <div style="width: 500px; height: 400px; overflow: auto; border: 1px solid silver; font-size: smaller;">');
console.dir(tokens);
dumpTokens(tokens);
w('</div>');
//
w('<br/>');
//
var nodes = new analyzer.Parser(tokens);
console.dir(nodes);
w('Parser: <div style="width: 500px; height: 400px; overflow: auto; border: 1px solid silver; font-size: smaller;">');
dumpNodes(nodes);
w('</div>');
//
w('<br/>');
//
var objects = new analyzer.Documentor(nodes);
console.dir(objects);
w('Documentor: <div style="width: 500px; height: 400px; overflow: auto; border: 1px solid silver; font-size: smaller;">');
dumpObjects(objects);
w('</div>');
//
w('Presentor: <div style="width: 500px; height: 400px; overflow: auto; border: 1px solid silver; font-size: smaller;">');
presentObjects(objects);
w('</div>');
//
document.body.onload = function() {
setTimeout(function() {
document.body.scrollTop = 8000;
}, 100);
}
</script>
</body>
</html>