ares-ide
Version:
A browser-based code editor and UI designer for Enyo 2 projects
164 lines (163 loc) • 4.19 kB
HTML
<html>
<head>
<title>Analyzer Example</title>
<!-- -->
<script src="../../../../enyo/enyo.js" type="text/javascript"></script>
<!-- -->
<script src="../../../layout/fittable/package.js" type="text/javascript"></script>
<script src="../package.js" type="text/javascript"></script>
<script src="Presentor.js" type="text/javascript"></script>
<!-- -->
<style>
body {
background-color: silver;
}
i {
color: #555;
}
comment {
display: block;
font-size: smaller;
font-style: italic;
color: green;
padding: 16px 0 8px;
}
label {
font-weight: bold;
}
public {
color: Orange;
padding-right: 6px;
}
protected {
color: Red;
padding-right: 6px;
}
published {
color: green;
padding-right: 6px;
}
kind {
font-size: x-large;
font-weight: bold;
display: block;
}
superkind {
color: #555;
display: block;
}
module {
text-decoration: underline;
color: #46E;
cursor: pointer;
}
topic {
text-decoration: underline;
color: #C39;
cursor: pointer;
}
.box {
padding: 8px;
border: 1px solid #eee;
border-radius: 4px;
margin: 8px;
background-color: whitesmoke;
overflow: auto;
}
#app_modules {
width: 12%;
font-size: smaller;
}
#app_index {
width: 18%;
font-size: smaller;
}
#app_code {
width: 30%;
font-size: x-small;
}
</style>
</head>
<body>
<script>
enyo.kind({
name: "App",
kind: "FittableColumns",
style: "padding: 8px 0;",
components: [
{name: "modules", classes: "box"},
{name: "index", classes: "box"},
{name: "docs", fit: true, classes: "box", allowHtml: true},
{name: "code", tag: "code", fit: true, classes: "box", style: "overflow: auto;"}
],
create: function() {
this.indexer = new analyzer.Indexer();
this.inherited(arguments);
this.walk(["$enyo/source", "$lib/layout", "$lib/onyx/source"]);
},
walk: function(inPaths) {
this.modules = [];
var next = function(inSender, inData) {
if (inData) {
this.modules = this.modules.concat(inData.modules);
}
var path = inPaths.shift();
if (path) {
//this.log(path);
new analyzer.Walker().walk(path).response(this, next);
} else {
this.read(this.modules);
}
};
next.call(this);
},
read: function(inModules) {
new analyzer.Reader()
.go({modules: inModules})
.response(this, function(inSender, inData) {
this.modules = inData.modules;
this.presentModules();
this.index();
this.presentIndex();
})
;
},
presentModules: function() {
this.$.modules.destroyClientControls();
for (var i=0, m; m=this.modules[i]; i++) {
this.createComponent({tag: "module", container: this.$.modules, allowHtml: true, content: m.rawPath + "<br/>", module: m, ontap: "moduleTap"});
}
this.$.modules.render();
},
presentIndex: function() {
this.$.index.destroyClientControls();
for (var i=0, o; o=this.indexer.objects[i]; i++) {
var name = o.name;
var object = o.object && o.object.name;
//var caption = "<topic>" + (o.topic || o.name) + "</topic>";
var module = o.module && o.module.name /*|| o.object && o.object.module && o.object.module.name*/;
var caption = "<topic>" + o.name + "</topic>" + (object ? ": " + object : "") + (module ? " [" + module + "]" : "");
this.createComponent({Xtag: "topic", container: this.$.index, allowHtml: true, content: caption + "<br/>", object: o, ontap: "objectTap"});
}
this.$.index.render();
},
index: function() {
this.indexer.addModules(this.modules);
this.document(this.modules[8]);
},
moduleTap: function(inSender) {
this.document(inSender.module);
},
objectTap: function(inSender) {
this.document(inSender.object && (inSender.object.module || inSender.object.object && inSender.object.object.module) || inSender.object);
},
document: function(inModule) {
this.$.code.setContent(inModule.code);
this.$.docs.setContent(new analyzer.Presentor().presentObjects(inModule.objects));
}
});
new App({fit: true}).write();
</script>
</body>
</html>