start with self documenting api
This commit is contained in:
j
parent
9c34b74621
commit
d0b4727f72
2 changed files with 197 additions and 0 deletions
181
docs/api.js
Normal file
181
docs/api.js
Normal file
|
|
@ -0,0 +1,181 @@
|
|||
/***
|
||||
OxUI Documentation
|
||||
***/
|
||||
var app = {};
|
||||
$(function() {
|
||||
app.$body = $('body');
|
||||
app.$document = $(document);
|
||||
app.$window = $(window);
|
||||
|
||||
app.$ui = {};
|
||||
app.docs = getDocsJSON();
|
||||
app.$ui.actionList = constructList();
|
||||
app.$ui.actionInfo = Ox.Container().css({padding: '8px'});
|
||||
|
||||
|
||||
var $main = new Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: app.$ui.actionList,
|
||||
size: 160
|
||||
},
|
||||
{
|
||||
element: app.$ui.actionInfo
|
||||
}
|
||||
],
|
||||
orientation: 'horizontal'
|
||||
});
|
||||
|
||||
$main.appendTo(app.$body);
|
||||
});
|
||||
|
||||
function constructList() {
|
||||
return new Ox.TextList({
|
||||
columns: [
|
||||
{
|
||||
align: "left",
|
||||
id: "name",
|
||||
operator: "+",
|
||||
title: "Name",
|
||||
unique: true,
|
||||
visible: true,
|
||||
width: 140
|
||||
},
|
||||
],
|
||||
columnsMovable: false,
|
||||
columnsRemovable: false,
|
||||
id: 'actionList',
|
||||
request: function(data, callback) {
|
||||
var items = [];
|
||||
app.docs.forEach(function(v) {
|
||||
items.push({'name': v.name});
|
||||
});
|
||||
items.sort(function(a, b) { if(a.name < b.name) { return -1 } else if( a.name == b.name) { return 0 }else { return 1 } })
|
||||
if(!data.keys) {
|
||||
var result = {'data': {'items': items.length}};
|
||||
} else {
|
||||
var result = {'data': {'items': items}};
|
||||
}
|
||||
Ox.print("items", items);
|
||||
callback(result);
|
||||
},
|
||||
sort: [
|
||||
{
|
||||
key: "name",
|
||||
operator: "+"
|
||||
}
|
||||
]
|
||||
}).bindEvent({
|
||||
select: function(event, data) {
|
||||
var info = $('<div>');
|
||||
var ids = data.ids;
|
||||
ids.forEach(function(v) {
|
||||
var docObj = getObjectByName(app.docs, v);
|
||||
var html = getDocHtml(docObj);
|
||||
info.append(html);
|
||||
});
|
||||
app.$ui.actionInfo.html(info);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getDocHtml(doc) {
|
||||
var wrapper = $('<div>');
|
||||
var title = $('<h2>').html(doc.name).appendTo(wrapper);
|
||||
var $options = $('<div>').html("Options: ").css({'marginBottom': '20px'}).appendTo(wrapper);
|
||||
Ox.keys(doc.options).forEach(function(k) {
|
||||
var $option = $('<div>');
|
||||
var optionKey = $('<b>').html(k + ": ").appendTo($option);
|
||||
var optionVal = $('<span>').html(typeof doc.options[k]).appendTo($option);
|
||||
$('<span>').html(' <b>' + doc.options[k].toString() + '</b>').appendTo($option);
|
||||
$option.appendTo($options);
|
||||
});
|
||||
var methods = Ox.keys(doc.methods);
|
||||
if (methods.length > 0) {
|
||||
var $methods = $('<div>').html("Methods: <br>").appendTo(wrapper);
|
||||
methods.forEach(function(m) {
|
||||
var $m = $('<div>').appendTo($methods);
|
||||
var f = $('<pre>').html(doc.methods[m]).hide();
|
||||
var title = m;
|
||||
var options = /function \((.*?)\)/.exec(doc.methods[m]);
|
||||
if(options) {
|
||||
title = title + '('+options[1]+')';
|
||||
}
|
||||
var lable = new Ox.Label({
|
||||
title: title,
|
||||
width: 190
|
||||
})
|
||||
.css({'float': 'left', 'margin-right': '4px'})
|
||||
.addClass("margin")
|
||||
.appendTo($m);
|
||||
var b = new Ox.Button({
|
||||
title: [
|
||||
{id: "one", title: "expand"},
|
||||
{id: "two", title: "collapse"},
|
||||
],
|
||||
type: "image"
|
||||
})
|
||||
.addClass("margin")
|
||||
.appendTo($m)
|
||||
.click(function() { f.toggle()});
|
||||
f.appendTo($m);
|
||||
});
|
||||
}
|
||||
var $functionString = $('<pre>').html(doc.functionString).appendTo(wrapper);
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
function getObjectByName(obj, name) {
|
||||
var ret = false;
|
||||
obj.forEach(function(o) {
|
||||
if (o.name == name) {
|
||||
ret = o;
|
||||
}
|
||||
});
|
||||
return ret;
|
||||
}
|
||||
|
||||
function getDocsJSON() {
|
||||
var ret = [],
|
||||
keys = Ox.keys(Ox);
|
||||
keys.forEach(function(v) {
|
||||
if (doc = getDoc(v)) {
|
||||
ret.push(doc);
|
||||
} else {
|
||||
$.noop();
|
||||
}
|
||||
});
|
||||
return ret;
|
||||
|
||||
function getDoc(key) {
|
||||
var standardElement = new Ox.Element();
|
||||
var standardMethods = Ox.filter(Ox.keys(standardElement), function(m) { return typeof standardElement[m] === 'function' });
|
||||
var firstLetter = key.substring(0,1);
|
||||
if (firstLetter != firstLetter.toUpperCase() || typeof Ox[key] != 'function') {
|
||||
return false;
|
||||
}
|
||||
try {
|
||||
var o = new Ox[key]();
|
||||
}
|
||||
catch(err) {
|
||||
return false;
|
||||
}
|
||||
if ('options' in o && typeof o['options'] == 'function') {
|
||||
var functionString = Ox[key].toString();
|
||||
var opts = o.options();
|
||||
var _methods = Ox.filter(Ox.keys(o), function(m) { return (functionString.indexOf('that.'+m+' =') > -1 && typeof o[m] === 'function')});
|
||||
var methods = {};
|
||||
$.each(_methods, function(i, m) { methods[m] = o[m].toString() });
|
||||
}
|
||||
else {
|
||||
return false;
|
||||
}
|
||||
return {
|
||||
'name': key,
|
||||
'options': opts,
|
||||
'methods': methods,
|
||||
'functionString': functionString
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
16
docs/index.html
Normal file
16
docs/index.html
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>oxjs API</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../build/css/ox.ui.css"/>
|
||||
|
||||
<script type="text/javascript" src="../build/js/jquery-1.4.2.js"></script>
|
||||
<script type="text/javascript" src="../build/js/ox.js"></script>
|
||||
<script type="text/javascript" src="../build/js/ox.ui.js"></script>
|
||||
<script type="text/javascript" src="api.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue